小程序開發(fā)實(shí)踐總結(jié)
1、css樣式不能引用本地資源,只能引用線上資源(background-image),引用本地資源只能用image標(biāo)簽沪悲。
2昔善、{{}}不能執(zhí)行函數(shù)方法，{{}}只支持基本的簡(jiǎn)單運(yùn)算和ES6擴(kuò)展運(yùn)算符（...）人柿。如價(jià)格格式化這種常用的處理,只能在js代碼中處理好后再模板中渲染柴墩。例：this.setData({price:this.formatPrice(this.data.price)}).
3、可以通過wxs模板解決{{}}中不能執(zhí)行函數(shù)的問題凫岖〗龋可以做到模擬vue.js中過濾器的功能。
4哥放、小程序不支持分享鏈接到朋友圈扎阶，暫時(shí)的通用做法是生成保存有頁面小程序碼的圖片到本地相冊(cè)。又用戶自行發(fā)朋友圈轉(zhuǎn)發(fā)婶芭。前端可以利用canvas來實(shí)現(xiàn)东臀，減輕服務(wù)端壓力。但是會(huì)有圖片鋸齒不清晰的問題犀农。建議預(yù)覽圖和保存到真機(jī)的圖片采用不同的尺寸惰赋。保存在真機(jī)的圖片按照750的寬度實(shí)現(xiàn)。相比于預(yù)覽圖要大一些呵哨，這樣保存到手機(jī)的圖片會(huì)清晰很多赁濒。
5、小程序布局采用rpx單位孟害，UI稿按照750的寬度出圖拒炎。可直接使用UI稿的尺寸挨务。但是在某些機(jī)型上1rpx會(huì)無法顯示击你∮褡椋可以用H5的方式實(shí)現(xiàn)1px效果。
6丁侄、iphoneX吸底按鈕的適配惯雳，可以用媒體查詢獲取wx.getSystemInfo獲取機(jī)型。
7鸿摇、頁面A -> 頁面B石景，頁面B的操作觸發(fā)了頁面A的數(shù)據(jù)更新。返回更新頁面A的數(shù)據(jù)拙吉，通常有兩種方式來實(shí)現(xiàn)(我司采用了方案二)：@1潮孽、在頁面A監(jiān)聽onShow事件，在onShow事件觸發(fā)時(shí)無腦更新頁面數(shù)據(jù)筷黔。@2恩商、通過EventBus來實(shí)現(xiàn)跨頁面通信。
8必逆、復(fù)雜組件的開發(fā)，省市區(qū)三級(jí)聯(lián)動(dòng)選擇器的開發(fā)揽乱，獲取微信地址庫的地址的編碼和業(yè)務(wù)采用的省市區(qū)編碼對(duì)不上名眉。
9、小程序使用了雙線程模型：小程序的渲染層和邏輯層是是分開的凰棉，邏輯層通過JSCore來解析和執(zhí)行损拢，渲染層是通過webview來渲染。之前的常見Hybrid離線包的方案大多使用webview同時(shí)實(shí)現(xiàn)頁面的渲染和js的解析撒犀。這樣做的的結(jié)果就是隔離了js的runtime福压，在js代碼中無法操作webview中的DOM對(duì)象和BOM對(duì)象。Js無法做任何和頁面渲染有關(guān)的操作或舞。只能通過setData把數(shù)據(jù)從JsCore傳遞到webview荆姆。
10、獨(dú)立的JS運(yùn)行環(huán)境映凳，相比于webview同時(shí)處理頁面的渲染和JS的執(zhí)行帶來了一些好處：@1胆筒、js無法動(dòng)態(tài)的在頁面插入節(jié)點(diǎn)和干預(yù)頁面的渲染，解決了安全和管控的問題诈豌，否則小程序的上線審核就變得毫無意義仆救。@2、渲染層和邏輯層的分離矫渔，減輕了webview的壓力彤蔽，js的執(zhí)行和頁面的渲染可以并行，不會(huì)出現(xiàn)js執(zhí)行卡主頁面渲染的情況庙洼。@3顿痪、多個(gè)頁面可以共享一個(gè)JS運(yùn)行環(huán)境镊辕，數(shù)據(jù)很方便的共享，整個(gè)小程序的生命周期共享同一個(gè)上下文员魏，接近App的體驗(yàn)丑蛤。壞處在于：多了很多webview和JSCore數(shù)據(jù)傳輸?shù)南模瑪?shù)據(jù)需要序列化成字符串格式進(jìn)行傳輸撕阎。
作者：Darko?
segmentfault.com/a/1190000016027966
