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

This article mainly introduces the relevant knowledge of "how to solve WeChat Mini Programs compatibility problem". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to solve WeChat Mini Programs compatibility problem" can help you solve the problem.

Running environment difference WeChat Mini Programs runs on three ends: iOS, Android and developer tools for debugging.

The script execution environment at the three ends and the environment used to render non-native components are different:

On iOS, Mini Program's javascript code runs in JavaScriptCore and is rendered by WKWebView. The environment has iOS8 or above.

On Android, Mini Program's javascript code is parsed by X5 JSCore, which is rendered by X5 based on the Mobile Chrome 53lap57 kernel.

On the development tools, Mini Program's javascript code runs in nwjs and is rendered by Chrome Webview

}, although the environments at the three ends are very similar, there are still some differences:

ES6 syntax supports inconsistent syntax developers can avoid it by turning on the function of converting ES6 to ES5.

Although most of the problems can be avoided by enabling style completion, it is recommended that developers check the actual performance of Mini Program on iOS and Android, respectively.

ES6 to ES5 in 0.10.101000 and later development tools, babel will be used by default to convert the developer ES6 syntax code into ES5 code that can be well supported by the three ends to help developers solve the development problems caused by different environments.

Style completion turns on this option, and the development tool automatically detects and completes the missing style to ensure normal display on the lower version of the system. Although most of the problems can be avoided, it is recommended that developers check the real performance of Mini Program on iOS and Android, respectively.

Mini Program-compatible features are constantly increasing, but the old version of Wechat clients do not support new features, so you need to be compatible when using these new capabilities.

The document will include the version number supported by each function in the page description of the component, API, etc.

You can obtain the base library version number of Mini Program through wx.getSystemInfo or wx.getSystemInfoSync.

You can use wx.canIUse to determine whether the corresponding API or components can be used directly under the basic library version.

Get system information synchronization

Let res = wx.getSystemInfoSync () console.log ("get system information synchronously:" + res); console.log (res); Asynchronous:

Wx.getSystemInfo ({success: function (res) {console.log ("asynchronously get system information:"); console.log (res);},},}) version comparison Wechat client and Mini Program base library version number style is Major.Minor.Patch (major version number. The second edition number. Revision number). Developers can do compatibility according to the version number.

Function compareVersion (v1, v2) {v1 = v1.split ('.') v2 = v2.split ('.) var len = Math.max (v1.length, v2.length) while (v1.length)

Num2) {return 1} else if (num1 < num2) {return-1}} return 0} compareVersion ('1.11.0,' 1.9.9') / / 1 use the corresponding API or component API directly under this basic library version

Wx.canIUse (String) determines whether Mini Program's API, callback, parameters, components, etc., are available in the current version. This interface is supported from the base library version 1.1.1.

String parameter description: use {API}. {method}. {param}. {options} or {component}. {attribute}. {option}, for example:

{API} represents API name {method} represents calling method. Valid values are return, success, object, callback {param} represent parameters or return value {options} represents optional value of parameter {component} represents component name {attribute} represents component attribute {option} represents optional value of component property.

Example:

Compatibility of wx.canIUse ('openBluetoothAdapter') wx.canIUse (' getSystemInfoSync.return.screenWidth') wx.canIUse ('getSystemInfo.success.screenWidth') wx.canIUse (' showToast.object.image') wx.canIUse ('onCompassChange.callback.direction') wx.canIUse (' request.object.method.GET') wx.canIUse ('live-player') wx.canIUse (' text.selectable') wx.canIUse ('button.open-type.contact') Javascript Standard Library WeChat Mini Programs Capacitive problems, in addition to Wechat's own Bug. Most of them are caused by the different degree of support of the target platform to the JavaScript standard library. For example, the problem I encountered above is the compatibility of the Javascript standard library. We can patch this kind of problem, find the more perfect js code from other places, and then we copy it to our project.

This is the end of the content about "how to solve the WeChat Mini Programs compatibility problem". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.