微信小程序框架解析行業(yè)相關(guān)

1、微信小程序框架解析hongweiqu(渠宏偉)contents01 小程序介紹和演示02 小程序架構(gòu)03 小程序視圖層04 小程序邏輯層05 小程序開發(fā)經(jīng)驗(yàn)小程序介紹小程序的特點(diǎn)類web 不是html5媲美原生操作體驗(yàn)即用即走，隨手可得擁有離線能力基于微信跨平臺小程序演示企鵝電競小程序體驗(yàn)為什么那么快native預(yù)先加載一個(gè)webview當(dāng)打開指定頁面時(shí)，無需加載額外資源直接渲染返回顯示歷史view退出小程序，view狀態(tài)不銷毀page frame common lib user common js小程序入口掃碼進(jìn)入小程序搜索小程序發(fā)現(xiàn)-小程序小程序發(fā)送到桌面（android）小程序架構(gòu)小程序

2、架構(gòu)view（視圖層）pagepagepagewxmlwxssapp service （邏輯層）managerapinative（系統(tǒng)層）jsbridge微信能力離線存儲網(wǎng)絡(luò)請求dataeventdataevent小程序架構(gòu)viewapp servicecdnweb serverdataeventdataeventin wechatstorgeinit requestpackageajax requestjson datanetworkview (頁面視圖)view - wxml支持?jǐn)?shù)據(jù)綁定支持邏輯算術(shù)、運(yùn)算支持模板、引用支持添加事件（bindtap）wxml（weixin markup la

3、nguage）wxmljsvirtualdomdom treecompilerdatavirtual domview - wxss支持大部分css特性添加尺寸單位rpx，可根據(jù)屏幕寬度自適應(yīng)使用import語句可以導(dǎo)入外聯(lián)樣式表不支持多層選擇器-避免被組件內(nèi)結(jié)構(gòu)破壞wxss(weixin style sheets)wxssjscsscompilerwidth，dprview wxss selectors選擇器樣例樣例描述.ro選擇所有擁有 class=intro 的組件#id#firstname選擇擁有 id=firstname 的組件elementview選擇所有 view

4、 組件element, elementview, checkbox選擇所有文檔的 view 組件和所有的 checkbox 組件:afterview:after在 view 組件后邊插入內(nèi)容:beforeview:before在 view 組件前邊插入內(nèi)容view - component大類細(xì)分wxmlhtml視圖容器普通視圖容器viewdiv、ul、li、article、section滾動視圖scroll-view滑塊視圖swiper基礎(chǔ)內(nèi)容文本textspan、em、p圖標(biāo)iconspan、em、i進(jìn)度條progressdiv鏈接、導(dǎo)航鏈接、導(dǎo)航navigatora表單按鈕buttonbu

5、tton、input單選radioinput多選checkboxinput表單formform輸入框inputinput改進(jìn)表單可用性labellabel滾動選擇器pickerselect開關(guān)選擇器switchinput、div操作反饋底部菜單action-sheetdiv、ul彈窗modaldivtoasttoastdiv加載loadingimg、span、div媒體圖片imageimg音頻audioaudio視頻videovideo地圖地圖mapmap畫布畫布canvascanvasview - component小程序的組件基于web component標(biāo)準(zhǔn)使用polymer框架實(shí)現(xiàn)we

6、b componentview - native componentnative組件層在webview層之上app service(邏輯層)app service邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋1、app( ) 小程序的入口；page( ) 頁面的入口3、提供豐富的 api，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。4、每個(gè)頁面有獨(dú)立的作用域，并提供模塊化能力。5、數(shù)據(jù)綁定、事件分發(fā)、生命周期管理、路由管理運(yùn)行環(huán)境ios - jscoreandroid - x5 js解析器devtool - nwjs chrome 內(nèi)核app service - bindinga

7、pp service - life cylcenativelaunchonlaunchapp serviceviewinitpageinitrenderonloadonshowonreadyhandleruser eventeventnotifysend init datare-rendersend datanew viewnew pageonhideonshowrouterouteapp service - apiapi通過jsbridge和native 進(jìn)行通信分類名稱api網(wǎng)絡(luò)發(fā)起請求request上傳下載uploadfile / downloadfilewebsocketconnect

