微信小程序兼容性問題該如何解決
在微信小程序開發(fā)中,經(jīng)常會遇到一些兼容性的問題,比如,就是在時間字符串轉(zhuǎn)化為時間戳的方法中,我用的Date.parse(new Date())這個方法,但是在微信開發(fā)者工具中這個方法正常實現(xiàn),但是在一些iphone設(shè)備和安卓的部分設(shè)備中不會實現(xiàn)相關(guān)功能,為了解決這個問題我只能導(dǎo)入了momentjs,不在調(diào)用系統(tǒng)方法了。這里我們就來討論一下一些兼容性問題。
運行環(huán)境差異
微信小程序運行在三端:iOS、Android 和 用于調(diào)試的開發(fā)者工具。
三端的腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的:
在 iOS 上,小程序的 javascript 代碼是運行在 JavaScriptCore 中,是由 WKWebView 來渲染的,環(huán)境有 iOS8以上
在 Android 上,小程序的 javascript 代碼是通過 X5 JSCore來解析,是由 X5 基于 Mobile Chrome 53/57 內(nèi)核來渲染的
在 開發(fā)工具上, 小程序的 javascript 代碼是運行在 nwjs 中,是由 Chrome Webview 來渲染的
}, 盡管三端的環(huán)境是十分相似的,但是還是有些許區(qū)別:
ES6 語法支持不一致 語法上開發(fā)者可以通過開啟 ES6 轉(zhuǎn) ES5 的功能來規(guī)避。
wxss 渲染表現(xiàn)不一致 盡管可以通過開啟樣式補全來規(guī)避大部分的問題,還是建議開發(fā)者需要在 iOS 和 Android 上分別檢查小程序的真實表現(xiàn)。
ES6 轉(zhuǎn) ES5
在 0.10.101000 以及之后版本的開發(fā)工具中,會默認使用 babel 將開發(fā)者 ES6 語法代碼轉(zhuǎn)換為三端都能很好支持的 ES5 的代碼,幫助開發(fā)者解決環(huán)境不同所帶來的開發(fā)問題。
樣式補全
開啟此選項,開發(fā)工具會自動檢測并補全缺失樣式,保證在低版本系統(tǒng)上的正常顯示。盡管可以規(guī)避大部分的問題 ,還是建議開發(fā)者需要在 iOS 和 Android 上分別檢查小程序的真實表現(xiàn)。
兼容
小程序的功能不斷的增加,但是舊版本的微信客戶端并不支持新功能,所以在使用這些新能力的時候需要做兼容。
文檔會在組件,API等頁面描述中帶上各個功能所支持的版本號。
可以通過 wx.getSystemInfo 或者 wx.getSystemInfoSync 獲取到小程序的基礎(chǔ)庫版本號。
可以通過 wx.canIUse 來判斷是否可以在該基礎(chǔ)庫版本下直接使用對應(yīng)的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);
- },
- })
版本比較
微信客戶端和小程序基礎(chǔ)庫的版本號風(fēng)格為 Major.Minor.Patch(主版本號.次版本號.修訂號)。 開發(fā)者可以根據(jù)版本號去做兼容
- 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
該基礎(chǔ)庫版本下直接使用對應(yīng)的API或者組件的API
wx.canIUse(String)判斷小程序的API,回調(diào),參數(shù),組件等是否在當(dāng)前版本可用。此接口從基礎(chǔ)庫 1.1.1 版本開始支持。
String參數(shù)說明: 使用{API}.{method}.{param}.{options}或者{component}.{attribute}.{option}方式來調(diào)用,例如:
{API} 代表 API 名字 {method} 代表調(diào)用方式,有效值為return, success, object, callback {param} 代表參數(shù)或者返回值 {options} 代表參數(shù)的可選值 {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 標(biāo)準(zhǔn)庫兼容性問題
微信小程序的兼容性問題除了微信本身的 Bug 外,大部分是目標(biāo)平臺對 JavaScript 標(biāo)準(zhǔn)庫支持程度不同造成的。像我最上面遇到的問題就是Javascript 標(biāo)準(zhǔn)庫兼容性問題。對于這類問題我們可以打補丁,從其他地方找到比較完善的js代碼,然后我們拷貝到我們的項目中。
以上就是微信小程序兼容性問題該如何解決的文章,如果希望了解更多小程序開發(fā)的文章,請關(guān)注網(wǎng)站,謝謝。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序請查看:小程序商店