新公司上手小程序。
30天，從入門到現在，還沒放棄(qi)。。。

雖然小程序發布出來快一年了，爬坑的兄弟們大多把坑都踩平了。而我一直停留在“Hello World”的學習階段。
一來沒項目，只有項目才是實踐學習的根本；
二(er)來(lai)(lai)剛出(chu)來(lai)(lai)，總是有(you)很多坑。爬(pa)坑總是痛并快樂著。

再多的借口，產品項目需求拍在桌前，都得繳械投降。
不(bu)要慫擼起袖子，就是干。

初識小程序

微(wei)信(xin)推(tui)(tui)出(chu)小程序，想要實現即開即用，用完即走(zou)的(de)用戶體(ti)驗。免去APP下載安裝繁(fan)瑣的(de)流(liu)程。聽起(qi)來像谷歌推(tui)(tui)出(chu)的(de)PWA，不(bu)過(guo)PWA普及(ji)到國(guo)內還有段時間。而小程序借助于微(wei)信(xin)的(de)用戶群體(ti)，植入成(cheng)本低，容易被用戶接受(shou)。

小程序的(de)(de)代碼(ma)風格跟Vue其實挺像(xiang)，對于習慣(guan)Vue開發(fa)模式的(de)(de)同學，上手(shou)并(bing)沒有太(tai)大的(de)(de)問題。

小程序不(bu)(bu)(bu)支(zhi)持前端主流框架，如Vue，Angular，React，jQuery等，而且小程序有自(zi)己的(de)一(yi)套視圖(tu)容器(Dom)的(de)寫(xie)法，跟平常(chang)我們(men)在web上寫(xie)HTML不(bu)(bu)(bu)一(yi)樣(yang)。不(bu)(bu)(bu)過CSS3那(nei)些(xie)變(bian)化不(bu)(bu)(bu)大。雖然(ran)文件名(ming)改成了(le)(.wxss)

本司項目，使用webpack做打包工具，將代碼編譯成符合小程序的代碼目錄規范，采用wechat-mina-loader插件，實際開發起來跟在Vue下開發習慣一樣。
babel完成ES6轉ES5，sass編譯，壓縮轉化等工作都放到(dao)webpack中去做。

不支持dom操作

小程序腳本內不能(neng)使用(yong)window,document對象，所以無法操(cao)作dom。如果想操(cao)作節點，可用(yong)wx.createSelectorQuery()

另(ling)外數據驅動的開發模式，跟Vue相同，只是寫法換(huan)了（vue: v-if，小程序: wx:if）

rpx布局

rpx（responsive pixel）: 可以根據屏(ping)(ping)幕(mu)寬度進行自(zi)適應。規定(ding)屏(ping)(ping)幕(mu)寬為750rpx。如在 iPhone6 上，屏(ping)(ping)幕(mu)寬度為375px，共(gong)有750個物(wu)(wu)理(li)像素(su)(su)，則750rpx = 375px = 750物(wu)(wu)理(li)像素(su)(su)，1rpx = 0.5px = 1物(wu)(wu)理(li)像素(su)(su)。

設(she)計師做設(she)計圖以(yi)iPhone6作為設(she)計稿基(ji)準就(jiu)可(ke)以(yi)，基(ji)本上(shang)可(ke)以(yi)用rpx替換px，不(bu)過(guo)在一些(xie)表單或者提(ti)示頁面(mian)，使用設(she)計稿上(shang)的rpx會讓小屏幕手機(ji)看著尺(chi)寸略小，提(ti)示頁面(mian)可(ke)參照(zhao)weui用px來實現

路由層級

• wx.navigateTo(OBJECT)

保留當前頁面，跳轉(zhuan)到(dao)應用(yong)(yong)內的某(mou)個(ge)頁面，使用(yong)(yong)wx.navigateBack可以返回到(dao)原頁面

• wx.redirctTo(OBJECT)

關閉(bi)當(dang)前頁(ye)面(mian)，跳轉(zhuan)到應用內的(de)某個頁(ye)面(mian)

• wx.switchTab(OBJECT)

跳轉到 tabBar 頁面(mian)，并關閉其他所有(you)非 tabBar 頁面(mian)

• wx.reLaunch(OBJECT)

關(guan)閉所有頁(ye)面，打開到(dao)應用內的某(mou)個(ge)頁(ye)面

小(xiao)程(cheng)序只能同時打(da)開(kai)打(da)開(kai)5個頁面(mian)，當(dang)打(da)開(kai)5個頁面(mian)后，wx.navigateTo不能正(zheng)常(chang)打(da)開(kai)新頁面(mian)，請避免(mian)多層級的交互方式，或者使用wx.redirctTo重(zhong)定向

tabBar底部導航欄

tabBar是(shi)一個(ge)數組。配置(zhi)最少2個(ge)，最多5個(ge)，tab數組按順(shun)序(xu)排序(xu)

頁面滾動到頂部

基(ji)礎庫1.4.0支持

wx.pageScrollTo({
  scrollTop: 0   //滾動到頁面的目標位置（單位px）
})

圖片資源，CSS中的背景圖片

CSS中無法使(shi)用本地(di)資(zi)源(yuan)(開發目錄中)的(de)圖片作(zuo)為background-image。可(ke)以使(shi)用網(wang)絡圖片資(zi)源(yuan)，或base64，或者使(shi)用image標(biao)簽(qian)。tabBar的(de)icon資(zi)源(yuan)可(ke)使(shi)用本地(di)資(zi)源(yuan)

unionid與openid的區別

每個(ge)用戶在每個(ge)小程(cheng)序(xu)(xu)里(li)面都(dou)有唯一的openid，如果想在多個(ge)公眾號，小程(cheng)序(xu)(xu)里(li)面共享用戶信(xin)(xin)息，統(tong)一識別該用戶，則需(xu)要(yao)(yao)用到(dao)unionid。為了(le)獲取uniond則需(xu)要(yao)(yao)注(zhu)冊(ce)微信(xin)(xin)開(kai)放平臺，將需(xu)要(yao)(yao)共享的小程(cheng)序(xu)(xu)，公眾號進行綁定(ding)（不超過10個(ge)，超過10個(ge)還要(yao)(yao)申請認證稱為第(di)三發(fa)平臺）。

textarea在滾動頁面中的bug

textarea,map等組(zu)(zu)件是由(you)客戶端(duan)創建的原生組(zu)(zu)件，它的層級是最高的。如果(guo)有遇到定(ding)位元素(su)的話。永遠在最上(shang)面，蓋不(bu)住(zhu)。

• 請勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 組件
• CSS動畫對textarea無效

項目場景(jing)：頁面(mian)底(di)部固定了(le)一個(ge)按鈕(niu)（position:fixed), 頁面(mian)滾動時，textarea總是在按鈕(niu)上面(mian)，點擊按鈕(niu)就點到了(le)textarea

可以設置網絡請求的超時時間

app.js中(zhong)配(pei)置(zhi)

"networkTimeout": {
  "request": 10000 // 10秒
}

window配置

navigationBarTextStyle 導航欄標題顏色僅支持black/white
狀態欄，導航條，標(biao)題(ti)，窗(chuang)口(kou)背景色(se)(se)支持(chi)純(chun)色(se)(se)，不支持(chi)漸變色(se)(se)

參數問題

• url中添加參數，如url?a=1&b=2, onLoad(options) options.query.a, options.query.b可獲取到
• 掃描小程序碼進頁面，如果想獲取小程序碼url中所帶的參數，可通過options.scene獲取，不過需要對二維碼中的scene值進行轉換decodeURIComponent(options.scene), 調試階段可以使用開發工具的條件編譯自定義參數 scene=xxxx 進行模擬，開發工具模擬時的 scene 的參數值需要進行 urlencode (啟動參數：scene=n%3D1001) 實際為scene=n=1001，參數n=1001

image標簽圖片

image默認width: 300px, height: 225px, lazy-load懶加載只對page與scroll-view下的image有效
mode縮放模式(shi)，mode="widthFix"比較常用(yong)(寬度不(bu)變(bian)，高度自動變(bian)化，保持原(yuan)圖寬高比不(bu)變(bian))

小程序可以監聽小程序的關閉后，但是無法阻斷

場景：想在小(xiao)程序退出(chu)時(shi)彈出(chu)個提示框，并阻止關閉（暫時(shi)無法實現）

小程序碼

小(xiao)程(cheng)序(xu)(xu)碼(葵花碼)有(you)幾(ji)種方式，只有(you)發布過(guo)小(xiao)程(cheng)序(xu)(xu)才可正(zheng)常顯(xian)示小(xiao)程(cheng)序(xu)(xu)碼

小程序第一次提交的審核時間較后面的長

第一(yi)次提(ti)交(jiao)審(shen)(shen)核一(yi)般1天到2天。所以(yi)(yi)為了能準點(dian)上(shang)線，建議(yi)先(xian)上(shang)一(yi)次臨時的版本(放一(yi)個提(ti)示(shi)頁面都可(ke)以(yi)(yi))，過了第一(yi)次審(shen)(shen)核發(fa)布再說。日常提(ti)交(jiao)審(shen)(shen)核，2-3小時就可(ke)以(yi)(yi)。

頻繁地setData會造成性能問題

 頻繁地setData操作(zuo)，會出現卡頓，操作(zuo)反饋延遲嚴(yan)重(zhong)，甚(shen)至有可(ke)能閃退。

場景：原(yuan)計(ji)劃用countUp做(zuo)數字動畫，原(yuan)理就是頻繁地(di)改變數字值，setData操作，渲染到模版上(shang)。

ES6轉ES5，小程序檢測目錄中的js文件(極少)

項目(mu)中(zhong)用(yong)了webpack進行ES6轉(zhuan)(zhuan)(zhuan)ES5，所(suo)以關閉了微信(xin)小程(cheng)序的(de)ES6轉(zhuan)(zhuan)(zhuan)ES5功能。這(zhe)個坑就比較隱蔽了，測試(shi)的(de)時候在(zai)5S真機上報(bao)js錯誤，發(fa)現(xian)(xian)有(you)個js(使用(yong)了ES6，沒(mei)有(you)轉(zhuan)(zhuan)(zhuan)ES5)文件(jian)沒(mei)有(you)使用(yong)，微信(xin)小程(cheng)序會去檢測目(mu)錄中(zhong)的(de)js文件(jian)，如果(guo)關閉了微信(xin)自(zi)帶的(de)ES6轉(zhuan)(zhuan)(zhuan)ES5，檢測到目(mu)錄中(zhong)js文件(jian)不兼容ES5，就報(bao)錯。這(zhe)個Bug只(zhi)在(zai)5S真機里出(chu)現(xian)(xian)過，5C都正(zheng)常。如果(guo)開啟了微信(xin)開發(fa)工(gong)(gong)具(ju)中(zhong)的(de)ES6轉(zhuan)(zhuan)(zhuan)ES5，則會自(zi)動幫你完成(cheng)轉(zhuan)(zhuan)(zhuan)化工(gong)(gong)作，不會出(chu)現(xian)(xian)類似問題。

分享些小程序開發比較常(chang)用的第三方庫

• weui-wxss(小程序版的weui樣式庫) Github: //github.com/Tencent/weui-wxss
• wepy(小程序組件化框架) Github: //github.com/Tencent/wepy
• skyvow/vux(小程序組件庫) Github: //github.com/skyvow/wux
• xiaolin3303/wx-charts(小程序圖標) Github: //github.com/xiaolin3303/wx-charts