前言

作為一名勤懇單純的未來iOS開發(fā)者，受迫于對新事物的好奇，便義無反顧地舉手加入了團隊里一個小程序項目的開發(fā)中。

首先要聲明一下：

• 本人對前端了解微淺，微信小程序開發(fā)也無深入了解，這里僅作為一篇小程序的項目經驗總結文來跟大家分享。
• 微信小程序處于發(fā)展中，內嵌的方法仍在不斷改善與補充，相信一些坑也會在未來的版本中被填平。 本文基于的基礎庫版本為1.5.3，內容如有疏漏，歡迎指教。

Dry goods 【干貨】

一. 值

1. setData

1.
setData：是邏輯層(.js)向視圖層(.wxml)進行的數據渲染，是一個異步操作，所以可能需要用到延遲執(zhí)行方法來確保賦值成功后的操作：
setTimeout(function () {
   
  })
 }, duration) // duration: 毫秒(ms)

2. 
// 在該作用域里賦值能成功而page的data數據沒有更新。但似乎沒必要做這樣不去刷新頁面數據的操作，因為不是視圖層需要的數據源沒必要寫在data中，而且這樣可能會污染該值。
 this.data.testData = https://www.wxapp-union.com/testData 
// 這是真正需要的賦值操作，刷新值后渲染頁面。
 that.setData({
    testData: testData,
 })

3.
// 在閉包中用到this需首先將其引用，并且需要聲明在賦值的作用域外層，否則會報`Cannot read property 'data' of undefined`錯誤。
  var that = this
  this.setData({
     testData: that.data.testData2,
  })
// 若setData操作仍在一個閉包內，則同理寫成that.setData({})。
{ // 閉包
  that.setData({
     testData: that.data.testData2,
  })
}

2. 小程序碼傳參

向后端生成小程序碼的請求中傳入頁面路徑path與約定參數(test)，即可同navigator跳轉方法獲得類似。 onLoad: function (options) { var t = options.test }

3. 函數不支持帶默認參數，有參數的函數，必須傳參，而且必須每一個都傳，如果是回調閉包也必須提供空操作。舉個...

（network.js）聲明的地方
// 獲取社團詳情
function getCommunityDetail(communityId, success, fail) {
  this.get(url.base + url.communityDetail + communityId,
    function (res) {
      success(res)
    },
    function (res) {
      fail(res)
    })
}

 (communityInfo.js) 用到的地方
network.getCommunityDetail(options.communityId,
      function(success) {
      // Does something...
      },
      function(fail) {
     // 盡管這里可能不需要做失敗處理，但仍需提供這樣的空操作
      })

4. dataset

dataset: 用于組件中傳遞數據 注意：其設置變量名與取值變量名的格式要求。（文檔說明如下）

   （xxx.wxml）
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
    (xxx.js)
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // `-` 會轉為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫
  }
})

二. 組件

wx tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件。 so，注定她們是不安定的。但在這里就不一一展開了。

1. scroll-view

• 上述組件嵌套在 scroll-view 中設置css屬性 z-index 在真機上不起作用。

• 安卓端bug：scroll-view嵌套在swiper-item中橫向滑動不響應，此時可設置scroll-view的css屬性 overflow : auto; 但這又會引來一個美觀問題，就是它的橫向滾動條冒了出來，此時再設置

// 這會導致整個scroll-view內的滾動條都被隱藏。
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

2. canvas

• 由于canvas的不可 `隱藏性` ，所以想直接生成圖片有些阻礙，但也不是不可以，這里提供一種思路。 （需求場景：點擊按鈕生成一張由下載圖片和文字畫的canvas，并將其合成為圖片，隨即預覽該圖片） 思路：在屏幕所見范圍外放置canvas，生成并保存圖片后將canvas銷毀(wx:if：用此方法銷毀)。然而這里有幾個讓你不得不改變這樣的需求的坑： 1：由于繪圖方法drawImage未提供回調函數，所以你無法得知何時繪圖完成(該回調將在未來版本中添加），對于需要區(qū)分圖片層級的繪圖操作尤為不好。（若圖片B在圖片A上，則需要先把圖片A繪圖成功） 2：由于性能問題(最好在安卓真機上測試)，盡管把延遲調的很久讓繪圖操作執(zhí)行，但時長會發(fā)生繪圖失敗生成一張空白圖片可能，造成用戶體驗不好。 3：特別是多圖合成情況，以上問題尤為突出。 需求改動：將點擊直接生成合成圖片改為跳轉到另一個page去展示并且生成。 當然你會想問，讓后臺直接返回合成的圖片不就ok啦？確實是這樣的，這會在后面的版本中改過來。

• drawImage需是項目資源圖片或者是圖片下載完畢后保存的文件路徑，這里要注意的是下載的圖片url必須是安全校驗的路徑，而image標簽使用的https必須經過微信簽名驗證，自簽名不行，如本次項目使用的七牛云就出現了這樣的bug：圖片加載會變得非常慢甚至無法加載，但是預覽圖片還是會顯示出來。

• 順便說一下圖片裁剪方法clip會在未來的版本中添加。

3. button

• 按鈕無法直接設置背景圖 解決思路：把 button 嵌套在 image 中，并把 button 的 opacity 設為0，但這里要特別注意：要將button的css屬性 position 設為absolute，設定其絕對位置，否則無法響應點擊。

4. textarea

textarea標簽的默認輸入最大輸入長度為140?？稍O置其css屬性 maxlength

5. swiper

1. 設置高度時須將每個item的高度都賦值一遍，防止造成內容顯示高度不一致（模擬器上顯示正常，真機上內容顯示有偏差）。
2. 解決 swiper-item 因內容高度不一致而導致部分item無內容顯示的可選方案：切換item時重載數據。

三. util

1. requrie不支持絕對路徑，須使用相對路徑導入

這個bug確實很讓人抓狂。

2. 若需要配置指定page的頁面信息，在.json文件中直接配置對應屬性即可，而不要寫成app.json中配置所有頁面信息的格式（如下）

（app.json）：不僅有配置頁面信息的`window`屬性，還包括注冊頁面的`pages`等屬性。
{
"pages": [
    // register pages
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "CommunityUnion",
    "navigationBarTextStyle": "black"
  }
}

（頁面.json）
{
   "backgroundTextStyle": "light",
   "navigationBarBackgroundColor": "#fff",
   "navigationBarTitleText": "頁面", 
   "navigationBarTextStyle": "green"
}

3. 設置page背景顏色

// 在page對應的.wss文件中設置
page {
  background-color: "#f4f5f7";
}

在對應page的.json中設置 background-color 屬性不是修改頁面的背景顏色，而是修改頁面的窗口顏色，即頁面下拉時出現的窗口顏色。

后話

開發(fā)小程序過程中給人的感覺是開發(fā)起來沒有太多的自由，留給開發(fā)者的空間不夠大，可喜的是微信小程序一直在進步與完善，在社區(qū)中您會非常欣（nan）喜（shou）地發(fā)現，收到的微信官方答復大多數都是：xx功能考慮在未來的版本中加入...