乾貨 | 扒一扒小程序開發中遇到的那些坑！

2019 年 12 月 3 日
筆記

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

數據綁定 Mustache 語法-（雙大括號）

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

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

你這麼干是不行的，你只能在拿到數據的時候就先對數據格式化一遍。是不是很噁心～～～

但是你如果非要在渲染的時候再格式化的話也行，你就只能通過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() 無法向回退的頁面傳參

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

rpx 單位適配問題

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

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

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

綁定事件獲取的target與currentTarget是有區別的

在綁定事件獲取當前組件數據的時候，拿到的envt裏面有target和currentTarget 這兩個玩意兒裏面都有一個dataset，而我們需要獲取的數據就在dataset對象裏面。正確的我們應該取 currentTarget 裏面的就行，但是有時候這兩個的數據是完全一樣的，一不小心你就取錯了。

那這個 target 和 currentTarget 有什麼區別呢，官方的解釋：

target：觸發事件的源組件; currentTarget：事件綁定的當前組件;

看個例子:

<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。

其實很容易區分，target就是事件開始的地方，currentTarget就是你綁定事件的地方。

CSS引用靜態資源問題

iconfont, 圖片不能通過css，哦～應該該叫 wxss 本地引入。

1、iconfont @font-face 引用的ttf等文件在小程序中不支持，可以使用線上或轉base64 參考微信小程序wxss樣式文件中引用iconfont素材。

2、圖片可以使用base64或者線上鏈接。或者<image>哦，對了圖片鏈接一定要帶 https 協議頭，形如：//www.xxx.com/jflkadsjf.png 是不行的

view 添加點擊效果

需要主動開啟

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

page wxss樣式層級

下面是一個page 示例：

<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
跳轉到tabbar頁面一定要用 wx.switchTab()
使用wx:for遍歷的時候最好加上wx:key=」{{index}}」