在微信小程序開發(fā)中案站，經(jīng)常會遇到一些兼容性的問題娃承，我最近就遇到了一個(gè)問題狸相，就是在時(shí)間字符串轉(zhuǎn)化為時(shí)間戳的方法中闪朱，我用的Date.parse(new Date())這個(gè)方法月匣，但是在微信開發(fā)者工具中這個(gè)方法正常實(shí)現(xiàn)，但是在一些iphone設(shè)備和安卓的部分設(shè)備中不會實(shí)現(xiàn)相關(guān)功能奋姿，為了解決這個(gè)問題我只能導(dǎo)入了momentjs锄开，不在調(diào)用系統(tǒng)方法了。這里我們就來討論一下一些兼容性問題称诗。
運(yùn)行環(huán)境差異
微信小程序運(yùn)行在三端：iOS萍悴、Android 和 用于調(diào)試的開發(fā)者工具。
三端的腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的：
- 在 iOS 上寓免，小程序的 javascript 代碼是運(yùn)行在 JavaScriptCore 中癣诱，是由 WKWebView 來渲染的，環(huán)境有 iOS8以上
- 在 Android 上再榄，小程序的 javascript 代碼是通過 X5 JSCore來解析狡刘，是由 X5 基于 Mobile Chrome 53/57 內(nèi)核來渲染的
- 在 開發(fā)工具上享潜， 小程序的 javascript 代碼是運(yùn)行在 nwjs 中困鸥，是由 Chrome Webview 來渲染的
盡管三端的環(huán)境是十分相似的，但是還是有些許區(qū)別：
ES6語法支持不一致 語法上開發(fā)者可以通過開啟ES6轉(zhuǎn)ES5的功能來規(guī)避剑按。wxss渲染表現(xiàn)不一致 盡管可以通過開啟樣式補(bǔ)全來規(guī)避大部分的問題疾就，還是建議開發(fā)者需要在 iOS 和 Android 上分別檢查小程序的真實(shí)表現(xiàn)。
ES6 轉(zhuǎn) ES5
在 0.10.101000 以及之后版本的開發(fā)工具中艺蝴，會默認(rèn)使用 babel 將開發(fā)者 ES6 語法代碼轉(zhuǎn)換為三端都能很好支持的 ES5 的代碼猬腰，幫助開發(fā)者解決環(huán)境不同所帶來的開發(fā)問題。
樣式補(bǔ)全
開啟此選項(xiàng)猜敢，開發(fā)工具會自動檢測并補(bǔ)全缺失樣式姑荷，保證在低版本系統(tǒng)上的正常顯示。盡管可以規(guī)避大部分的問題 缩擂，還是建議開發(fā)者需要在 iOS 和 Android 上分別檢查小程序的真實(shí)表現(xiàn)鼠冕。
兼容
小程序的功能不斷的增加，但是舊版本的微信客戶端并不支持新功能胯盯，所以在使用這些新能力的時(shí)候需要做兼容懈费。
文檔會在組件，API等頁面描述中帶上各個(gè)功能所支持的版本號博脑。
可以通過 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);
},
})
| 參數(shù) | 說明 | 最低版本 |
|---|---|---|
| brand | 手機(jī)品牌 | 1.5.0 |
| model | 手機(jī)型號 | |
| pixelRatio | 設(shè)備像素比 | |
| screenWidth | 屏幕寬度 | 1.1.0 |
| screenHeight | 屏幕高度 | 1.1.0 |
| windowWidth | 可使用窗口寬度 | |
| windowHeight | 可使用窗口高度 | |
| statusBarHeight | 狀態(tài)欄的高度 | 1.9.0 |
| language | 微信設(shè)置的語言 | |
| version | 微信版本號 | |
| system | system | |
| platform | 客戶端平臺 | |
| SDKVersion | 客戶端基礎(chǔ)庫版本 | 1.1.0 |
| fontSizeSetting | 用戶字體大小設(shè)置票罐。以“我-設(shè)置-通用-字體大小”中的設(shè)置為準(zhǔn)，單位：px | 1.5.0 |
版本比較
微信客戶端和小程序基礎(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)庫兼容性問題罩润。對于這類問題我們可以打補(bǔ)丁，從其他地方找到比較完善的js代碼翼馆，然后我們拷貝到我們的項(xiàng)目中割以。
