小記最近幾個月和公司的同事一直在馬不停蹄的開發(fā)小程序，經(jīng)歷了幾個版本的迭代后也總算是穩(wěn)定了下來。而我們的小程序也是得到了騰訊的認(rèn)可，還拿了個獎獎杯上是不是應(yīng)該刻上開發(fā)者的名字

開發(fā)小程序的過程中踩的坑不可謂不多，而有些坑也實在是讓人郁悶，不扒一扒難以平我心頭之憤吶。

數(shù)據(jù)綁定 Mustache 語法（雙大括號）

這個 {{}} 里面不能執(zhí)行任何的方法，只能做簡單的四則運算和Boolen判斷，比如：

<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  {{parseInt(i)}}
</view>

你這么干是不行的，你只能在拿到數(shù)據(jù)的時候就先對數(shù)據(jù)格式化一遍。是不是很惡心～～～  
但是你如果非要在渲染的時候再格式化的話也行，你就只能通過WXS來處理了，比如：

<wxs module="m1">
    var parse = function(str) {
        return parseInt(str);
    };
    module.exports.parse = parse;
</wxs>

<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  {{m1.parse(i)}}
</view>

wx.navigateBack() 無法向回退的頁面?zhèn)鲄?/h4>

小程序的幾個導(dǎo)航api,都可以通過 url 給對應(yīng)的頁面?zhèn)鲄?。?w x.navigateBack({delta}), 只接受一個delta（返回的頁面數(shù)）參數(shù)。但是有時候確確實實有向回退頁面?zhèn)鲄?shù)的情況，這時候就只能通過localstorage或是redux等來處理了。

rpx 單位適配問題

小程序提供的 rpx 單位確實讓我們開發(fā)的時候在高精度還原設(shè)計稿上省了很多事情。但是小記發(fā)現(xiàn)當(dāng)你使用1rpx在一些機型上特別容易出問題。

.border {
    border: 1rpx solid #000;
}

如果你這樣設(shè)置邊框的時候，大多數(shù)情況下它都能正常顯示，但是在一些機器上尤其是 iPhone X 邊框有時候根本不顯示。所以我現(xiàn)在都改成 2rpx 

綁定事件獲取的target與currentTarget是有區(qū)別的

在綁定事件獲取當(dāng)前組件數(shù)據(jù)的時候，拿到的envt里面有target和currentTarget 這兩個玩意兒里面都有一個dataset，而我們需要獲取的數(shù)據(jù)就在dataset對象里面。正確的我們應(yīng)該取 currentTarget 里面的就行，但是有時候這兩個的數(shù)據(jù)是完全一樣的，一不小心你就取錯了。
那這個 target 和 currentTarget 有什么區(qū)別呢，官方的解釋：
target：觸發(fā)事件的源組件;
currentTarget： 事件綁定的當(dāng)前組件;
看個例子:

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

其實很容易區(qū)分，target就是事件開始的地方，currentTarget就是你綁定事件的地方?？梢匀タ纯?img title=":point_right:" alt=":point_right:" class="lazyload inited loaded" data-src="https://user-gold-cdn.xitu.io/2018/1/30/16145bec9d074f07?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="64" data-height="64" src="https://user-gold-cdn.xitu.io/2018/1/30/16145bec9d074f07?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" style="border-style: none; max-width: 100%; margin: 0px !important; visibility: visible; background-color: transparent; background-position: 50% center; background-repeat: no-repeat; background-image: none; cursor: zoom-in;">小程序事件

CSS引用靜態(tài)資源問題

iconfont, 圖片不能通過css，哦～應(yīng)該該叫 wxss 本地引入。
1、iconfont @font-face 引用的ttf等文件在小程序中不支持，可以使用線上或轉(zhuǎn)base64 參考 微信小程序wxss樣式文件中引用iconfont素材。
2、圖片可以使用base64或者線上鏈接?；蛘?lt;image>哦，對了圖片鏈接一定要帶 https 協(xié)議頭，形如：//cdn.xxx.com/jflkadsjf.png 是不行的

view 添加點擊效果

需要主動開啟

<view hover hover-class="view-hover">

page wxss樣式層級

下面是一個page 示例：

<!-- wxml -->
<view class="page-layout">
  <view class="page__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item green">1</view>
    <view class="flex-item red">2</view>
    <view class="flex-item blue">3</view>
  </view>
</view>

/* wxss */

.page-layout {
    color: #000;
}
/* 下面這種寫法 .red 是不生效的 */
.red {
    color: #f00;
}

/* 必須這么寫 */

.page-layout .red {
    color: #f00;
}

其他注意點

• 任何情況下的視圖更新只能通過setData()
• 路徑只能是五層，請盡量避免多層級的交互方式。
• 不要直接對 Page.data 進行修改，請使用 Page.setData
• 跳轉(zhuǎn)到tabbar頁面一定要用 wx.switchTab()
• 使用wx:for遍歷的時候最好加上wx:key=”{{index}}”