前言
作為一名勤懇單純的未來iOS開發(fā)者，受迫于對新事物的好奇，便義無反顧地舉手加入了團(tuán)隊(duì)里一個(gè)小程序項(xiàng)目的開發(fā)中。
首先要聲明一下：
-
本人對前端了解微淺，微信小程序開發(fā)也無深入了解，這里僅作為一篇小程序的項(xiàng)目經(jīng)驗(yàn)總結(jié)文來跟大家分享。
-
微信小程序處于發(fā)展中，內(nèi)嵌的方法仍在不斷改善與補(bǔ)充，相信一些坑也會在未來的版本中被填平。 本文基于的
基礎(chǔ)庫版本為1.5.3，內(nèi)容如有疏漏，歡迎指教。
Dry goods 【干貨】
一. 值
1. setData
1.
setData：是邏輯層(.js)向視圖層(.wxml)進(jìn)行的數(shù)據(jù)渲染，是一個(gè)異步操作，所以可能需要用到延遲執(zhí)行方法來確保賦值成功后的操作：
setTimeout(function () {
})
}, duration) // duration: 毫秒(ms)
2.
// 在該作用域里賦值能成功而page的data數(shù)據(jù)沒有更新。但似乎沒必要做這樣不去刷新頁面數(shù)據(jù)的操作，因?yàn)椴皇且晥D層需要的數(shù)據(jù)源沒必要寫在data中，而且這樣可能會污染該值。
this.data.testData = testData
// 這是真正需要的賦值操作，刷新值后渲染頁面。
that.setData({
testData: testData,
})
3.
// 在閉包中用到this需首先將其引用，并且需要聲明在賦值的作用域外層，否則會報(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. 小程序碼傳參
向后端生成小程序碼的請求中傳入頁面路徑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è)置變量名與取值變量名的格式要求。（文檔說明如下）
（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 // `-` 會轉(zhuǎn)為駝峰寫法
event.currentTarget.dataset.alphabeta === 2 // 大寫會轉(zhuǎn)為小寫
}
})
二. 組件
wx tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件。 so，注定她們是不安定的。但在這里就不一一展開了。
1. scroll-view
// 這會導(dǎo)致整個(gè)scroll-view內(nèi)的滾動條都被隱藏。
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
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í)長會發(fā)生繪圖失敗生成一張空白圖片可能，造成用戶體驗(yàn)不好。 3：特別是多圖合成情況，以上問題尤為突出。 需求改動：將點(diǎn)擊直接生成合成圖片改為跳轉(zhuǎn)到另一個(gè)page去展示并且生成。 當(dāng)然你會想問，讓后臺直接返回合成的圖片不就ok啦？確實(shí)是這樣的，這會在后面的版本中改過來。
-
drawImage需是項(xiàng)目資源圖片或者是圖片下載完畢后保存的文件路徑，這里要注意的是下載的圖片url必須是安全校驗(yàn)的路徑，而image標(biāo)簽使用的https必須經(jīng)過微信簽名驗(yàn)證，自簽名不行，如本次項(xiàng)目使用的七牛云就出現(xiàn)了這樣的bug：圖片加載會變得非常慢甚至無法加載，但是預(yù)覽圖片還是會顯示出來。
-
順便說一下圖片裁剪方法clip會在未來的版本中添加。
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。可設(shè)置其css屬性 maxlength
5. swiper
-
設(shè)置高度時(shí)須將每個(gè)item的高度都賦值一遍，防止造成內(nèi)容顯示高度不一致（模擬器上顯示正常，真機(jī)上內(nèi)容顯示有偏差）。
-
解決
swiper-item 因內(nèi)容高度不一致而導(dǎo)致部分item無內(nèi)容顯示的可選方案：切換item時(shí)重載數(shù)據(jù)。
三. util
1. requrie不支持絕對路徑，須使用相對路徑導(dǎo)入
這個(gè)bug確實(shí)很讓人抓狂。
2. 若需要配置指定page的頁面信息，在.json文件中直接配置對應(yīng)屬性即可，而不要寫成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. 設(shè)置page背景顏色
// 在page對應(yīng)的.wss文件中設(shè)置
page {
background-color: "#f4f5f7";
}
在對應(yīng)page的.json中設(shè)置 background-color 屬性不是修改頁面的背景顏色，而是修改頁面的窗口顏色，即頁面下拉時(shí)出現(xiàn)的窗口顏色。
后話
開發(fā)小程序過程中給人的感覺是開發(fā)起來沒有太多的自由，留給開發(fā)者的空間不夠大，可喜的是微信小程序一直在進(jìn)步與完善，在社區(qū)中您會非常欣（nan）喜（shou）地發(fā)現(xiàn)，收到的微信官方答復(fù)大多數(shù)都是：xx功能考慮在未來的版本中加入...
