微信小程序爬坑日記

發表時間：2021-3-31

發布人：葵宇科技

浏覽次數：45

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

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

再多的借口，産品項目需求拍在桌前，都得繳械投降。
不要慫撸起袖子(zǐ)，就是幹。

初識小程序

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

小程序的代碼風格跟Vue其實挺像，對于習慣Vue開發模式的同學，上手并沒有太大的問(wèn)題。

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

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

不支持dom操作

小程序腳本内不能使用window,document對象，所以無法操作dom。如(rú)果想操作節點，可(kě)用wx.createSelectorQuery()

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

rpx布局

rpx（responsive pixel）: 可(kě)以根據屏幕寬度進行自适應。規定屏幕寬為750rpx。如(rú)在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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

路(lù)由層級

wx.navigateTo(OBJECT)

保留當前頁面，跳轉到應用内的某個(gè)頁面，使用wx.navigateBack可(kě)以返回到原頁面

wx.redirctTo(OBJECT)

關(guān)閉當前頁面，跳轉到應用内的某個(gè)頁面

wx.switchTab(OBJECT)

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

wx.reLaunch(OBJECT)

關(guān)閉所有頁面，打開到應用内的某個(gè)頁面

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

tabBar底部導航欄

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

頁面滾動(dòng)到頂部

基礎庫1.4.0支持

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

圖片資(zī)源，CSS中(zhōng)的背景圖片

CSS中(zhōng)無法使用本地資(zī)源(開發目錄中(zhōng))的圖片作為background-image。可(kě)以使用網絡圖片資(zī)源，或base64，或者使用image标簽。tabBar的icon資(zī)源可(kě)使用本地資(zī)源

unionid與openid的區别

每個(gè)用戶在每個(gè)小程序裡面都有唯一的openid，如(rú)果想在多個(gè)公衆号，小程序裡面共享用戶信息，統一識别該用戶，則需要用到unionid。為了獲取uniond則需要注冊微信開放平台，将需要共享的小程序，公衆号進行綁定（不超過10個(gè)，超過10個(gè)還要申請認證稱為第三發平台）。

textarea在滾動(dòng)頁面中(zhōng)的bug

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

請勿在 scroll-view、swiper、picker-view、movable-view 中(zhōng)使用 textarea 組件
CSS動(dòng)畫對textarea無效

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

可(kě)以設置網絡請求的超時時間

app.js中(zhōng)配置

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

window配置

navigationBarTextStyle 導航欄标題顔色僅支持black/white
狀态欄，導航條，标題，窗口背景色支持純色，不支持漸變色

參數問(wèn)題

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

image标簽圖片

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

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

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

小程序碼

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

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

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

頻繁地setData會造成性能問(wèn)題

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

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

ES6轉ES5，小程序檢測目錄中(zhōng)的js文(wén)件(極少(shǎo))

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

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