Wechat H5 development pit points

Pit point 1: If normal urls cannot be loaded in Hash routing mode during Android and ios sharing, Find shared links that become (https://xxx.com/?from=grounmessage&installed=0#/register?code=1111&locale=zh_cn, etc.).

Add a query value to /#/

Such as:

Pothole 2: The ios onMenuShareTimeline method does not perform a successful callback.

Solution: Successful callback plus delay (500ms)

Such as:

Pit 3: the page input cannot be entered again after the ios keyboard is aroused (the input is misplaced).

Cause: The soft keyboard placeholder that pops up when the input box is focused within the fixed positioning element loses focus. The soft keyboard disappears when the input box is still occupied and cannot be typed again.

Solution: Give an event when you lose focus so that the scrollbar height is the same as the current height.

Such as:

/ / js partsgetTop() {  setTimeout(() => {    var scrollHeight =     document.documentElement.scrollTop     || document.body.scrollTop || 0;    window.scrollTo(0, Math.max(scrollHeight, 0));  }, 100); }Copy the code

Solutions: Add a focus event to the input and Textarea tags, as follows: Scrolling will not work.

changefocus(){  let u = navigator.userAgent,   app = navigator.appVersion;  let isAndroid = u.indexOf('Android') > -1   || u.indexOf('Linux') > -1;  if(isAndroid){    setTimeout(function() {      document.activeElement.      scrollIntoViewIfNeeded();      document.activeElement.scrollIntoView();    }, 500);         }},Copy the code

Pit 6: IOS does not support the new Date(“2019-01-01 00:00:00”) format.

var date =new Date("2020-02-10 00:00:00");Copy the code

Error 7: Vue single page application wechat sharing keeps prompting invalid signature. According to the official document, we need the link of the “#hash” part of the current page, and we need encodeURIComponent, but android is normal, ios still reported an error.

Causes: In history mode, pushState is used to switch views, but IOS wechat client (android client has been fixed) does not support pushState H5 feature, so the route is changed, but wechat browser received the same URL, the upper right corner copy link found, The url recorded by wechat is still the same as the one you entered for the first time. You can only get the latest URL unless you refresh it manually or use window.location and other page hopping methods.

Solution: Record the URL when entering the page. If it is an iOS device, 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])}Copy the code


React component and lifecycle
The React function component and the Class component and Hooks

The most popular vue.js interview questions of 2020

I want to buy a girlfriend