8、socket / onsocketopen / onsocketerror / sendsocketmessage / onsocketmessage / closesocket / onsocketclose媒體圖片chooseimage / previewimage / getimageinfo視頻choosevideo音頻playvoice / pausevoice / stopvoice錄音startrecord / stoprecord文件savefile / getsavedfilelist / getsavedfileinfo / removesavedfile數(shù)據(jù)數(shù)據(jù)緩存set

9、storage / getstorage / removestorage / clearstorage位置獲取位置getlocation查看位置openlocation設(shè)備網(wǎng)絡(luò)狀態(tài)getnetworktype系統(tǒng)信息getsysteminfo重力感應(yīng)onaccelerometerchange羅盤oncompasschange撥打電話makephonecall界面canvasdrawcanvas / drawcanvas / canvastotempfilepath動畫createanimation導(dǎo)航、設(shè)置導(dǎo)航條navigateto / redirectto / navigateback交互反

10、饋showtoast / showmodal / showactionsheet開放接口登錄login用戶信息getuserinfo微信支付requestpayment模板消息app service - routernavigateto(object)保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用navigateback可以返回到原頁面。頁面路徑只能是五層redirectto(object)關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。navigateback(object)關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。可通過 getcurrentpages() 獲取當(dāng)前的頁面棧，決定需要返回幾層。小程序開發(fā)經(jīng)驗(yàn)

11、小程序可以借鑒的優(yōu)點(diǎn)1、提前新建webview，準(zhǔn)備新頁面渲染。2、view層和邏輯層分離，通過數(shù)據(jù)驅(qū)動，不直接操作dom。3、使用virtual dom，進(jìn)行局部更新。4、全部使用https，確保傳輸中安全。5、前端組件化開發(fā)。6、加入rpx單位，隔離設(shè)備尺寸，方便開發(fā)。小程序存在的問題1、小程序仍然使用webview渲染，并非原生渲染2、需要獨(dú)立開發(fā)，不能在非微信環(huán)境運(yùn)行。3、開發(fā)者不可以擴(kuò)展新組件。4、服務(wù)端接口返回的頭無法執(zhí)行，比如：set-cookie。5、依賴瀏覽器環(huán)境的js庫不能使用，因?yàn)槭莏score執(zhí)行的，沒有window、document對象。6、wxss中無法使用本地（圖

12、片、字體等）。7、wxss轉(zhuǎn)化成js 而不是css，為了兼容rpx。8、wxss不支持級聯(lián)選擇器。9、小程序無法打開頁面，無法拉起app。脫離微信的“小程序”：pwa 漸進(jìn)式應(yīng)用pwa - progressive web apppwa 特點(diǎn) 漸進(jìn)增強(qiáng) - 支持的新特性的瀏覽器獲得更好的體驗(yàn)，不支持的保持原來的體驗(yàn)。 離線訪問 - 通過 service workers 可以在離線或者網(wǎng)速差的環(huán)境下工作。 類原生應(yīng)用 - 使用app shell model做到原生應(yīng)用般的體驗(yàn)。 可安裝 - 允許用戶保留對他們有用的應(yīng)用在主屏幕上，不需要通過應(yīng)用商店。 容易分享 - 通過 url 可以輕松分享應(yīng)用。 持續(xù)更新 - 受益于 service worker 的更新進(jìn)程，應(yīng)用能夠始終保持更新。 安全 - 通過 https 來提供服務(wù)來防止網(wǎng)絡(luò)窺探，保證內(nèi)容不被篡改。 可搜索 - 得益于 w3c manifests 元數(shù)據(jù)和 service worker 的登記，讓搜索引擎能夠找到 web 應(yīng)用。 再次訪問 - 通過消息推送等特性讓用戶再次訪問變得容易。pwa - web app manifest使web更像nativeweb app manifest以json的格式定義web 應(yīng)用的相關(guān)配置（應(yīng)用名稱、圖標(biāo)或圖像連接、啟動url、自定義特性