微信小程序兼容性問題怎么解決

這篇文章主要介紹“微信小程序兼容性問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序兼容性問題怎么解決”文章能幫助大家解決問題。

運行環(huán)境差異

微信小程序運行在三端：iOS、Android 和 用于調試的開發(fā)者工具。

三端的腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的：

在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環(huán)境有 iOS8以上 
在 Android 上，小程序的 javascript 代碼是通過 X5 JSCore來解析，是由 X5 基于 Mobile Chrome 53/57 內核來渲染的 
在 開發(fā)工具上， 小程序的 javascript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的 
}, 盡管三端的環(huán)境是十分相似的，但是還是有些許區(qū)別：

ES6 語法支持不一致 語法上開發(fā)者可以通過開啟 ES6 轉 ES5 的功能來規(guī)避。

wxss 渲染表現不一致 盡管可以通過開啟樣式補全來規(guī)避大部分的問題，還是建議開發(fā)者需要在 iOS 和 Android 上分別檢查小程序的真實表現。

ES6 轉 ES5

在 0.10.101000 以及之后版本的開發(fā)工具中，會默認使用 babel 將開發(fā)者 ES6 語法代碼轉換為三端都能很好支持的 ES5 的代碼，幫助開發(fā)者解決環(huán)境不同所帶來的開發(fā)問題。

樣式補全

開啟此選項，開發(fā)工具會自動檢測并補全缺失樣式，保證在低版本系統(tǒng)上的正常顯示。盡管可以規(guī)避大部分的問題 ，還是建議開發(fā)者需要在 iOS 和 Android 上分別檢查小程序的真實表現。

兼容

小程序的功能不斷的增加，但是舊版本的微信客戶端并不支持新功能，所以在使用這些新能力的時候需要做兼容。

文檔會在組件，API等頁面描述中帶上各個功能所支持的版本號。

可以通過 wx.getSystemInfo 或者 wx.getSystemInfoSync 獲取到小程序的基礎庫版本號。

可以通過 wx.canIUse 來判斷是否可以在該基礎庫版本下直接使用對應的API或者組件

獲取系統(tǒng)信息

同步

let res = wx.getSystemInfoSync()console.log("同步獲取系統(tǒng)信息：" + res);console.log(res);

異步：

wx.getSystemInfo({success: function(res) {console.log("異步獲取系統(tǒng)信息:");console.log(res);},})

版本比較

微信客戶端和小程序基礎庫的版本號風格為 Major.Minor.Patch（主版本號.次版本號.修訂號）。 開發(fā)者可以根據版本號去做兼容

function compareVersion(v1, v2) {v1 = v1.split('.')v2 = v2.split('.')var len = Math.max(v1.length, v2.length) while (v1.length < len) {v1.push('0')}while (v2.length < len) {v2.push('0')} for (var i = 0; i < len; i++) {var num1 = parseInt(v1[i])var num2 = parseInt(v2[i]) if (num1 > num2) {return 1} else if (num1 < num2) {return -1}} return 0} compareVersion('1.11.0', '1.9.9')// 1

該基礎庫版本下直接使用對應的API或者組件的API

wx.canIUse(String)判斷小程序的API，回調，參數，組件等是否在當前版本可用。此接口從基礎庫 1.1.1 版本開始支持。

String參數說明： 使用{API}.{method}.{param}.{options}或者{component}.{attribute}.{option}方式來調用，例如：

{API} 代表 API 名字  {method} 代表調用方式，有效值為return, success, object, callback  {param} 代表參數或者返回值  {options} 代表參數的可選值  {component} 代表組件名字  {attribute} 代表組件屬性  {option} 代表組件屬性的可選值

例子：

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 標準庫兼容性問題

微信小程序的兼容性問題除了微信本身的 Bug 外，大部分是目標平臺對 JavaScript 標準庫支持程度不同造成的。像我最上面遇到的問題就是Javascript 標準庫兼容性問題。對于這類問題我們可以打補丁，從其他地方找到比較完善的js代碼，然后我們拷貝到我們的項目中。

關于“微信小程序兼容性問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。