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

首先要聲明一下：

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

Dry goods 【干貨】

一. 值

1. setData

1.
setData：是邏輯層(.js)向視圖層(.wxml)進(jìn)行的數(shù)據(jù)渲染，是一個(gè)異步操作，所以可能需要用到延遲執(zhí)行方法來(lái)確保賦值成功后的操作：
setTimeout(function () {
   
  })
 }, duration) // duration: 毫秒(ms)
2. 
// 在該作用域里賦值能成功而page的data數(shù)據(jù)沒(méi)有更新。但似乎沒(méi)必要做這樣不去刷新頁(yè)面數(shù)據(jù)的操作，因?yàn)椴皇且晥D層需要的數(shù)據(jù)源沒(méi)必要寫在data中，而且這樣可能會(huì)污染該值。
 this.data.testData = testData 
// 這是真正需要的賦值操作，刷新值后渲染頁(yè)面。
 that.setData({
    testData: testData,
 })
3.
// 在閉包中用到this需首先將其引用，并且需要聲明在賦值的作用域外層，否則會(huì)報(bào)`Cannot read property 'data' of undefined`錯(cuò)誤。
  var that = this
  this.setData({
     testData: that.data.testData2,
  })
// 若setData操作仍在一個(gè)閉包內(nèi)，則同理寫成that.setData({})。
{ // 閉包
  that.setData({
     testData: that.data.testData2,
  })
}

2. 小程序碼傳參

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

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

（network.js）聲明的地方
// 獲取社團(tuán)詳情
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 : 用于組件中傳遞數(shù)據(jù) 注意：其設(shè)置變量名與取值變量名的格式要求。（文檔說(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ì)轉(zhuǎn)為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會(huì)轉(zhuǎn)為小寫
  }
})

二. 組件

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

1. scroll-view

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

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

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

2. canvas

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

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

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

3. button

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

4. textarea

textarea標(biāo)簽的默認(rèn)輸入最大輸入長(zhǎng)度為140?？稍O(shè)置其css屬性 maxlength

5. swiper

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

三. util

1. requrie不支持絕對(duì)路徑，須使用相對(duì)路徑導(dǎo)入

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

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

（app.json）：不僅有配置頁(yè)面信息的`window`屬性，還包括注冊(cè)頁(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. 設(shè)置page背景顏色

// 在page對(duì)應(yīng)的.wss文件中設(shè)置
page {
  background-color: "#f4f5f7";
}

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