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

首先要聲明一下：

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

Dry goods 【干貨】

一. 值

1. setData

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

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

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

2. 小程序碼傳參

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

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

（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 : 用于組件中傳遞數據 注意：其設置變量名與取值變量名的格式要求。（文檔說(shuō)明如下）

（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 // `-` 會(huì )轉為駝峰寫(xiě)法
    event.currentTarget.dataset.alphabeta === 2 // 大寫(xiě)會(huì )轉為小寫(xiě)
  }
})

二. 組件

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

1. scroll-view

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

• 安卓端bug：scroll-view嵌套在swiper-item中橫向滑動(dòng)不響應，此時(shí)可設置scroll-view的css屬性 overflow : auto; 但這又會(huì )引來(lái)一個(gè)美觀(guān)問(wèn)題，就是它的橫向滾動(dòng)條冒了出來(lái)，此時(shí)再設置

// 這會(huì )導致整個(gè)scroll-view內的滾動(dòng)條都被隱藏。
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

2. canvas

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

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

• 順便說(shuō)一下圖片裁剪方法clip會(huì )在未來(lái)的版本中添加。

3. button

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

4. textarea

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

5. swiper

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

三. util

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

這個(gè)bug確實(shí)很讓人抓狂。

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

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

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

3. 設置page背景顏色

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

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