在微信小程序開發中，經常會遇到一些兼容性的問題，比如，就是在時間字符串轉化為時間戳的方法中，我用的Date.parse(new Date())這個方法，但是在微信開發者工具中這個方法正常實現，但是在一些iphone設備和安卓的部分設備中不會實現相關功能，為了解決這個問題我只能導入了momentjs，不在調用系統方法了。這里我們就來討論一下一些兼容性問題。

運行環境差異

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

三端的腳本執行環境以及用于渲染非原生組件的環境是各不相同的：

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

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

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

ES6 轉 ES5

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

樣式補全

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

兼容

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

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

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

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

獲取系統信息

同步

1. let res = wx.getSystemInfoSync()
2. console.log("同步獲取系統信息：" + res);
3. console.log(res);

異步：

1. wx.getSystemInfo({
2. success: function(res) {
3. console.log("異步獲取系統信息:");
4. console.log(res);
5. },
6. })

版本比較

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

1. function compareVersion(v1, v2) {
2. v1 = v1.split('.')
3. v2 = v2.split('.')
4. var len = Math.max(v1.length, v2.length)
5.  
6. while (v1.length < len) {
7. v1.push('0')
8. }
9. while (v2.length < len) {
10. v2.push('0')
11. }
12.  
13. for (var i = 0; i < len; i++) {
14. var num1 = parseInt(v1[i])
15. var num2 = parseInt(v2[i])
16.  
17. if (num1 > num2) {
18. return 1
19. } else if (num1 < num2) {
20. return -1
21. }
22. }
23.  
24. return 0
25. }
26.  
27. compareVersion('1.11.0', '1.9.9')
28. // 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} 代表組件屬性的可選值

例子：

1. wx.canIUse('openBluetoothAdapter')
2. wx.canIUse('getSystemInfoSync.return.screenWidth')
3. wx.canIUse('getSystemInfo.success.screenWidth')
4. wx.canIUse('showToast.object.image')
5. wx.canIUse('onCompassChange.callback.direction')
6. wx.canIUse('request.object.method.GET')
7.  
8. wx.canIUse('live-player')
9. wx.canIUse('text.selectable')
10. wx.canIUse('button.open-type.contact')

Javascript 標準庫兼容性問題

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

以上就是微信小程序兼容性問題該如何解決的文章，如果希望了解更多小程序開發的文章，請關注網站，謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店