小記最近幾個月和公司的同事一直在馬不停蹄的開發小程式，經歷了幾個版本的迭代後也總算是穩定了下來。而我們的小程式也是得到了騰訊的認可，還拿了個獎

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

資料繫結 Mustache 語法（雙大括號）

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

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

你這麼幹是不行的，你只能在拿到資料的時候就先對資料格式化一遍。是不是很噁心～～～  
但是你如果非要在渲染的時候再格式化的話也行，你就只能通過WXS來處理了，比如：

1. <wxs module="m1">
2. var parse = function(str) {
3. return parseInt(str);
4. };
5. module.exports.parse = parse;
6. </wxs>
7.  
8. <view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
9. {{m1.parse(i)}}
10. </view>

wx.navigateBack() 無法向回退的頁面傳參

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

rpx 單位適配問題

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

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

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

繫結事件獲取的target與currentTarget是有區別的

在繫結事件獲取當前元件資料的時候，拿到的envt裡面有target和currentTarget 這兩個玩意兒裡面都有一個dataset，而我們需要獲取的資料就在dataset物件裡面。正確的我們應該取 currentTarget 裡面的就行，但是有時候這兩個的資料是完全一樣的，一不小心你就取錯了。
那這個 target 和 currentTarget 有什麼區別呢，官方的解釋：
target：觸發事件的源元件;
currentTarget： 事件繫結的當前元件;
看個例子:

1. <view id="outer" bindtap="handleTap1">
2. outer view
3. <view id="middle" catchtap="handleTap2">
4. middle view
5. <view id="inner" bindtap="handleTap3">
6. inner view
7. </view>
8. </view>
9. </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 協議頭，形如：//cdn.xxx.com/jflkadsjf.png 是不行的

view 新增點選效果

需要主動開啟

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

page wxss樣式層級

下面是一個page 示例：

1. <!-- wxml -->
2. <view class="page-layout">
3. <view class="page__title">flex-direction: row</view>
4. <view class="flex-wrp" style="flex-direction:row;">
5. <view class="flex-item green">1</view>
6. <view class="flex-item red">2</view>
7. <view class="flex-item blue">3</view>
8. </view>
9. </view>

1. /* wxss */
2.  
3. .page-layout {
4. color: #000;
5. }
6. /* 下面這種寫法 .red 是不生效的 */
7. .red {
8. color: #f00;
9. }
10.  
11. /* 必須這麼寫 */
12.  
13. .page-layout .red {
14. color: #f00;
15. }

WXS iOS 8.0

wxs 中如果使用了較新的 ES6 語法會導致小程式在iOS8機器上無法執行。小程式開發工具估計是沒對wxs裡面的ES6進行編譯

1. // wxs
2. var getDesc = function(str) {
3. var strAry = str.split('·');
4. var desc1 = strAry[1] ? strAry[1] : '';
5. var desc2 = strAry[0];
6.  
7. //return {desc1, desc2} // 這裡這種寫法在iOS8上是沒法正常執行的
8. return { // 必需採用ES5 的寫法
9. desc1: desc1,
10. desc2: desc2
11. }
12. }
13.  
14. module.exports.getDesc = getDesc;

image 使用延遲載入問題

筆者之前在使用 <image/>的時候啟用了延遲載入，也就是

1. <image mode="widthFix" src="{{imgurl}}" lazy-load></image>

這個絕大部分情況下是沒問題的，但是有一天運營突然來找我說，他們配的活動頁面上的部分圖片在部分機型（比如：筆者的Iphone 7）上載入不出來。直覺告訴我估計是 “lazy-load” 問題，幹掉後固然都正常了。後面特意對比了一下，發現無法load出來的圖片都比較大，基本上是1500的寬度。
不知道是不是個例，丟擲來給大家看看。

wx.getUserInfo() 調整

獲取使用者資訊介面如果之前使用者未授權過，呼叫該介面將直接報錯，不再出現授權彈窗。只能通過button元件拉起授權。具體看文件

1. <button open-type="getUserInfo"></button>

web-view

微信小程式自 基礎庫 1.6.4開始支援了web-view元件，也就是可以在小程式裡面內嵌網頁，但是個人型別與海外型別的小程式暫不支援使用。

小程式無法和網頁通訊，如果需要攜帶引數，只能通過web-view url 中攜帶引數，網頁可以通過 wx.miniProgram.postMessage 向小程式傳資料但是基礎庫版本要在1.7.1以上且小程式只能在特定時機（小程式後退、元件銷燬、分享）接收到資訊。

小程式內建網頁環境判斷

小程式內建網頁可通過 window.__wxjs_environment 變數判斷是否在小程式環境。一般情況下web需要適配在判斷是否在微信瀏覽器中開啟，普通瀏覽器中開啟，小程式中開啟，然後會有以下程式碼：

1. // 判斷是否在微信瀏覽器中
2. function isWeixinBrowser() {
3. return /micromessenger/i.test(navigator.userAgent.toLowerCase());
4. }
5.  
6.  
7. if ( isWeixinBrowser() ) {
8. // to do something
9. } else if ( window.__wxjs_environment ) {
10. // to do something
11. } else {
12. // to do something
13. }

如果這麼寫那麼小程式的那個分支永遠也進不去，為什麼？自己想

1. // 判斷是否在微信瀏覽器中
2. function isWeixinBrowser() {
3. return /micromessenger/i.test(navigator.userAgent.toLowerCase());
4. }
5.  
6.  
7. if ( window.__wxjs_environment ) {
8. // to do something
9. } else if ( isWeixinBrowser() ) {
10. // to do something
11. } else {
12. // to do something
13. }

這麼寫就好了

其他注意點

• 任何情況下的檢視更新只能通過setData()
• 路徑只能是十層。
• 不要直接對 Page.data 進行修改，請使用 Page.setData
• 跳轉到tabbar頁面一定要用 wx.switchTab()
• 使用wx:for遍歷的時候最好加上wx:key=”{{index}}”
• 小程式目前還沒有IphoneX 的適配方案，只能通過自己判斷系統新增相應適配

寫於 2018年1月26日 Web  4609

如非特別註明，文章皆為原創。

轉載請註明出處： https://www.liayal.com/article/5a6b07137de5e93eee4137ca