 
-
視圖層和邏輯層分離，通過(guò)數(shù)據(jù)驅(qū)動(dòng)，事件交互，不直接操作DOM
-
視圖層負(fù)責(zé)渲染頁(yè)面結(jié)構(gòu)，邏輯層負(fù)責(zé)邏輯處理、數(shù)據(jù)請(qǐng)求、接口調(diào)用等
-
視圖層與邏輯層通過(guò)數(shù)據(jù)和事件進(jìn)行通信，邏輯層提供數(shù)據(jù)給視圖層，視圖層通過(guò)綁定/捕獲事件發(fā)起交互讓邏輯層處理
-
視圖使用WebView渲染，JS由JSCore(IOS)/X5(Android)/nmjs(DevTool)渲染解析
-
JSBridge下架起上層開(kāi)發(fā)與Native（系統(tǒng)層）的橋梁，使得小程序可通過(guò)API使用原生的功能，且部分組件為原生組件實(shí)現(xiàn)，從而有良好體驗(yàn)
附：瀏覽器內(nèi)核了解
組件
wxml為微信開(kāi)發(fā)的一種標(biāo)記語(yǔ)言，只能使用其指定的組件（view, text, navigator, image, button等，詳見(jiàn)文檔<組件>）。
View - Component
View - Native Component
wxss樣式表
-
支持大部分CSS特性
-
不支持多層選擇器-避免被組件內(nèi)結(jié)構(gòu)破壞
-
style：style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。
<view style="color:{{color}};" />
拓展：
-
尺寸單位：添加尺寸單位rpx，可根據(jù)屏幕寬度自適應(yīng)
-
樣式導(dǎo)入：使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表
生命周期
微信小程序生命周期分“應(yīng)用生命周期”和“頁(yè)面生命周期”。
應(yīng)用生命周期含onLaunch, onShow, onHide狀態(tài)，onLaunch, onShow可獲取打開(kāi)小程序時(shí)的相關(guān)參數(shù)path, query, scene， shareTicket， referrerInfo，注冊(cè)為App({})，一個(gè)小程序只有一個(gè)App({})。
頁(yè)面生命周期含onLoad, onShow, onHide, onReady, onUnload，onLoad可獲取其他頁(yè)面打開(kāi)當(dāng)前頁(yè)面時(shí)所所調(diào)用的query參數(shù)，注冊(cè)為Page({})，每個(gè)頁(yè)面有且必須有一個(gè)Page({})。
不清楚的地方多多重復(fù)查看文檔說(shuō)明：注冊(cè)程序，注冊(cè)頁(yè)面
頁(yè)面棧：頁(yè)面導(dǎo)航
getCurrentPages(): 獲取當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。
Tip：不要嘗試修改頁(yè)面棧，會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤。
頁(yè)面深度最多為5層，也就是頁(yè)面棧里最多只能有5個(gè)頁(yè)面，超過(guò)的話調(diào)用導(dǎo)航就會(huì)失效，因此，要選用合適的導(dǎo)航方式，及時(shí)釋放頁(yè)面。
navigate：A -> B 其頁(yè)面棧依次為：A - AB
redirect: A -> B 其頁(yè)面棧依次為：A - B
不同導(dǎo)航方式致頁(yè)面棧的變化圖解可查看這篇文章：小程序基礎(chǔ)篇之頁(yè)面路由
數(shù)據(jù)通信機(jī)制
-
數(shù)據(jù)單向綁定：使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)，動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data，可以通過(guò)setData({})方法修改數(shù)據(jù)。
<view>{{ message }}</view>
-
事件綁定：寫法同組件的屬性，以 key、value 的形式，key 以bind或catch開(kāi)頭，然后跟上事件的類型，如bindtap, catchtouchstart，value 是一個(gè)字符串，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)，函數(shù)參數(shù)則通過(guò)在組件上加data-域。
<view data-param=”value” bindtap=”showModal”></view>
詳細(xì)的說(shuō)明還是查閱文檔：注冊(cè)頁(yè)面：著重看變量和事件部分， 視圖層-WXML-數(shù)據(jù)綁定，視圖層-WXML-事件
提醒一下，熟悉vuejs的朋友應(yīng)該很容易上手，略讀一遍文檔就基本明白了，但要留意下數(shù)據(jù)不是雙向綁定的，改變變量值需要通過(guò)setData({})，事件傳參是通過(guò)data域，遍歷及條件語(yǔ)句中，變量/語(yǔ)句仍需帶{{ }}等，總之多看文檔，避免踩這種用法有誤的坑。
|
