微信小程序在周六晚上終于正式放出了開發(fā)文檔粹舵，
雖然沒(méi)有內(nèi)測(cè)賬號(hào)無(wú)法在公眾平臺(tái)上內(nèi)測(cè)，
但根據(jù)開發(fā)文檔以及開發(fā)工具的模擬器也終于可以探一下廬山真面目了~

根據(jù)之前參與的一個(gè)嘗試用web技術(shù)編程N(yùn)ativeUI項(xiàng)目的一些經(jīng)驗(yàn)及遇到的問(wèn)題强经，
對(duì)微信小程序參照開發(fā)文檔及模擬器中的一些嘗試，總結(jié)下看到的一些特性吧

整個(gè)小程序應(yīng)用由多個(gè)Page(頁(yè)面)組成寺渗，先從Page開始：

Page

• 分為兩層：視圖層（WXML(HTML變體) + WXSS(CSS變體)） + 邏輯層(跑在JsCore里的JavaScript)
• 除canvas外匿情，邏輯層無(wú)任何直接操作視圖層的API，僅通過(guò) 模板+“數(shù)據(jù)綁定” 來(lái)控制視圖層

模板

• 模板功能
  • 類“HTML”的標(biāo)簽語(yǔ)言來(lái)描述視圖
  • 類似vue信殊、angular等炬称，通過(guò)“指令”強(qiáng)化模板
  • 提供雙大括號(hào)(Mustache)風(fēng)格的“數(shù)據(jù)綁定”
• 組織管理
  • 提供了具有獨(dú)立作用域的template來(lái)定義模板片斷以供其他處的模板使用
  • WXML文件中可以引入其他WXML文件

其中模板功能方面具體來(lái)看：

標(biāo)簽指令

• 僅提供了'循環(huán)'與'條件'兩種控制結(jié)構(gòu)的指令：
  • wx:for、wx:if涡拘、wx:elif玲躯、wx:else

“數(shù)據(jù)綁定”

• 所有邏輯層對(duì)視圖層的控制均僅通過(guò)“數(shù)據(jù)綁定”完成，包括動(dòng)畫
• 所有數(shù)據(jù)綁定均包裹在雙大括號(hào)(Mustache)即{{ }}中
  • 支持在文本鲸伴、也支持在屬性值中使用府蔗。另外條件、循環(huán)指令中表達(dá)式也需由雙大括號(hào)包裹
• 數(shù)據(jù)綁定為單向綁定
  • 模板可使用邏輯層通過(guò)接口指定的數(shù)據(jù)
    • 初始化時(shí)傳入的數(shù)據(jù)對(duì)象汞窗，在初始化結(jié)束之后便再與視圖層無(wú)任何關(guān)聯(lián)
      • 即改變?cè)瓟?shù)據(jù)對(duì)象上的屬性也并始終不會(huì)更新至視圖層
    • 更新數(shù)據(jù)需要顯式地調(diào)用setData接口
      • 更新為局部更新姓赤，即本次未設(shè)置的數(shù)據(jù)值則沿用舊有值不改變
    • 視圖層的處理應(yīng)該是完全在native端(而非js端)完成，因此數(shù)據(jù)對(duì)象也未與js環(huán)境共享仲吏、需要手動(dòng)調(diào)用接口設(shè)置才能更新
  • 支持部分簡(jiǎn)單表達(dá)式
    • 支持算數(shù)表達(dá)式不铆、關(guān)系表達(dá)式、字符串連接表達(dá)式裹唆、三元表達(dá)式
    • 不能如angular誓斥、vue中支持函數(shù)/方法調(diào)用
• 用戶輸入的收集/獲取：
  • 未提供類似angular许帐、vue中的雙向數(shù)據(jù)綁定劳坑，而是類似react的方式僅通過(guò)事件對(duì)象接收用戶輸入
• 此外相比其他類似的模板增強(qiáng)方案還增加了比較便捷的數(shù)據(jù)重組功能：
  • 可以在雙大括號(hào)(Mustache)中將邏輯層提供的數(shù)據(jù)進(jìn)行重組，構(gòu)成新的數(shù)組或?qū)ο笠苑奖闶褂?/li>

樣式

• 支持頁(yè)面級(jí)及應(yīng)用級(jí)的WXSS文件通過(guò)選擇器指明樣式成畦，也支持元素內(nèi)聯(lián)style屬性進(jìn)行更高優(yōu)先級(jí)的覆蓋
• 猜測(cè)布局渲染同樣基于facebook的css-layout垢袱，以提供flex為主的布局
  • 但在css-layout提供的flex布局基礎(chǔ)之上攻柠，結(jié)合native的文字排版提供了支持折行/多行的行內(nèi)環(huán)境影斑，從而支持了display: inline惠遏、display: inline-block，如下圖：
    
    
    
    行內(nèi)環(huán)境排版示例
  • 此外拄养，小程序框架對(duì)樣式非布局方面的處理應(yīng)還有(css-layout中均未提供)：代理某些native元素的屬性設(shè)置(如TextView的color)离斩，并額外提供了邊框與背景的繪制(如同@袁煒之前在o2o框架項(xiàng)目中所做)、子元素對(duì)父元素的樣式繼承等

    • 圓角支持同樣僅在于繪制，而不會(huì)對(duì)子元素進(jìn)行截?cái)?/p>
      
• 選擇器方面
  • 只支持element跛梗、class寻馏、id及逗號(hào)選擇器
  • 目前不支持后代等選擇器，這樣應(yīng)該很大程度地減少了復(fù)雜度及性能消耗
  • 另外竟然額外支持了::before與::after兩個(gè)偽元素選擇器

事件

邏輯層到視圖層的控制完全通過(guò)“數(shù)據(jù)綁定”茄袖，視圖層至邏輯層的反饋則僅有視圖元素的事件(沒(méi)有任何類似DOM的對(duì)象模型/接口)

• 通過(guò)標(biāo)簽屬性的方式在WXML中注冊(cè)事件回調(diào)方法
• 支持事件冒泡操软，即模擬了HTML中事件的冒泡階段、但未模擬事件捕獲階段
• 而是否阻止繼續(xù)冒泡宪祥，必須在監(jiān)聽(tīng)時(shí)就要確定
  • 通過(guò)bindxx為不截獲冒泡聂薪，而通過(guò)catchxx為截獲
  • 原因應(yīng)是事件的派發(fā)也完全由native側(cè)完成，故無(wú)法如web一樣在js對(duì)事件處理的過(guò)程中設(shè)置是否阻止

視圖組件

印象比較深刻：組件相當(dāng)?shù)厝?/strong>蝗羊〔匕模看上去似乎是做了充分的準(zhǔn)備、也相當(dāng)?shù)刂匾曇摇⒄娴念A(yù)備要用小程序掀起一場(chǎng)波瀾