微信小程序開發(fā)實(shí)踐教程
小程序由于微信提供了一些組件,在微信中的一些體驗(yàn)確實(shí)不錯,對于開發(fā)來說,由數(shù)據(jù)驅(qū)動的開發(fā)模式也是挺爽的。
概要介紹
其實(shí)就是類似于VUE REACT的 MVVM模式,專注于數(shù)據(jù)和邏輯。
小程序開發(fā)框架的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。
框架提供了自己的視圖層描述語言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
實(shí)踐得到的經(jīng)驗(yàn)
規(guī)則
1.目前打包后的文件不能超過2M,否則不能上傳到微信服務(wù)器。
小程序不支持的
1.不支持sass語法
2.不支持window、document,不能使用相關(guān)的庫,如jquery、PreventMoveOverScroll。
3.不支持直接使用svg標(biāo)簽開發(fā)。image的src放遠(yuǎn)程svg可以,background-image里也可以。
但是可以使用的canvas標(biāo)簽(canvas坑:position absolute的層蓋不住canvas),可以使用的庫:wx-charts (有坑,放在app.js中然后在page中引用的話,找不到ringChart上面的函數(shù),如ringChart.addEventListener。要直接在page中引庫。)。
4.不支持阻止默認(rèn)事件,沒有preventDefault。
5.沒有br標(biāo)簽。
6.不支持table表格。
7.不能使用 來增大文字間距。
8.小程序的xxx.wxss文件font-face的url不接受http地址作為參數(shù),可以接受 base64 ,因此可以先將字體文件下載后,轉(zhuǎn)換為base64,然后再引用。鏈接。
新特性
1.img標(biāo)簽換成了image標(biāo)簽<image src="/uploads/allimg/180522/161J22b5-0.jpg"></image>。
2.text標(biāo)簽認(rèn)\n換行,不能包裹<br/>標(biāo)簽,會直接輸出出來,有點(diǎn)類似textarea。
3.小程序中 :nth-child(n) 是從0開始的。
4.switch標(biāo)簽。但是不能改變大小樣式,像老radio標(biāo)簽一樣討厭。
5.picker標(biāo)簽。但是在開發(fā)者工具中選項(xiàng)不會循環(huán),在安卓手機(jī)預(yù)覽中選項(xiàng)會循環(huán)。
6.scroll-view標(biāo)簽。有滾動條的盒子。要想在進(jìn)入頁面的時(shí)候自動滾動到某處,可以使用scroll-view的scroll-into-view屬性,不過一定要在scroll-view存在后設(shè)置才會生效,尤其是通過template引用的時(shí)候,比如同時(shí)通過setData設(shè)置使用該template和scroll-into-view的值,并不會使?jié)L動生效。
7.關(guān)于屏幕下拉露底:Android不會,iPhone會??梢酝ㄟ^配置解決:disableScroll Boolean false 設(shè)置為 true 則頁面整體不能上下滾動;只在page.json中有效,無法在app.json中設(shè)置該項(xiàng)。鏈接。
8.template標(biāo)簽
模板的作用域:模板擁有自己的作用域,只能使用data傳入的數(shù)據(jù)。
9.在功能按鈕上使用catchtap防止冒泡
10.hidden參數(shù),控制蒙版的利器
小竅門
1.關(guān)于下拉刷新
要在page.json中設(shè)置 enablePullDownRefresh: true
onPullDownRefresh內(nèi)要手動stopPullDownRefresh,否則一直在點(diǎn)點(diǎn)點(diǎn)(loading)。
2.page的onload函數(shù)中有參數(shù)options可以獲取路徑的query
3.小程序的支付和微信的支付不是一個(gè)appid,需要后端新開發(fā)下單接口
4.wxml最好在開發(fā)者工具編輯(有提示)。js, wxss可以在熟悉的編輯器編輯。
5.小程序中如果賦予的新值是undefined的話,根本不會進(jìn)行賦值,也不會覆蓋之前的值。如:
app.setData({ isPaperCollected: finishedQuizList['id'+quizID] || false })
6.通過多次使用Object.assign({}) 解決data也模塊化后data不能深層復(fù)制的問題。
Object.assign不是深層復(fù)制。
7.在微信web開發(fā)者工具中一定要在動作->設(shè)置->勾上“不使用任何代理,勾選后直連網(wǎng)絡(luò)”,否則老是報(bào)“
Failed to load resource: net::ERR_NAME_NOT_RESOLVED”的bug:鏈接
8.每一個(gè)小程序頁面也可以使用.json文件來對本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡單得多,只是設(shè)置app.json中的window配置項(xiàng)的內(nèi)容,頁面中配置項(xiàng)會覆蓋app.json的window中相同的配置項(xiàng)。頁面的.json只能設(shè)置window相關(guān)的配置項(xiàng),以決定本頁面的窗口表現(xiàn),所以無需寫 window 這個(gè)鍵
9.data是在page中設(shè)置的,不是在app.js中的。不涉及渲染的可以不要放data里面。
10.Page.prototype.setData()變更數(shù)據(jù)同時(shí)更新頁面數(shù)據(jù)。
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層,同時(shí)改變對應(yīng)的 this.data 的值。直接修改 this.data 無效,無法改變頁面的狀態(tài),還會造成數(shù)據(jù)不一致。單次設(shè)置的數(shù)據(jù)不能超過1024kB,請盡量避免一次設(shè)置過多的數(shù)據(jù)。
11.wx:if 是惰性的,如果在初始渲染條件為false,框架什么也不做,在條件第一次變成真的時(shí)候才開始局部渲染。
會話管理
微信的網(wǎng)絡(luò)請求接口 wx.request() 沒有攜帶 Cookies,這讓傳統(tǒng)基于 Cookies 實(shí)現(xiàn)的會話管理不再適用。為了讓處理微信小程序的服務(wù)能夠識別會話,我們會話管理使用weapp-session-client。這需要服務(wù)端的支持。基本原理是包裝wx.request并在 Header 上使用特殊的字段跟蹤。
使用時(shí)遇到的問題:
1.微信開發(fā)者工具報(bào)錯:Uncaught ReferenceError: regeneratorRuntime is not defined
原因是 Generator 函數(shù)不被支持。
解決方法:
- 微信開發(fā)者工具關(guān)閉ES6轉(zhuǎn)ES5
- 真正解決辦法,提供regeneratorRuntime
2.題外話:善用 Promise
本項(xiàng)目后端處理會話管理時(shí)要求發(fā)送請求時(shí)不能使用相同的 X-WX-Code發(fā)送多次全部header數(shù)據(jù),RawData、Signature等,否則報(bào)錯。
所以使用weapp-session-client登錄的時(shí)候要等login返回之后再發(fā)送其他的請求,
小程序加載后立即順序執(zhí)行app.js和page.js里面的配置,但是wx request是異步的,所以有可能page中的請求開始執(zhí)行時(shí)app.js中的login還沒結(jié)束,就會導(dǎo)致bug。
可以使用個(gè)promise解決掉。
進(jìn)階
1.擴(kuò)展微信小程序框架功能
2.疑問:微信切換賬號會不會銷毀小程序
3.檢查TLS版本的問題
http://www.dongcoder.com/detail-410653.html
解決方法:微信開發(fā)者工具勾選開發(fā)時(shí)不檢查檢查TLS版本或后端配置
4.藍(lán)牙、震動的調(diào)用
第二部分:如何開通一個(gè)小商店