微信小程序開發(fā)實踐教程

小程序由于微信提供了一些組件，在微信中的一些體驗確實不錯，對于開發(fā)來說，由數(shù)據(jù)驅動的開發(fā)模式也是挺爽的。

概要介紹

其實就是類似于VUE REACT的 MVVM模式，專注于數(shù)據(jù)和邏輯。
小程序開發(fā)框架的目標是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗的服務。

框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。

實踐得到的經(jīng)驗

規(guī)則

1.目前打包后的文件不能超過2M，否則不能上傳到微信服務器。

小程序不支持的

1.不支持sass語法
2.不支持window、document，不能使用相關的庫，如jquery、PreventMoveOverScroll。

3.不支持直接使用svg標簽開發(fā)。image的src放遠程svg可以，background-image里也可以。
但是可以使用的canvas標簽（canvas坑：position absolute的層蓋不住canvas），可以使用的庫：wx-charts (有坑，放在app.js中然后在page中引用的話，找不到ringChart上面的函數(shù)，如ringChart.addEventListener。要直接在page中引庫。)。

4.不支持阻止默認事件，沒有preventDefault。
5.沒有br標簽。
6.不支持table表格。
7.不能使用 來增大文字間距。
8.小程序的xxx.wxss文件font-face的url不接受http地址作為參數(shù),可以接受 base64 ,因此可以先將字體文件下載后,轉換為base64，然后再引用。鏈接。

新特性

1.img標簽換成了image標簽<image src="/uploads/allimg/180522/161J22b5-0.jpg"></image>。
2.text標簽認\n換行，不能包裹<br/>標簽，會直接輸出出來，有點類似textarea。
3.小程序中 :nth-child(n) 是從0開始的。
4.switch標簽。但是不能改變大小樣式，像老radio標簽一樣討厭。
5.picker標簽。但是在開發(fā)者工具中選項不會循環(huán)，在安卓手機預覽中選項會循環(huán)。

6.scroll-view標簽。有滾動條的盒子。要想在進入頁面的時候自動滾動到某處，可以使用scroll-view的scroll-into-view屬性，不過一定要在scroll-view存在后設置才會生效，尤其是通過template引用的時候，比如同時通過setData設置使用該template和scroll-into-view的值，并不會使?jié)L動生效。

7.關于屏幕下拉露底：Android不會，iPhone會?？梢酝ㄟ^配置解決：disableScroll Boolean false 設置為 true 則頁面整體不能上下滾動；只在page.json中有效，無法在app.json中設置該項。鏈接。

8.template標簽
模板的作用域：模板擁有自己的作用域，只能使用data傳入的數(shù)據(jù)。

9.在功能按鈕上使用catchtap防止冒泡

10.hidden參數(shù)，控制蒙版的利器

小竅門

1.關于下拉刷新
要在page.json中設置 enablePullDownRefresh: true
onPullDownRefresh內(nèi)要手動stopPullDownRefresh，否則一直在點點點（loading）。

2.page的onload函數(shù)中有參數(shù)options可以獲取路徑的query

3.小程序的支付和微信的支付不是一個appid，需要后端新開發(fā)下單接口

4.wxml最好在開發(fā)者工具編輯（有提示）。js， wxss可以在熟悉的編輯器編輯。

5.小程序中如果賦予的新值是undefined的話，根本不會進行賦值，也不會覆蓋之前的值。如：

app.setData({
    isPaperCollected: finishedQuizList['id'+quizID] || false
})

6.通過多次使用Object.assign({}) 解決data也模塊化后data不能深層復制的問題。
Object.assign不是深層復制。

7.在微信web開發(fā)者工具中一定要在動作->設置->勾上“不使用任何代理，勾選后直連網(wǎng)絡”，否則老是報“
Failed to load resource: net::ERR_NAME_NOT_RESOLVED”的bug：鏈接

8.每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現(xiàn)進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置app.json中的window配置項的內(nèi)容，頁面中配置項會覆蓋app.json的window中相同的配置項。頁面的.json只能設置window相關的配置項，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個鍵

9.data是在page中設置的，不是在app.js中的。不涉及渲染的可以不要放data里面。

10.Page.prototype.setData()變更數(shù)據(jù)同時更新頁面數(shù)據(jù)。
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時改變對應的 this.data 的值。直接修改 this.data 無效，無法改變頁面的狀態(tài)，還會造成數(shù)據(jù)不一致。單次設置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設置過多的數(shù)據(jù)。

11.wx:if 是惰性的，如果在初始渲染條件為false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。

會話管理

微信的網(wǎng)絡請求接口 wx.request() 沒有攜帶 Cookies，這讓傳統(tǒng)基于 Cookies 實現(xiàn)的會話管理不再適用。為了讓處理微信小程序的服務能夠識別會話，我們會話管理使用weapp-session-client。這需要服務端的支持?；驹硎前bwx.request并在 Header 上使用特殊的字段跟蹤。

使用時遇到的問題：
1.微信開發(fā)者工具報錯：Uncaught ReferenceError: regeneratorRuntime is not defined
原因是 Generator 函數(shù)不被支持。
解決方法：

• 微信開發(fā)者工具關閉ES6轉ES5
• 真正解決辦法，提供regeneratorRuntime

2.題外話：善用 Promise
本項目后端處理會話管理時要求發(fā)送請求時不能使用相同的 X-WX-Code發(fā)送多次全部header數(shù)據(jù)，RawData、Signature等，否則報錯。
所以使用weapp-session-client登錄的時候要等login返回之后再發(fā)送其他的請求，
小程序加載后立即順序執(zhí)行app.js和page.js里面的配置，但是wx request是異步的，所以有可能page中的請求開始執(zhí)行時app.js中的login還沒結束，就會導致bug。
可以使用個promise解決掉。

進階

1.擴展微信小程序框架功能

2.疑問：微信切換賬號會不會銷毀小程序

3.檢查TLS版本的問題
http://www.dongcoder.com/detail-410653.html
解決方法：微信開發(fā)者工具勾選開發(fā)時不檢查檢查TLS版本或后端配置

4.藍牙、震動的調(diào)用