小程序模板網(wǎng)

微信小程序爬坑日記

發(fā)布時(shí)間:2018-04-26 12:03 所屬欄目:小程序開發(fā)教程

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

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

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

初識(shí)小程序

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

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

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

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

不支持dom操作

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

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

rpx布局

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

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

路由層級(jí)

  • wx.navigateTo(OBJECT)

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

  • wx.redirctTo(OBJECT)

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

  • wx.switchTab(OBJECT)

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

  • wx.reLaunch(OBJECT)

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

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

tabBar底部導(dǎo)航欄

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

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

基礎(chǔ)庫1.4.0支持


wx.pageScrollTo({
  scrollTop: 0   //滾動(dòng)到頁面的目標(biāo)位置(單位px)
})

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

CSS中無法使用本地資源(開發(fā)目錄中)的圖片作為background-image??梢允褂镁W(wǎng)絡(luò)圖片資源,或base64,或者使用image標(biāo)簽。tabBar的icon資源可使用本地資源

unionid與openid的區(qū)別

每個(gè)用戶在每個(gè)小程序里面都有唯一的openid,如果想在多個(gè)公眾號(hào),小程序里面共享用戶信息,統(tǒng)一識(shí)別該用戶,則需要用到unionid。為了獲取uniond則需要注冊(cè)微信開放平臺(tái),將需要共享的小程序,公眾號(hào)進(jìn)行綁定(不超過10個(gè),超過10個(gè)還要申請(qǐng)認(rèn)證稱為第三發(fā)平臺(tái))。

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

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

  • 請(qǐng)勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 組件
  • CSS動(dòng)畫對(duì)textarea無效

項(xiàng)目場(chǎng)景:頁面底部固定了一個(gè)按鈕(position:fixed), 頁面滾動(dòng)時(shí),textarea總是在按鈕上面,點(diǎn)擊按鈕就點(diǎn)到了textarea

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

app.js中配置


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

window配置

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

參數(shù)問題

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

image標(biāo)簽圖片

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

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

場(chǎng)景:想在小程序退出時(shí)彈出個(gè)提示框,并阻止關(guān)閉(暫時(shí)無法實(shí)現(xiàn))

小程序碼

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

小程序第一次提交的審核時(shí)間較后面的長(zhǎng)

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

頻繁地setData會(huì)造成性能問題

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

場(chǎng)景:原計(jì)劃用countUp做數(shù)字動(dòng)畫,原理就是頻繁地改變數(shù)字值,setData操作,渲染到模版上。

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

項(xiàng)目中用了webpack進(jìn)行ES6轉(zhuǎn)ES5,所以關(guān)閉了微信小程序的ES6轉(zhuǎn)ES5功能。這個(gè)坑就比較隱蔽了,測(cè)試的時(shí)候在5S真機(jī)上報(bào)js錯(cuò)誤,發(fā)現(xiàn)有個(gè)js(使用了ES6,沒有轉(zhuǎn)ES5)文件沒有使用,微信小程序會(huì)去檢測(cè)目錄中的js文件,如果關(guān)閉了微信自帶的ES6轉(zhuǎn)ES5,檢測(cè)到目錄中js文件不兼容ES5,就報(bào)錯(cuò)。這個(gè)Bug只在5S真機(jī)里出現(xiàn)過,5C都正常。如果開啟了微信開發(fā)工具中的ES6轉(zhuǎn)ES5,則會(huì)自動(dòng)幫你完成轉(zhuǎn)化工作,不會(huì)出現(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(小程序圖標(biāo)) Github: https://github.com/xiaolin3303/wx-charts


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24108.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