微信小程序爬坑日記
新公司上手小程序。
30天,從入門到現在,還沒放棄。。。
雖然小程序發布出來快一年了,爬坑的兄弟們大多把坑都踩平了。而我一直停留在“Hello World”的學習階段。
一來沒項目,只有項目才是實踐學習的根本;
二來剛出來,總是有很多坑。爬坑總是痛並快樂著。
再多的借口,產品項目需求拍在桌前,都得繳械投降。
不要慫擼起袖子,就是幹。
初識小程序
微信推出小程序,想要實現即開即用,用完即走的用戶體驗。免去APP下載安裝繁瑣的流程。聽起來像谷歌推出的PWA,不過PWA普及到國內還有段時間。而小程序借助於微信的用戶群體,植入成本低,容易被用戶接受。
小程序的代碼風格跟Vue其實挺像,對於習慣Vue開發模式的同學,上手並沒有太大的問題。
小程序不支持前端主流框架,如Vue,Angular,React,jQuery等,而且小程序有自己的一套視圖容器(Dom)的寫法,跟平常我們在web上寫HTML不一樣。不過CSS3那些變化不大。雖然文件名改成了(.wxss)
本司項目,使用webpack做打包工具,將代碼編譯成符合小程序的代碼目錄規範,采用wechat-mina-loader插件,實際開發起來跟在Vue下開發習慣一樣。
babel完成ES6轉ES5,sass編譯,壓縮轉化等工作都放到webpack中去做。
不支持dom操作
小程序腳本內不能使用window,document對象,所以無法操作dom。如果想操作節點,可用wx.createSelectorQuery()
另外數據驅動的開發模式,跟Vue相同,只是寫法換了(vue: v-if,小程序: wx:if)
rpx布局
rpx(responsive pixel): 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
設計師做設計圖以iPhone6作為設計稿基準就可以,基本上可以用rpx替換px,不過在一些表單或者提示頁面,使用設計稿上的rpx會讓小屏幕手機看著尺寸略小,提示頁面可參照weui用px來實現
路由層級
wx.navigateTo(OBJECT)
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面
wx.redirctTo(OBJECT)
關閉當前頁面,跳轉到應用內的某個頁面
wx.switchTab(OBJECT)
跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面
wx.reLaunch(OBJECT)
關閉所有頁面,打開到應用內的某個頁面
小程序只能同時打開打開5個頁面,當打開5個頁面後,wx.navigateTo不能正常打開新頁面,請避免多層級的交互方式,或者使用wx.redirctTo重定向
tabBar底部導航欄
tabBar是一個數組。配置最少2個,最多5個,tab數組按順序排序
頁面滾動到頂部
基礎庫1.4.0支持
wx.pageScrollTo({
scrollTop: 0 //滾動到頁面的目標位置(單位px)
})
圖片資源,CSS中的背景圖片
CSS中無法使用本地資源(開發目錄中)的圖片作為background-image。可以使用網絡圖片資源,或base64,或者使用image標簽。tabBar的icon資源可使用本地資源
unionid與openid的區別
每個用戶在每個小程序裏面都有唯一的openid,如果想在多個公眾號,小程序裏面共享用戶信息,統一識別該用戶,則需要用到unionid。為了獲取uniond則需要註冊微信開放平臺,將需要共享的小程序,公眾號進行綁定(不超過10個,超過10個還要申請認證稱為第三發平臺)。
textarea在滾動頁面中的bug
textarea,map等組件是由客戶端創建的原生組件,它的層級是最高的。如果有遇到定位元素的話。永遠在最上面,蓋不住。
- 請勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 組件
- CSS動畫對textarea無效
項目場景:頁面底部固定了一個按鈕(position:fixed), 頁面滾動時,textarea總是在按鈕上面,點擊按鈕就點到了textarea
可以設置網絡請求的超時時間
app.js中配置
"networkTimeout": { "request": 10000 // 10秒 }
window配置
navigationBarTextStyle 導航欄標題顏色僅支持black/white
狀態欄,導航條,標題,窗口背景色支持純色,不支持漸變色
參數問題
- 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縮放模式,mode="widthFix"比較常用(寬度不變,高度自動變化,保持原圖寬高比不變)
小程序可以監聽小程序的關閉後,但是無法阻斷
場景:想在小程序退出時彈出個提示框,並阻止關閉(暫時無法實現)
小程序碼
小程序碼(葵花碼)有幾種方式,只有發布過小程序才可正常顯示小程序碼
小程序第一次提交的審核時間較後面的長
第一次提交審核一般1天到2天。所以為了能準點上線,建議先上一次臨時的版本(放一個提示頁面都可以),過了第一次審核發布再說。日常提交審核,2-3小時就可以。
頻繁地setData會造成性能問題
頻繁地setData操作,會出現卡頓,操作反饋延遲嚴重,甚至有可能閃退。
場景:原計劃用countUp做數字動畫,原理就是頻繁地改變數字值,setData操作,渲染到模版上。
ES6轉ES5,小程序檢測目錄中的js文件(極少)
項目中用了webpack進行ES6轉ES5,所以關閉了微信小程序的ES6轉ES5功能。這個坑就比較隱蔽了,測試的時候在5S真機上報js錯誤,發現有個js(使用了ES6,沒有轉ES5)文件沒有使用,微信小程序會去檢測目錄中的js文件,如果關閉了微信自帶的ES6轉ES5,檢測到目錄中js文件不兼容ES5,就報錯。這個Bug只在5S真機裏出現過,5C都正常。如果開啟了微信開發工具中的ES6轉ES5,則會自動幫你完成轉化工作,不會出現類似問題。
分享些小程序開發比較常用的第三方庫
- 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
作者:以樂之名
本文原創,有不當的地方歡迎指出。轉載請指明出處。
微信小程序爬坑日記