微信小程式中開發常見問題

在微信小程式的開發過程中，會遇到各式各樣的問題，本文主要是針對自己開發中遇到的問題，找到解決方案後的記錄總結。

1.控制元件中同時使用wx:if和wx:for導致無效的問題

這個問題是一個朋友問到的，場景是一個列表資料，通過伺服器的一個引數控制條目中圖片的顯示隱藏，比如當前的資料是有圖片的，則該條目的isShow為true，反之，則isShow為false。佈局的方式是大的列表資料巢狀小的圖片列表資料，在實現的時候通過wx:if來控制圖片列表的顯示隱藏，通過wx:for來控制圖片列表資料的顯示，邏輯結構很簡單，但是在圖片列表控制元件上同時新增wx:if和wx:for時，發現wx:if不起作用。圖片列表程式碼如下：

<block class="imglist" wx:if="{{item.isShow}}" wx:for="{{item.piclists}}">
   <image class='image-view' src="{{item.pic}}"></image>
</block>

看到這個問題，也很奇怪，邏輯上沒有什麼問題，然後開始動手做測試，測試過程中發現：如果對同一個控制元件同時新增wx:if和wx:for，是不能正常起作用的。修改程式碼，在圖片列表控制元件外新增一個view佈局，來單獨控制其顯示隱藏。修改後程式碼如下：

<view wx:if="{{item.isShow}}">
    <block class="imglist" wx:for="{{item.piclists}}">
       <image class='image-view' src="{{item.pic}}"></image>
    </block>
</view>

2.我們使用app.json檔案來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 的時候在pages中寫註釋的時候回報錯。

例如：

{

  "pages":[

      //這是首頁面

    "pages/welcome/welcome"

  ]}

此時就會報錯

3.微信小程式使用POST方法請求的問題

這個坑也是不小的坑，微信小程式發起wx.request()方法請求，用get方法請求都沒什麼問題，但是用post方法請求時，就容易出現這樣或那樣的問題，原因是wx.request()使用post方法請求時，還需要加上header，header[content-type]值為application/x-www-form-urlencoded，否則請求返回失敗。