項(xiàng)目是否適合移植到小程序上扒寄？
小程序由于微信提供了一些組件完沪，在微信中的一些體驗(yàn)確實(shí)不錯(cuò)，對(duì)于開(kāi)發(fā)來(lái)說(shuō)辅斟，由數(shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā)模式也是挺爽的脚囊。
概要介紹
其實(shí)就是類似于 VUE REACT 的 MVVM 模式龟糕，專注于數(shù)據(jù)和邏輯。
小程序開(kāi)發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單悔耘、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)讲岁。
框架提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架衬以，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)缓艳，可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
模板層級(jí)
請(qǐng)求包裝
用戶會(huì)話處理
實(shí)踐得到的經(jīng)驗(yàn)
規(guī)則
1.目前打包后的文件不能超過(guò) 4M泄鹏，否則不能上傳到微信服務(wù)器郎任。
小程序不支持的
1.不支持 sass 語(yǔ)法
2.不支持 window、document备籽，不能使用相關(guān)的庫(kù)，如 jQuery、PreventMoveOverScroll车猬。
3.不支持直接使用 svg 標(biāo)簽開(kāi)發(fā)霉猛。image 的 src 放遠(yuǎn)程 svg 可以，background-image 里也可以珠闰。
但是可以使用 canvas 標(biāo)簽（canvas坑：position absolute的層蓋不住canvas）惜浅，可以使用的庫(kù)：wx-charts(有坑，放在 app.js 中然后在 page 中引用的話伏嗜，找不到 ringChart 上面的函數(shù)坛悉，如 ringChart.addEventListener。要直接在 page 中引庫(kù)承绸。)裸影。
4.不支持阻止默認(rèn)事件，沒(méi)有preventDefault军熏。
5.沒(méi)有br?標(biāo)簽轩猩。
6.不支持table?表格。
7.不能使用 ?來(lái)增大文字間距荡澎。
8.小程序的xxx.wxss?文件 font-face 的 url 不接受 http 地址作為參數(shù),可以接受base64,因此可以先將字體文件下載后,轉(zhuǎn)換為 base64均践，然后再引用。鏈接摩幔。
9.像素單位為 rpx
新特性
2.text?標(biāo)簽認(rèn) \n 換行彤委，不能包裹
?標(biāo)簽，會(huì)直接輸出出來(lái)或衡，有點(diǎn)類似textarea焦影。
3.小程序中 :nth-child(n) 是從 0 開(kāi)始的。
4.switch?標(biāo)簽薇宠。但是不能改變大小樣式偷办，像老radio?標(biāo)簽一樣討厭。
5.picker?標(biāo)簽澄港。但是在開(kāi)發(fā)者工具中選項(xiàng)不會(huì)循環(huán)椒涯，在安卓手機(jī)預(yù)覽中選項(xiàng)會(huì)循環(huán)。
6.scroll-view?標(biāo)簽回梧。有滾動(dòng)條的盒子废岂。要想在進(jìn)入頁(yè)面的時(shí)候自動(dòng)滾動(dòng)到某處，可以使用 scroll-view 的 scroll-into-view 屬性狱意，不過(guò)一定要在 scroll-view 存在后設(shè)置才會(huì)生效湖苞，尤其是通過(guò) template 引用的時(shí)候，比如同時(shí)通過(guò) setData 設(shè)置使用該 template 和 scroll-into-view 的值详囤，并不會(huì)使?jié)L動(dòng)生效财骨。
7.關(guān)于屏幕下拉露底：Android 不會(huì)镐作，iPhone 會(huì)÷÷幔可以通過(guò)配置解決：disableScroll Boolean false 設(shè)置為 true 則頁(yè)面整體不能上下滾動(dòng)该贾；只在 page.json 中有效，無(wú)法在 app.json 中設(shè)置該項(xiàng)捌臊。鏈接杨蛋。
模板的作用域：模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)理澎。
9.在功能按鈕上使用catchtap?防止冒泡
10.hidden?參數(shù)逞力，控制蒙版的利器
小竅門
1.關(guān)于下拉刷新
要在 page.json 中設(shè)置enablePullDownRefresh: true
onPullDownRefresh?內(nèi)要手動(dòng)stopPullDownRefresh，否則一直在點(diǎn)點(diǎn)點(diǎn)（loading）糠爬。
2.page的onload 函數(shù)中有參數(shù) options 可以獲取路徑的 query
3.小程序的支付和微信的支付不是一個(gè) appid寇荧，需要后端新開(kāi)發(fā)下單接口
4.wxml 最好在開(kāi)發(fā)者工具編輯（有提示）。js秩铆， wxss可以在熟悉的編輯器編輯砚亭。
5.小程序中如果賦予的新值是 undefined 的話，根本不會(huì)進(jìn)行賦值殴玛，也不會(huì)覆蓋之前的值捅膘。如：
app.setData({
isPaperCollected:?finishedQuizList['id'+quizID]?||?false
})
6.通過(guò)多次使用 Object.assign({}) 解決data也模塊化后 data 不能深層復(fù)制的問(wèn)題。
Object.assign 不是深層復(fù)制滚粟。
7.在微信web開(kāi)發(fā)者工具中一定要在動(dòng)作->設(shè)置->勾上“不使用任何代理寻仗，勾選后直連網(wǎng)絡(luò)”，否則老是報(bào)“
Failed to load resource: net::ERR_NAME_NOT_RESOLVED”的bug：鏈接
8.每一個(gè)小程序頁(yè)面也可以使用 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置凡壤。 頁(yè)面的配置比 app.json 全局配置簡(jiǎn)單得多署尤，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)亚侠。頁(yè)面的 .json 只能設(shè)置 window 相關(guān)的配置項(xiàng)曹体，以決定本頁(yè)面的窗口表現(xiàn)，所以無(wú)需寫window這個(gè)鍵硝烂。鏈接箕别。
9.data是在page中設(shè)置的，不是在 app.js 中的滞谢。不涉及渲染的可以不要放 data 里面串稀。
10.Page.prototype.setData()變更數(shù)據(jù)同時(shí)更新頁(yè)面數(shù)據(jù)。
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層狮杨，同時(shí)改變對(duì)應(yīng)的 this.data 的值母截。直接修改 this.data 無(wú)效，無(wú)法改變頁(yè)面的狀態(tài)橄教，還會(huì)造成數(shù)據(jù)不一致清寇。單次設(shè)置的數(shù)據(jù)不能超過(guò) 1024kB喘漏，請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。
11.wx:if是惰性的颗管，如果在初始渲染條件為false陷遮，框架什么也不做滓走，在條件第一次變成真的時(shí)候才開(kāi)始局部渲染垦江。
會(huì)話管理
微信的網(wǎng)絡(luò)請(qǐng)求接口 wx.request() 沒(méi)有攜帶 Cookies，這讓傳統(tǒng)基于 Cookies 實(shí)現(xiàn)的會(huì)話管理不再適用搅方。為了讓處理微信小程序的服務(wù)能夠識(shí)別會(huì)話比吭，我們會(huì)話管理使用weapp-session-client。這需要服務(wù)端的支持姨涡●锰伲基本原理是包裝 wx.request 并在 Header 上使用特殊的字段跟蹤。
使用時(shí)遇到的問(wèn)題：
1.微信開(kāi)發(fā)者工具報(bào)錯(cuò)：Uncaught ReferenceError: regeneratorRuntime is not defined
原因是 Generator 函數(shù)不被支持涛漂。
* 微信開(kāi)發(fā)者工具關(guān)閉ES6轉(zhuǎn)ES5
* 真正解決辦法赏表，提供 regeneratorRuntime鏈接1--鏈接2
2.題外話：善用 Promise
本項(xiàng)目后端處理會(huì)話管理時(shí)要求發(fā)送請(qǐng)求時(shí)不能使用相同的 X-WX-Code發(fā)送多次全部header數(shù)據(jù)，RawData匈仗、Signature等瓢剿，否則報(bào)錯(cuò)。
所以使用 weapp-session-client 登錄的時(shí)候要等login返回之后再發(fā)送其他的請(qǐng)求悠轩，
小程序加載后立即順序執(zhí)行 app.js 和 page.js 里面的配置间狂，但是 wx request 是異步的，所以有可能 page 中的請(qǐng)求開(kāi)始執(zhí)行時(shí) app.js 中的 login 還沒(méi)結(jié)束火架，就會(huì)導(dǎo)致 bug鉴象。
可以使用個(gè) promise 解決掉。
進(jìn)階
2.疑問(wèn)：微信切換賬號(hào)會(huì)不會(huì)銷毀小程序
3.檢查TLS版本的問(wèn)題
http://www.dongcoder.com/detail-410653.html
解決方法：微信開(kāi)發(fā)者工具勾選開(kāi)發(fā)時(shí)不檢查檢查TLS版本或后端配置
4.藍(lán)牙何鸡、震動(dòng)的調(diào)用
5.蒙版處理
