商城系統(tǒng) 注冊

微信小程序兼容性問題該如何解決

2020-09-27|HiShop
導(dǎo)讀：在微信 小程序 開發(fā)中，經(jīng)常會遇到一些兼容性的問題，我最近就遇到了一個問題，就是在時間字符串轉(zhuǎn)化為時間戳的方法中，我用的Date.parse(new Date())這個方法，但是在微信開發(fā)者工具...

在微信小程序開發(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)信息

同步

 


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




	異步：



	 




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




	版本比較



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



	 




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




	該基礎(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} 代表組件屬性的可選值



	例子：



	 




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




	 



	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步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店

 
      
    

    
  





        
  



    
	
	


	




	

	

		電話咨詢

		預(yù)約演示
		0元開店