Shulou(Shulou.com)06/02 Report--

In this issue, Xiaobian will bring you analysis and solutions to compatibility problems on WeChat H5 pages. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

As H5 pages become more and more popular, more and more developers are starting to use H5 to do Weixin Official Accounts recently. Naturally, many problems will be encountered in this process. Xiaobian here sorted out five common WeChat H5 page compatibility problems, to analyze the details of the problem, the causes and the corresponding solutions. For those of you who have questions, let's take a look together!

1, iOS compatible input cursor height

Problem description: input box cursor, no problem on android phone, but on apple phone when clicking input, cursor height and parent box height is the same.

Reason analysis: Usually we are used to setting the height between rows with the height attribute and the distance between rows (row height) with the line-height attribute. When clicking the input, the height of the cursor will automatically be the same as the height of the parent box. (Google's design principle is that the height of the cursor is equal to the line-height of the input when there is no content, and the cursor goes from the top of the input to the bottom of the text when there is content.

Solution: height and line-height content with padding.

For example:

.content{

float: left;

box-sizing: border-box;

height: 88px;

width: calc(100% - 240px);

.content-input{

display: block;

box-sizing: border-box;

width: 100%;

color: #333333;

font-size: 28px;

//line-height: 88px;

padding-top: 20px;

padding-bottom: 20px;

}

}

2. Vue routing uses hash mode. When developing WeChat H5 page sharing, setting sharing on Android is successful, but ios sharing is abnormal.

Detailed description of the problem:

ios current page to share with friends, click in is normal, if the second share, jump to the home page; use vue router to jump to the second page after sharing, sharing settings failed; the above Android sharing is normal.

Reason analysis: jssdk is back-end signing, front-end verification, but sometimes cross-domain, ios is shared after automatically bringing from=singlemessage&isappinstalled=0 and other parameters, sharing circle parameters are not the same, it seems that the system is different parameters are different, but each time you get url and can not get the latter parameters

Solution:

(1) You can use this page to change this.$ router.push jump, for_window.location.href to jump, rather than using route jump, so that the address bar address and the current page address the same, can be shared successfully (suitable for sharing the page is not many cases, as a single page application, so refresh the page jump, or..)

(2) Save the entry address locally, and take it out when you need to obtain the signature. Note: sessionStorage.setItem ('href ',href); Save it only when you first enter a single application!

3. When the ios WeChat h6 page slides up and down, the page is stuck and missing.

Description of the problem details: On the ios side, when sliding the page up and down, if the page height exceeds one screen, there will be obvious stuttering, and some of the contents of the page will not be displayed completely.

Cause analysis:

Generally speaking, the kernel of WeChat browser, Android uses its own WebKit kernel, iOS uses its own Safari kernel due to Apple's reasons, Safari uses native controls for overflow-scrolling. For pages with-webkit-overflow-scrolling, a UIScrollView is created, providing sublayers for the rendering module to use. [To be verified]

Solution: Just add the following line to the common style

*{

-webkit-overflow-scrolling: touch;

}

4. The ios keyboard is aroused, and the page does not return after the keyboard is retracted.

Detailed description of the problem:

Input content, soft keyboard pop-up, page content as a whole up, but the keyboard retracted, page content does not slide down.

Cause analysis:

Fixed positioning of elements within the element when the input box is in focus pop-up soft keyboard placeholder when the soft keyboard disappears when the focus is lost, but the placeholder still causes the input box not to be entered again and gives an event when the focus is lost.

Solution:

Name of Insured Person

changeBlur(){

let u = navigator.userAgent, app = navigator.appVersion;

let isIOS = !! u.match(/(i[^;]+;( U;)? CPU.+ Mac OS X/);

if(isIOS){

setTimeout(() => {

const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0

wind

ow.scrollTo(0, Math.max(scrollHeight - 1, 0))

}, 200)

}

}

5. Android pop-up keyboard covers text box

Detailed description of the problem:

Android WeChat H5 pops up the soft keyboard and blocks the input input box.

Solution: Add focus event to input and textarea tags, as follows, first determine whether it is an operation under Android phone, of course, you can not determine the model, Document object attributes and methods, setTimeout delay 0.5 seconds, because the call Android keyboard is a bit slow, resulting in scrolling failure if it is not delayed

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);

}

}

The above is the WeChat H5 page compatibility problem analysis and solution shared by Xiaobian for everyone. If there are similar doubts, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.