小程序入門
這兩周自己在研究小程序连霉，由于之前也未曾接觸過這一方面，為了加深自己的印象，決定寫一篇學(xué)習(xí)筆記來記錄自己的學(xué)習(xí)內(nèi)容轰坊。
簡介
小程序的來源
小程序是針對(duì)移動(dòng)互聯(lián)網(wǎng)的環(huán)境而出現(xiàn)的一款產(chǎn)品。最初由騰訊微信提出祟印，而后阿里與百度均推出了自己的小程序架構(gòu)肴沫。
張小龍?jiān)谔岢鲂〕绦蛑酰秃苊鞔_地提出了小程序的概念“用完即走蕴忆，唾手可得”颤芬。與需要下載安裝的大型的app來說，小程序應(yīng)當(dāng)是輕量迅捷的應(yīng)用套鹅。而網(wǎng)頁恰恰好與這個(gè)要求有一定的共性站蝠。
從技術(shù)層面上講，傳統(tǒng)網(wǎng)頁在移動(dòng)端的網(wǎng)頁組件webview中的表現(xiàn)并不那么令人滿意卓鹿，主要反映在頁面白屏菱魔、切換生硬、點(diǎn)擊反饋遲滯吟孙。為了解決這個(gè)問題澜倦，微信一開始推出的是JS-SDK網(wǎng)頁開發(fā)工具包。這個(gè)工具包優(yōu)化一部分體驗(yàn)拔疚，但是這并沒解決本質(zhì)問題肥隆。
微信迫切地需要一個(gè)能夠更簡單高效、更快更貼近原生的系統(tǒng)來展示這一理念稚失，而這就是小程序栋艳。
小程序與網(wǎng)頁的區(qū)別
在微信官方教程里有詳細(xì)解釋過，其本質(zhì)區(qū)別在于小程序分離了邏輯層和渲染層句各，使二者運(yùn)行在不同的線程中吸占，其運(yùn)行環(huán)境與API與傳統(tǒng)十分不一樣。
小程序框架本身就能夠快速加載和渲染凿宾，并且封裝好了許多微信內(nèi)部API矾屯，使得用戶不需要去處理瑣碎的工作，同時(shí)還能使用更多的數(shù)據(jù)初厚。
小程序的架構(gòu)
JSON
小程序的靜態(tài)配置(如頁面結(jié)構(gòu)等)是用JSON編寫件蚕，在運(yùn)行過程中無法改動(dòng)此文件孙技。
WXML
WXML是類似HTML的標(biāo)簽語言，用途是組織頁面的基本架構(gòu)排作。其標(biāo)簽與HTML有較大不同牵啦，主要原因是將大多數(shù)常用結(jié)構(gòu)封裝起來，更加易于人們使用妄痪。
與HTML不同哈雏，WXML中還可以不僅可以進(jìn)行數(shù)據(jù)綁定(利用雙大括號(hào)使數(shù)據(jù)占位)，還可以進(jìn)行簡單的邏輯運(yùn)算和條件判斷衫生，還支持列表渲染裳瘪。同時(shí)WXML還支持模版功能，即定義好模版 template 后可以在其他地方調(diào)用罪针。
同時(shí)WXML的引用方式有 import 與 include 兩種彭羹。前者只會(huì)導(dǎo)入某個(gè)文件中定義的 template 部分，不會(huì)導(dǎo)入在此文件中導(dǎo)入的 template 部分泪酱，即不會(huì)遞歸導(dǎo)入皆怕。后者include 可以將目標(biāo)文件中除了<template/> <wxs/>外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置西篓。
WXSS
和WXML與HTML的關(guān)系一樣，WXSS也與CSS的作用類似憋活，但是為了更適合小程序開發(fā)岂津，WXSS對(duì)CSS進(jìn)行了補(bǔ)充和修改。
WXSS根據(jù)位置分為三種：
- 項(xiàng)目公共樣式
- 頁面樣式
- 其他樣式
項(xiàng)目公共樣式文件處于根目錄下悦即，頁面樣式文件與頁面文件同名同級(jí)吮成，其他樣式可以被前兩者引用。
WXSS的尺寸單位為rpx辜梳，和android中的dp有異曲同工之處粱甫，但是rpx的轉(zhuǎn)換更為細(xì)致。
JS
小程序的JS同樣遵循ECMAScript標(biāo)準(zhǔn)作瞄，但與瀏覽器中和nodejs中使用的JavaScript最大的不同在于執(zhí)行對(duì)象和運(yùn)行環(huán)境茶宵，所以對(duì)后兩者的用法不能照搬到小程序中。
小程序宿主環(huán)境
渲染層和邏輯層
上文提及過小程序的邏輯層與渲染層是分開運(yùn)行在不同線程宗挥，而數(shù)據(jù)綁定則是為了讓他們更快速地通信乌庶。在數(shù)據(jù)變化后，邏輯層構(gòu)造出來一個(gè)新的結(jié)構(gòu)樹契耿，與原結(jié)構(gòu)樹對(duì)比瞒大，渲染層則對(duì)比較后不一樣的地方進(jìn)行重新渲染。
程序(App)和頁面(Page)
小程序中的這兩個(gè)概念搪桂，如果對(duì)于寫過安卓的人來說可能會(huì)覺得很眼熟透敌。其生命周期的概念與應(yīng)用和activity的生命周期的概念頗有相似之處。但是小程序的使用更加復(fù)雜一點(diǎn)，場景分類更加細(xì)致酗电，還引入了場景值的概念魄藕。
同樣的，頁面也有頁面棧的概念顾瞻，不過頁面棧的最大值被設(shè)為了10泼疑，這與activity不一樣。同樣頁面之間也有很多方式進(jìn)行跳轉(zhuǎn)荷荤，與activity的啟動(dòng)方式有些類似退渗。
事件冒泡與捕獲
這一塊與安卓中的父子控件的綁定事件的關(guān)系有些類似贮泞，可以參考理解鸠蚪。
小程序底層框架
雙線程模型
傳統(tǒng)網(wǎng)頁是使用單線程進(jìn)行艰额，意味著渲染和邏輯處理不能同時(shí)進(jìn)行锋谐。而小程序選用的是雙線程模型歉眷，將渲染層與邏輯層分離钓株，使其二者分別在不同的線程中運(yùn)行戴陡。
如果了解過app的大概會(huì)知道有三種分類：
- Web App
- Native App
- Hybrid App
他們的之間的性能和易適配程度也是逐漸不同的褂萧，最明顯提現(xiàn)性能的就是渲染表現(xiàn)稻薇。而他們渲染方式十分不一樣嫂冻。
小程序?qū)Ρ冗^三種不同的渲染方式后，決定采用混合渲染的方式塞椎，將簡單的渲染交給web技術(shù)桨仿，而復(fù)雜的則通過客戶端的api進(jìn)行處理。
而由于web實(shí)在太過于靈活案狠，并且JavaScript腳本可以做到的事情太多了服傍。為了安全起見，小程序決定提供一個(gè)不包含任何瀏覽器接口骂铁、純粹解釋JavaScript的沙箱環(huán)境吹零。由于客戶端擁有單獨(dú)的JavaScript解釋引擎，所以可以將JavaScript單獨(dú)放置到一個(gè)線程中去運(yùn)行拉庵，里面所有的js代碼都是小程序的業(yè)務(wù)邏輯灿椅，即邏輯層。而渲染所在的線程則是渲染層名段。
不過由于有不同線程之間的通信問題阱扬，所以小程序中間都是異步，并且存在延時(shí)伸辟，需要準(zhǔn)備考慮其時(shí)序問題麻惶，通常是需要通過回調(diào)來確保時(shí)序。
組件系統(tǒng)
如果繼續(xù)使用HTML信夫，那么小程序?qū)o法進(jìn)行安全管控窃蹋。同時(shí)HTML的能力有限卡啰，且標(biāo)簽眾多、貼近底層警没，入門門檻高匈辱，不利于快速開發(fā)。所以小程序使用了一套自己設(shè)計(jì)的組件杀迹。在小程序架構(gòu)里無法實(shí)現(xiàn)或者實(shí)現(xiàn)不好某類功能的亡脸，都會(huì)包含在這套組件里面。同時(shí)树酪，小程序也支持自定義組件浅碾。
不同組件實(shí)例間的通信有WXML屬性值傳遞、事件系統(tǒng)续语、selectComponent和relations等方式垂谢。其中，WXML屬性值傳遞是從父組件向子組件的基本通信方式疮茄，而事件系統(tǒng)是從子組件向父組件的基本通信方式滥朱。
小程序還有一部分組件屬于原生組件，這部分組件是由客戶端渲染的組件力试。其渲染性能比webview要好徙邻，體驗(yàn)更好，能力更強(qiáng)畸裳。
