因為之前一直做的是pc端的開發，而且大部分是用的vue或者react技術(shù)棧。并且所做的web網頁基本也都不需要兼容低版本浏覽器(qì)，所以在開發過程中(zhōng)對于兼容的處理其實比較少(shǎo)的。然而當開始接觸微信小程序原生開發之後，也開始遇到并解決了一些坑，有些是兼容性導緻的，這裡就簡單記錄下(xià)自己遇到并解決的坑，希望對你(nǐ)也有所幫助，不用在此浪費時間！

text标簽不要換行，view中(zhōng)如(rú)果也隻有文(wén)本也不要換行

這個(gè)問(wèn)題真的是寫div寫的習慣了，特别喜歡把标簽換行就像這樣：

<div>
 中(zhōng)國
<div>
複制代碼

然而當在小程序中(zhōng)也這樣寫的時候，問(wèn)題就出現了。在小程序中(zhōng)渲染完成後會發現在文(wén)字的前後會加一行空格，所以就導緻了文(wén)字前後的上下(xià)間距加大，所以導緻頁面與設計不符合。因此小程序中(zhōng)不能換行！

bind綁定事件在低版本不能帶有冒号

這個(gè)是在input輸入框的時候，綁定了一個(gè)事件。但是當時是用的是bind:事件這樣的寫法，在高版本的微信使用是沒有問(wèn)題的，但是當在低版本微信的時候，事件并沒有生效。然後查了下(xià)文(wén)檔，文(wén)檔說是在比較低的版本隻支持不帶：的綁定寫法，所以為了兼容性可(kě)以看最低需要支持的微信版本，适度使用不帶：的綁定事件。

setData異步問(wèn)題

文(wén)檔有寫到setData方法是個(gè)異步的方法，所以在需要依賴這個(gè)更改值的地方，需要寫到回調函數裡，類似于react的setState方法。還有個(gè)需要注意的問(wèn)題是，在需要更新ui的值才放到data中(zhōng)用setData進行更改，因為setData更改數據比較消耗性能，如(rú)果是js中(zhōng)需要使用的變量不涉及到更新ui界面，可(kě)以直接放到this下(xià)，更改值的時候直接這樣修改：

this.flag = '123'
複制代碼

這樣的話一方面避免的性能問(wèn)題，一方面也解決了更改數據的異步問(wèn)題。

禁止滑動(dòng)穿透要定義一個(gè)catch事件touchmove事件

在封裝一個(gè)彈出層模态框的時候，當蒙層蓋在頁面上，滑動(dòng)蒙層會穿透滑動(dòng)頁面，要禁止這個(gè)穿透滑動(dòng)隻需要用catch定義一個(gè)touchmove的空事件方法就可(kě)以了。

wxml中(zhōng)不能使用一些js方法

在web開發的時候，比如(rú)react，通(tōng)常如(rú)果數據需要簡單的處理下(xià)，可(kě)以直接在jsx中(zhōng)對數據進行處理。比如(rú)保留2位小數這樣的需求。但是如(rú)果在小程序中(zhōng)直接使用js的api進行數據處理是行不通(tōng)的，所以要想對數據再次處理有兩個(gè)方法：

1. 直接在js文(wén)件中(zhōng)把數據先處理好
2. 在wxs中(zhōng)定義一個(gè)處理函數，然後在wxml中(zhōng)進行調用

wx.scanCode在安卓和(hé)iOS下(xià)表現不一緻

這個(gè)坑是真的難受，當在進入頁面判斷調用wx.scanCode之後，在成功的回調進行賦值。結果發現安卓下(xià)賦值總是晚于onShow生命周期函數，但是在iOS上是成功的回調函數先于onShow生命周期函數。最後經過反複論證，得出的結論是

調用掃一掃api在安卓下(xià)，回調函數是晚于onShow。而在iOS下(xià)回調函數會早于onShow

開發版和(hé)正式版本有本地緩存記錄，體驗版沒有

在測試小程序的時候，難免會接觸到開發版、體驗版和(hé)正式版。這個(gè)坑就是這三個(gè)版本之間會有差異，所以不到正式版測試一下(xià)，其它的版本隻能做一個(gè)參考。舉個(gè)例子(zǐ)：就是有個(gè)人數據永久存儲到本地，但是體驗版在每次進入的時候卻并沒有保存。所以開發小程序每個(gè)版本都要試試，有差異要以正式版為主

小程序之間跳轉的extraData下(xià)的參數安卓和(hé)iOS表現不同

在做小程序跳轉的時候需要攜帶一些參數，文(wén)檔指出在extraData下(xià)有攜帶的數據，但是實踐得知，在安卓和(hé)iOS存在不同，安卓攜帶的數據是一直存在的，内部頁面的跳轉也攜帶有參數。而iOS隻在跳轉的那個(gè)頁面存在數據，在之後的内部跳轉數據是消失不存在的