2016年9月21日，在前端屆的確是一個(gè)值得紀(jì)念的日子。這天，微信放出殺手锏，WeChatApp 又稱微信小程序。但是就目前來看，有諸多不便，但是這個(gè)事情，依然有很大的意義。因?yàn)檫@是一個(gè)生態(tài)。從放出來這個(gè)消息，就開始關(guān)注。加上公司也有內(nèi)測資格，所以準(zhǔn)備寫一些文章來聊聊weChatApp開發(fā)的一些情況，以及踩到的坑。
首先提到的便是1M的大小限制??，其實(shí)這個(gè)看到1M的大小，覺得沒什么，但是作為一個(gè)大的公司，那么多業(yè)務(wù)，總共就1M，那么就比較可憐了。算起來我們BU獲得的大小容量就100Kb，100Kb是什么概念，純代碼大概只有3000行左右的代碼。但是我們之前的代碼壓縮之后也有235kb呢。反正容量是一個(gè)限制。
其次：很多官方推薦的API也是不能用的。比如ES6，雖然后來開發(fā)工具支持了ES6，但是一些android 機(jī)是不支持ES6的，也是呵呵噠。還有官方推薦flex布局，但是在iOS 8及其以下是不支持flex布局的，那怎么辦呢？官方給的解釋是，自己去做兼容。
官方很容易改變API，很多官方組件還沒上線呢，就已經(jīng)廢棄了。比如一下的截圖：
這個(gè)就比較尷尬了。很多在內(nèi)測的公司，估計(jì)第一版就是按著官方的組件來的，結(jié)果還沒上架，你就把官方的組件給廢棄了，這是拿內(nèi)測公司當(dāng)小白鼠呢。但是，就算是當(dāng)小白鼠，很多公司還是跪舔著爭當(dāng)小白鼠。
下面來說說開發(fā)中遇到的坑
setData 以數(shù)據(jù)來驅(qū)動(dòng)view
在第一版的API中，setData是可以在onLoad的時(shí)候，設(shè)置數(shù)據(jù)的，但是更新一次api之后，在onload就不能設(shè)置setData了，但是官方的文檔，并沒有提到這個(gè)。還有在setData的時(shí)候，如果數(shù)據(jù)，有多層級(jí)。當(dāng)數(shù)據(jù)有改變的時(shí)候，必須從外層開始設(shè)置，例如
obj:{
innerObj:{}
}
如果在setData的時(shí)候?qū)懛ㄟ@樣的話，是無效的。
this.setData({
innerObj:innerObj
})
這樣是無效的。
還有在上面提到，在onload 的時(shí)候設(shè)置setData無效，那怎么辦呢，就像我們的項(xiàng)目，必須設(shè)置的話，只能采取官方不推薦或者說，比較猥瑣的解決方案。
this.data.obj = obj;
雖然官方不推薦，但是也沒辦法不是嗎
setData在內(nèi)部的一個(gè)隊(duì)列方案，這個(gè)以后會(huì)詳細(xì)的說，這一篇主要是說說小程序有哪些坑?，F(xiàn)在有解決方案的，就把解決方案說一下，沒有的話，就是吐槽吧。
數(shù)據(jù)存儲(chǔ)
每個(gè)微信小程序都可以有自己的本地緩存，可以通過 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB。
在第一版的api中，刪除storage是不能指定key進(jìn)行刪除的。那么怎么刪除指定的storage呢，只有把當(dāng)前的key的value值設(shè)置為空了。
wx.setStorage({
key:"key",
data:""
})
這個(gè)確實(shí)也夠猥瑣的，不過后來的更新中，微信提供了，指定key的刪除方法。
wx.removeStorage(OBJECT)
也提供了，同步刪除的方法。
wx.removeStorageSync(KEY)
用法
request請(qǐng)求并發(fā)限制
微信為了保證安全，在同時(shí)request請(qǐng)求的時(shí)候，做了限制，也就是同時(shí)并發(fā)5個(gè)請(qǐng)求，這個(gè)暫時(shí)無解。只能自己去封裝隊(duì)列來處理請(qǐng)求。
request沒有cancel的事件，只要這個(gè)請(qǐng)求發(fā)出去了，是不能取消的。
5層url跳轉(zhuǎn)
微信也是為了安全考慮，限制了，頁面跳轉(zhuǎn)的限制，如果層級(jí)大于5個(gè)的話，不報(bào)錯(cuò)，頁面就是白頁，官方提供的wx.redirectTo去處理，而不是wx.navigateTo。
view的布局以及wxss
官方推薦flex布局，但是當(dāng)使用form表單的時(shí)候，form表單支持flex的并不是很好，使用的時(shí)候，要注意。
action-sheet 這個(gè)東西，很適合做下面的篩選項(xiàng)，但是這個(gè)適合少量的數(shù)據(jù)，因?yàn)椴荒軡L動(dòng)而且自帶的樣式也是不好控制。呵呵噠。不過也被官方判了死刑，還未上線就被廢棄。modal lodding toast，這3個(gè)組件已經(jīng)被官方判了死刑了，還沒上線就被廢棄。
wxss的一些限制
第一版的時(shí)候，wxss不支持層級(jí)選擇，后來更新的時(shí)候，官方把這句話給刪除了，也不知道是推薦使用層級(jí)還是不支持，反正就是把不支持層級(jí)選擇給刪除了。官方的changelist也沒提到這塊。
iconfont能不能使用？可以，但是ios下有兼容性，如果使用在線的iconfont的話，ios不支持，所以為了包的容量，只能base64在本地了。
另外一些別的坑，如業(yè)務(wù)交互
這塊等下一篇再詳細(xì)介紹
