Problems and solutions encountered in mobile H5 development

The content this article brings to you is about the problems and solutions encountered in mobile H5 development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

WeChat sharing signature error invalid signature

In vue single-page application history mode, WeChat sharing always prompts signature error invalid signature

According to the WeChat official website document, jssdk has been introduced, correct Configure a js secure domain name, and the signature generated by the backend developer is also verified by the WeChat signature tool. However, the custom sharing on the front end always reports a signature error, and there is no way to customize the sharing. If you ensure that there are no problems with the basic configuration, and the signature also passes WeChat Signature tool verification, then it may be a signature error caused by the inconsistency between the URL accessed by the front-end and the URL generated by the background.

If the front-end passes the URL to the back-end through ajax to obtain the signature, then we need to remove the current page' #'hash part of the link, and needs to encodeURIComponent

let url = location.href.split('#')[0]
encodeURIComponent(url)

Normally, this can achieve custom sharing on WeChat, but after the single-page application routing is switched, the IOS side still prompts a signature error, and the Android side has no problem

This is because the view in history mode is switched through pushState, but the IOS WeChat client (the Android client has been repaired) does not support the new H5 feature of pushState, so the routing changes but the WeChat browser obtains The URL has not changed. Copy the link in the upper right corner and find that the URL recorded by WeChat is still the URL when you first entered it. Unless you refresh it manually or refresh it using page jump methods such as window.location, you can get the latest URL

The solution is to record the URL when entering the page. If it is an iOS device, then use this URL to obtain the WeChat signature

router.afterEach(to => {
  sessionStorage.setItem('currentUrl',window.location.href)
})
let url = encodeURIComponent(location.href.split('#')[0])
if(system == "iOS" && sessionStorage.getItem('currentUrl')) {
  url = encodeURIComponent(sessionStorage.getItem('currentUrl').split('#')[0])
}

At this time, it is correct to use this URL to obtain the WeChat signature. This method is only suitable for For IOS devices, as long as the signed URL is consistent with the URL recorded by WeChat, it will be correct.

Round-trip caching problem

When you click the browser's forward and backward buttons, sometimes the js will not be automatically executed. Specifically in Safari, this has to do with round trip caching (bfcache).
Solution: window.onunload = function(){};

If it is a Vue single-page application and keep-alive is used, the page will not be refreshed. At this time, some interface requests can be made. Place it in the beforeRouteEnter method

IOS does not support the format of new Date("2019-01-01 00:00:00")

This way of writing new Date("2019-01 -01 00:00:00") is supported on the Android side, but not supported on the IOS side, and a NAN error will be reported, so you need to change new Date("2019-01-01 00:00:00") to new Date("2019/01/01 00:00:00") This form

let date = '2019-01-01 00:00:00'
date.replace(/\-/g, '/')

WeChat QR code

There may be multiple QR codes on a page, but long press to identify two The QR code can only recognize the last QR code. At this time, we need to control that only one QR code can appear in the visible area of ​​the page.

Cannot be clicked on IOS

span,p, etc. cannot be clicked by default Clicked label, monitoring click event click is invalid in IOS
Solution, add cursor: pointer;

audio audio cannot be played

audio.play() method can be played normally on Android devices , but it cannot be played on the IOS client. After setting the src of audio, we need to add this line of code
audio.load() to load the audio

You can check whether the audio is OK by monitoring the loadeddata method Start playing. Android is set to start playing after the audio is loaded, but there may be a slight delay on the iOS side. At this time, we can get whether the audio has started playing through audio.currentTime. If this value is greater than 0, it means that it has started playing.

300ms delayed response to click event on IOS mobile terminal

Fixed problem

In systems below ios8, when the small keyboard is activated, the position floating problem will occur. The solution is: just Add css style to the outer layer p in the middle part
position:fixed;top:50px; bottom:50px;overflow:scroll;

This article is all over here, there are more other exciting contents You can pay attention to the HTML5 video tutorial column on the PHP Chinese website!

The above is the detailed content of Problems and solutions encountered in mobile H5 development. For more information, please follow other related articles on the PHP Chinese website!