目前專案正在開發中，總結地比較少，也不全，後續會更新。

踩坑點

• scroll-view標籤設定橫向滾動時，需要以下設定
  
  1. 設定滾動項display：inline-block;
  2. 設定滾動檢視容器white-space: nowrap;
  3. 滾動項不要用float
• 背景圖可以用base64格式，或者網路圖片，不能用本地圖片；本地圖片只能用image標籤，也就是說本地圖片不能用作雪碧圖
• image標籤有預設的寬高，所以image都需要重新設定寬高
• 模板中變數一定要用{{ }}包起來，比如

<view wx:if="{{true}}">
    <view wx:for
 
="{{itemList}}" wx:key='itemId'> </view>
</view>

然而，我經常忘記，經常踩坑！！！

• 模板中{{ }}不能執行js中定義的方法，只能執行wxs中定義的方法。比如Angular中的Pipe可以通過wxs實現：

// pipe.wxs
function getOrderStatus(status) {
  var statusMap = {
    WAIT_PAID: '待付款',
    WAIT_SHIPPED: '待發貨',
    WAIT_RECEIVED: '待收貨',
    RECEIVED: '已收貨'
 
,
    CANCELED: '已取消',
    REFUNDED: '已退款'
  }
  return statusMap[status] ? statusMap[status] : '未知狀態';
}

module.exports = {
  getOrderStatus: getOrderStatus
}

// order-list.wxml
<wxs module="orderModule">
  module.exports = require('../../../utils/filter.wxs') 
</wxs>

<view> {{orderModule.getOrderStatus(order.status)}} </view> 
 

• 繫結事件直接寫函式名，引數的傳法是data-開頭傳資料，引數大寫的會直接轉為小寫，分隔符會直接轉為駝峰，取值用event.currentTarget.dataset.**來取，是不是很奇怪？

// mine.wxml
 <view data-orderType="0" bindtap="navToOrder"> 
  <text> 全部訂單 </text>
</view> 
<view data-order-type="1" bindtap="navToOrder2"> 
  <text> 全部訂單 </text>
</view> 

//mine.js
Page({ 
  data: { 
    ...
  },    
  navToOrder(event){ 
    wx.navigateTo({
      url: '../order/order-list/order-list?type=' + event.currentTarget.dataset.ordertype,
    })
  },
  navToOrder2(event){ 
    wx.navigateTo({
      url: '../order/order-list/order-list?type=' + event.currentTarget.dataset.orderType,
    })
  }, 
})

• 頁面切換，如果是作為tab的頁面要用switchTab，不能用navigateTo。如果點選沒反應，用fail函式去捕捉錯誤資訊。
• 開發者工具假死了，重啟再試！！！

注意點

• 使用 page標籤選擇器，可以修改頂層節點的樣式
• 模板template只能使用data傳入的資料
• catch開頭的事件能阻止冒泡，比如catchtap
• for迴圈預設欄位為index和item，最好加上wx:key屬性，防止重新渲染，提高效能
• 生命週期事件觸發的順序是onLoad載入， onShow顯示，onReady渲染完成，onHide和 onUnload不會同時觸發，根據不同情況只觸發一個
• 更新資料只能用setData（不然檢視不能及時更新），setData時的key可以寫成a.b.c.d的形式；雖然如此，有時候想要動態地改變某個值還是很不方便的，可以先賦完值，再用setData來通知更新試圖
• url引數獲取：用onLoad中的options
• 事件event的target和currentTarget什麼區別？
  
  • target是觸發元件，currentTarget是當前元件。因為事件有捕獲冒泡階段，觸發元件未定一直都是當前元件
• 註冊小程式App()中有onError事件，可以跟後端約定介面將錯誤傳給後端，以更好地排錯
• 目前小程式不提供跳轉到網址的功能大家都知道的咯（它能，但不提供）
• 用wx.getUserInfo請求使用者資訊，使用者拒絕之後短時間不會再請求怎麼辦？
  
  • button元件有個open-type屬效能讓使用者主動去調起授權介面
  • 呼叫wx.openSetting()介面會檢視之前發起的授權設定資訊，通過引導使用者修改這裡的授權設定，可以在不刪除小程式的情況下重新拉起某些許可權的獲取

//按鈕再次請求授權 getUserInfo為回撥函式
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 再次授權 </button>

// js請求
wx.getUserInfo({ 
    success: res => { 
        // 獲取使用者資訊成功後的操作
    },
    fail: () => {
        // 使用者拒絕授權後，再次授權 
        wx.openSetting({
          success: res=>{ 
            wx.getUserInfo({
              success: res => {
                // 獲取使用者資訊成功後的操作
              }
            })
          }
        }) 
    }
}

延伸閱讀：