前言

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

首先要聲明一下：

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

一. 值

1. setData

1. 
setData：是邏輯層(.js)向視圖層(.wxml)進(jìn)行的數(shù)據(jù)渲染，是一個(gè)異步操作，所以可能需要用到延遲執(zhí)行方法來確保賦值成功后的操作：

1. setTimeout(function () {
2.  
3. })
4. }, duration) // duration: 毫秒(ms)

1. // 在該作用域里賦值能成功而page的data數(shù)據(jù)沒有更新。但似乎沒必要做這樣不去刷新頁面數(shù)據(jù)的操作，因?yàn)椴皇且晥D層需要的數(shù)據(jù)源沒必要寫在data中，而且這樣可能會(huì)污染該值。

1. this.data.testData = testData
2. // 這是真正需要的賦值操作，刷新值后渲染頁面。
3. that.setData({
4. testData: testData,
5. })

3.

1. // 在閉包中用到this需首先將其引用，并且需要聲明在賦值的作用域外層，否則會(huì)報(bào)`Cannot read property 'data' of undefined`錯(cuò)誤。
2. var that = this
3. this.setData({
4. testData: that.data.testData2,
5. })
6. // 若setData操作仍在一個(gè)閉包內(nèi)，則同理寫成that.setData({})。
7. { // 閉包
8. that.setData({
9. testData: that.data.testData2,
10. })
11. }

2. 小程序碼傳參

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

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

1. （network.js）聲明的地方
2. // 獲取社團(tuán)詳情
3. function getCommunityDetail(communityId, success, fail) {
4. this.get(url.base + url.communityDetail + communityId,
5. function (res) {
6. success(res)
7. },
8. function (res) {
9. fail(res)
10. })
11. }
12.  
13. (communityInfo.js) 用到的地方
14. network.getCommunityDetail(options.communityId,
15. function(success) {
16. // Does something...
17. },
18. function(fail) {
19. // 盡管這里可能不需要做失敗處理，但仍需提供這樣的空操作
20. })

4. dataset

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

1. （xxx.wxml）
2. <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
3. (xxx.js)
4. Page({
5. bindViewTap:function(event){
6. event.currentTarget.dataset.alphaBeta === 1 // `-` 會(huì)轉(zhuǎn)為駝峰寫法
7. event.currentTarget.dataset.alphabeta === 2 // 大寫會(huì)轉(zhuǎn)為小寫
8. }
9. })

二. 組件

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

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ì)引來一個(gè)美觀問題，就是它的橫向滾動(dòng)條冒了出來，此時(shí)再設(shè)置

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

2. canvas

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

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

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

3. button

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

4. textarea

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

三. util

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

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

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

1. （app.json）：不僅有配置頁面信息的`window`屬性，還包括注冊頁面的`pages`等屬性。
2. {
3. "pages": [
4. // register pages
5. ],
6. "window": {
7. "backgroundTextStyle": "light",
8. "navigationBarBackgroundColor": "#fff",
9. "navigationBarTitleText": "CommunityUnion",
10. "navigationBarTextStyle": "black"
11. }
12. }
13. （頁面.json）
14. {
15. "backgroundTextStyle": "light",
16. "navigationBarBackgroundColor": "#fff",
17. "navigationBarTitleText": "頁面",
18. "navigationBarTextStyle": "green"
19. }

后話

微信小程序從內(nèi)測至今已有一年多時(shí)間，而我只是在暑假期間（大二）粗略地看了一下開發(fā)文檔（這里不得不吐槽一下文檔網(wǎng)頁與其搜索功能），小程序開發(fā)過程中給我的感覺是開發(fā)起來沒有太多的自由，留給開發(fā)者的空間不夠大，可喜的是微信小程序一直在進(jìn)步與完善，在社區(qū)中您會(huì)非常欣（nan）喜（shou）地發(fā)現(xiàn)，收到的微信官方答復(fù)大多數(shù)都是：xx功能考慮在未來的版本中加入...