How to solve problems encountered by mobile H5 development

This article mainly introduces how to solve the problems encountered in the mobile H5 development, the introduction is very detailed, with certain reference value, interested friends must have read!

WeChat Share Signature Invalid Signature

VUE Single page Application History mode WeChat sharing has been prompting the signature error Invalid Signature

Follow the WeChat official website, have introduced JSSDK, correct Configure the JS security domain name, the signature generated by the background developer is also verified by WeChat signature tool, but the front-end custom share has been reported to the signature error. There is no way to customize the sharing. If you have no problem, and the signature has passed WeChat The signature tool is verified, then the URL of the front-end access and the URL inconsistency of the URL of the background generation signature are inconsistent

front end If it passes the URL to the rear acquisition signature, then we need to remove the current page ‘ # o 部分 部分, 部分[[[[][[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ ]

Normally, the WeChat custom sharing can be implemented, but the only page application route is switched, the iOS terminal is still prompting the signature error, and there is no problem with the Android end
 This is because the History mode is the view is Switch by PushState, but the iOS WeChat client (Android client has been fixed) does not support PushState's H5 new features, so the route changes but the URL obtained by the WeChat browser does not change, the upper right corner copy link discovery, WeChat record The URL is still the first time the URL, unless you manually refresh, or use the page jump method such as Window.Location to refresh, can get the update URL   to solve the URL when the page is entered. If you are an iOS device, use this URL to get 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 = encode.getitem (sessionStorage.Getitem (‘currenturl’). split (‘#’) [0])}

Time to get this URL to get the WeChat signature is correct, this method is only suitable for iOS devices, as long as you get the signature URL and WeChat record URL is correct

round-trip cache Question
  Click on the forward and rollback of the browser, sometimes it will not automate JS, especially in Safari, which is related to the round trip cache.  Workaround: Window.onunload = function () {}; 
If the VUE single page application is used, the page will not refresh, at this time, some interface requests, etc. Put in the BeforeRouteenter method

iOS terminal does not support New Date (“2019-01-01 00:00”) This format

This method new date (“2019-01 -01 00:00:00 “) is supported by Android, but does not support in the iOS side, will report a Nan error, so you need to change New Date (” 2019-01-01 00:00:00 “) to New Date Date (“2019/01/01 00:00:00”) This form


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

WeChat 2D Code

A page may have multiple QR code, but long pressing the QR code can only identify the last QR code, this time we need to control the page visual area can only appear one QR code
   span, p, can not click on the label, and listen to the Click event in iOS, click invalid 
solution, add Cursor: Pointer;

AUDIO Audio Unable to play

Audio.play () method can play normally in Android, but we need to play this line after the IOS client is set, we need to add this line of code

AUDIO .load () goes to load audio

can be played by listening to whether the loadedData method can start playing, Android settings will start playing after the audio is loaded, but the iOS end may have a slight delay, this time we can Get the audio to start playback via audio.currenttime, this value is greater than 0, indicating that the delay response of the iOS mobile Click event 300ms has started


FIXED problem

In iOS8, when the keypad is activated, a location floating problem occurs, and the solution: only needs to add CSS style in the middle part of the outer layer

Position: fixed; top: 50px; bottom: 50px; overflow: scroll;


How to solve all the contents of the problem encountered by the mobile H5, thank you for reading! The content that wants to share is helpful to everyone, more related knowledge, welcome to pay attention to Tumi Yun Industry News Channel!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment