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

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

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

初識小程序

微信推出小程序，想要實現(xiàn)即開即用，用完即走的用戶體驗。免去APP下載安裝繁瑣的流程。聽起來像谷歌推出的PWA，不過PWA普及到國內(nèi)還有段時間。而小程序借助于微信的用戶群體，植入成本低，容易被用戶接受。

小程序的代碼風(fēng)格跟Vue其實挺像，對于習(xí)慣Vue開發(fā)模式的同學(xué)，上手并沒有太大的問題。

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

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

不支持dom操作

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

另外數(shù)據(jù)驅(qū)動的開發(fā)模式，跟Vue相同，只是寫法換了（vue: v-if，小程序: wx:if）

rpx布局

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設(shè)計師做設(shè)計圖以iPhone6作為設(shè)計稿基準就可以，基本上可以用rpx替換px，不過在一些表單或者提示頁面，使用設(shè)計稿上的rpx會讓小屏幕手機看著尺寸略小，提示頁面可參照weui用px來實現(xiàn)

路由層級

• wx.navigateTo(OBJECT)

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用wx.navigateBack可以返回到原頁面

• wx.redirctTo(OBJECT)

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面

• wx.switchTab(OBJECT)

跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面

• wx.reLaunch(OBJECT)

關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面

小程序只能同時打開打開5個頁面，當(dāng)打開5個頁面后，wx.navigateTo不能正常打開新頁面，請避免多層級的交互方式，或者使用wx.redirctTo重定向

tabBar底部導(dǎo)航欄

tabBar是一個數(shù)組。配置最少2個，最多5個，tab數(shù)組按順序排序

頁面滾動到頂部

基礎(chǔ)庫1.4.0支持

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

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

CSS中無法使用本地資源(開發(fā)目錄中)的圖片作為background-image。可以使用網(wǎng)絡(luò)圖片資源，或base64，或者使用image標簽。tabBar的icon資源可使用本地資源

unionid與openid的區(qū)別

每個用戶在每個小程序里面都有唯一的openid，如果想在多個公眾號，小程序里面共享用戶信息，統(tǒng)一識別該用戶，則需要用到unionid。為了獲取uniond則需要注冊微信開放平臺，將需要共享的小程序，公眾號進行綁定（不超過10個，超過10個還要申請認證稱為第三發(fā)平臺）。

textarea在滾動頁面中的bug

textarea,map等組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的。如果有遇到定位元素的話。永遠在最上面，蓋不住。

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

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

可以設(shè)置網(wǎng)絡(luò)請求的超時時間

app.js中配置

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

window配置

navigationBarTextStyle 導(dǎo)航欄標題顏色僅支持black/white
狀態(tài)欄，導(dǎo)航條，標題，窗口背景色支持純色，不支持漸變色

參數(shù)問題

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

image標簽圖片

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

小程序可以監(jiān)聽小程序的關(guān)閉后，但是無法阻斷

場景：想在小程序退出時彈出個提示框，并阻止關(guān)閉（暫時無法實現(xiàn)）

小程序碼

小程序碼(葵花碼)有幾種方式，只有發(fā)布過小程序才可正常顯示小程序碼

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

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

頻繁地setData會造成性能問題

頻繁地setData操作，會出現(xiàn)卡頓，操作反饋延遲嚴重，甚至有可能閃退。

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

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

項目中用了webpack進行ES6轉(zhuǎn)ES5，所以關(guān)閉了微信小程序的ES6轉(zhuǎn)ES5功能。這個坑就比較隱蔽了，測試的時候在5S真機上報js錯誤，發(fā)現(xiàn)有個js(使用了ES6，沒有轉(zhuǎn)ES5)文件沒有使用，微信小程序會去檢測目錄中的js文件，如果關(guān)閉了微信自帶的ES6轉(zhuǎn)ES5，檢測到目錄中js文件不兼容ES5，就報錯。這個Bug只在5S真機里出現(xiàn)過，5C都正常。如果開啟了微信開發(fā)工具中的ES6轉(zhuǎn)ES5，則會自動幫你完成轉(zhuǎn)化工作，不會出現(xiàn)類似問題。

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

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