小程式開發遇到的坑，知道下總是好的！

因為之前一直做的是pc端的開發，而且大部分是用的vue或者react技術棧。並且所做的web網頁基本也都不需要相容低版本瀏覽器，所以在開發過程中對於相容的處理其實比較少的。然而當開始接觸微信小程式原生開發之後，也開始遇到並解決了一些坑，有些是相容性導致的，這裡就簡單記錄下自己遇到並解決的坑，希望對你也有所幫助，不用在此浪費時間！

text標籤不要換行，view中如果也只有文字也不要換行

這個問題真的是寫div寫的習慣了，特別喜歡把標籤換行就像這樣：

<div>
 中國
<div>
複製程式碼

然而當在小程式中也這樣寫的時候，問題就出現了。在小程式中渲染完成後會發現在文字的前後會加一行空格，所以就導致了文字前後的上下間距加大，所以導致頁面與設計不符合。因此小程式中不能換行！

bind繫結事件在低版本不能帶有冒號

這個是在input輸入框的時候，綁定了一個事件。但是當時是用的是bind:事件這樣的寫法，在高版本的微信使用是沒有問題的，但是當在低版本微信的時候，事件並沒有生效。然後查了下文件，文件說是在比較低的版本只支援不帶：的繫結寫法，所以為了相容性可以看最低需要支援的微信版本，適度使用不帶：的繫結事件。

setData非同步問題

文件有寫到setData方法是個非同步的方法，所以在需要依賴這個更改值的地方，需要寫到回撥函式裡，類似於react的setState方法。還有個需要注意的問題是，在需要更新ui的值才放到data中用setData進行更改，因為setData更改資料比較消耗效能，如果是js中需要使用的變數不涉及到更新ui介面，可以直接放到this下，更改值的時候直接這樣修改：

this.flag = '123'
複製程式碼

這樣的話一方面避免的效能問題，一方面也解決了更改資料的非同步問題。

禁止滑動穿透要定義一個catch事件touchmove事件

在封裝一個彈出層模態框的時候，當蒙層蓋在頁面上，滑動蒙層會穿透滑動頁面，要禁止這個穿透滑動只需要用catch定義一個touchmove的空事件方法就可以了。
wxml中不能使用一些js方法

在web開發的時候，比如react，通常如果資料需要簡單的處理下，可以直接在jsx中對資料進行處理。比如保留2位小數這樣的需求。但是如果在小程式中直接使用js的api進行資料處理是行不通的，所以要想對資料再次處理有兩個方法：

• 直接在js檔案中把資料先處理好
• 在wxs中定義一個處理函式，然後在wxml中進行呼叫

wx.scanCode在安卓和iOS下表現不一致

這個坑是真的難受，當在進入頁面判斷呼叫wx.scanCode之後，在成功的回撥進行賦值。結果發現安卓下賦值總是晚於onShow生命週期函式，但是在iOS上是成功的回撥函式先於onShow生命週期函式。最後經過反覆論證，得出的結論是

呼叫掃一掃api在安卓下，回撥函式是晚於onShow。而在iOS下回調函式會早於onShow

開發版和正式版本有本地快取記錄，體驗版沒有

在測試小程式的時候，難免會接觸到開發版、體驗版和正式版。這個坑就是這三個版本之間會有差異，所以不到正式版測試一下，其它的版本只能做一個參考。舉個例子：就是有個人資料永久儲存到本地，但是體驗版在每次進入的時候卻並沒有儲存。所以開發小程式每個版本都要試試，有差異要以正式版為主。

小程式之間跳轉的extraData下的引數安卓和iOS表現不同

在做小程式跳轉的時候需要攜帶一些引數，文件指出在extraData下有攜帶的資料，但是實踐得知，在安卓和iOS存在不同，安卓攜帶的資料是一直存在的，內部頁面的跳轉也攜帶有引數。而iOS只在跳轉的那個頁面存在資料，在之後的內部跳轉資料是消失不存在的

• app onShow中不可以獲取頁面棧
• 跳轉會觸發page的onload方法