本期想要和大家分享下大眾點(diǎn)評(píng)點(diǎn)餐小程序中View視圖層的一些開發(fā)經(jīng)驗(yàn)。本文部分示例來自于「大眾點(diǎn)評(píng)點(diǎn)餐」小程序的菜單頁面。

 

 

頁面代碼結(jié)構(gòu)為：

menu
├── menu.html
├── menu.js
├── menu.json
└── menu.less

我們將要說的小程序的View視圖層是由WXML(menu.html) 與 WXSS(menu.less) 兩大部分組成，由視圖最小單元 - 組件來進(jìn)行展示。視圖層將邏輯層的數(shù)據(jù)(menu.js+menu.json)反應(yīng)成視圖，同時(shí)將視圖層中定義的事件發(fā)送給邏輯層，一圖以蔽之。

 

 

WXML

WXML（WeiXin Markup Language）與HTML對(duì)應(yīng)，用于描述頁面的結(jié)構(gòu)，可以類比React的JSX。項(xiàng)目中menu.html為WXML語法，一個(gè)頁面的頂層是page節(jié)點(diǎn)。WXML中獲取邏輯層定義的數(shù)據(jù)后，通過一系列自己的語法和邏輯展示出這些數(shù)據(jù)。結(jié)構(gòu)上組件是其最小單元，通過以下方式動(dòng)態(tài)渲染。

1、數(shù)據(jù)綁定

數(shù)據(jù)綁定是最簡(jiǎn)單的使用數(shù)據(jù)方式，語法采用Mustache的變量替換，用雙大括號(hào)將變量包起來，如果組件的屬性則需將數(shù)據(jù)放置于引號(hào)之中。

<view class="dish-item" data-id="{{dishId}}"><text class="name">{{dishName}}</text></view>

數(shù)據(jù)綁定還支持ES6規(guī)范的擴(kuò)展運(yùn)算符 “...”、解構(gòu)賦值。

<template is="dishItem" data="{{...item, count, soldout: true }}"></template>

2、邏輯運(yùn)算

雙大括號(hào)中可進(jìn)行算數(shù)運(yùn)算、三目運(yùn)算、邏輯判斷、字符串拼接等操作。

<text class="{{orderBanner.type !== 0 ? 'order-banner arrow' : 'order-banner'}}">{{orderBanner.text}}</text>

3、條件渲染

與常用模板語言將渲染內(nèi)容寫在 if/else 判斷條件之中不一樣的是，小程序的條件渲染將渲染條件直接寫在渲染內(nèi)容組件的 wx:if/wx:else 屬性中，如果渲染組件為多個(gè)，可將多個(gè)組件放在組件內(nèi)，渲染條件置于<block>組件的wx:if/wx:else 屬性中，此時(shí)的組件只充當(dāng)容器作用，頁面中不會(huì)渲染。

if/else

<text wx:if="{{item.soldOut}}" class="status-soldout">已售完</text>
<template wx:else is="numberCount" data="{{count: cartSpuCount[item.spuId]}}"></template>

<block>

<block  wx:if="{{serverError}}">
    <text>點(diǎn)小評(píng)去吃滿漢全席啦~</text>
    <button class="menu-btn" bindtap="requestMenu">重試</button>
</block>

4、列表渲染

列表渲染是將遍歷元素作為渲染組件的wx:for屬性值，與此相關(guān)的還有以下幾個(gè)屬性：

• wx:key：遍歷元素的唯一的標(biāo)識(shí)符，主要用于數(shù)據(jù)動(dòng)態(tài)變化時(shí)dom的更新機(jī)制，數(shù)據(jù)不變則可無視
• wx:for-item：遍歷元素的變量名，默認(rèn)item
• wx:for-index：遍歷元素下標(biāo)的變量名，默認(rèn)index
  注意：以上屬性值雖然是字符串，為正確取值單詞間都不要使用-等符號(hào)連接（如dish-item在使用時(shí){{dish-item}}會(huì)解析成減號(hào)而取不到值）。

項(xiàng)目中數(shù)據(jù)較為復(fù)雜，使用測(cè)試數(shù)據(jù)舉例：

<block wx:for="{{testData}}"
    wx:for-item="mainitem"
    wx:key="{{mainindex}}"
    wx:for-index="mainindex">
    <view wx:for="{{mainitem}}"
        wx:for-item="subitem"
        wx:key="{{subitem.id}}"
        wx:for-index="subindex">
        <view class="dom-item">第一層index: {{mainindex}} id: {{subitem.id}} name: {{subitem.name}}</view>
    </view>
</block>

以上代碼結(jié)構(gòu)上分為兩層：
1、第一層block循環(huán)遍歷testData數(shù)組，每個(gè)遍歷值變量名為mainitem;
2、第二層view循環(huán)遍歷mainitem數(shù)組，每個(gè)遍歷值變量名為subitem，展示第一層index，第二層id和name屬性；

// 創(chuàng)建頁面實(shí)例對(duì)象
Page({
    /**
    * 頁面的初始數(shù)據(jù)
    */
    data:  {
        "testData": [
            [ {
                "id": "1-1",
                "name": "節(jié)點(diǎn)1 - 1"
            }, {
                "id": "1-2",
                "name": "節(jié)點(diǎn)1 - 2"
            }], [{
                "id": "2-1",
                "name": "節(jié)點(diǎn)2 - 1"
            }, {
                "id": "2-2",
                "name": "節(jié)點(diǎn)2 - 2"
            }]
        ]
    }
})

展示結(jié)果：

開發(fā)過程中曾碰到

• wx:for第二層中wx:for-item和wx:for-index失效
• wx:for渲染異常
• wx:for中wx:index錯(cuò)亂
  以上問題小程序更新版本后均已修復(fù)。

注意：

• 1、循環(huán)遍歷時(shí)，除官方說明的數(shù)組類型可以循環(huán)遍歷外，對(duì)象類型也可通過wx:for進(jìn)行屬性遍歷，此時(shí)for-index為屬性的key值。

如將上面例子中testData換成對(duì)象類型：

// 創(chuàng)建頁面實(shí)例對(duì)象
Page({
    /**
    * 頁面的初始數(shù)據(jù)
    */
    data:  {
        "testData": {
            "a": [{
                "id": "1-1",
                "name": "節(jié)點(diǎn)1 - 1"
            }, {
                "id": "1-2",
                "name": "節(jié)點(diǎn)1 - 2"
            }],
            "b": [{
                "id": "2-1",
                "name": "節(jié)點(diǎn)2 - 1"
            }, {
                "id": "2-2",
                "name": "節(jié)點(diǎn)2 - 2"
            }]
        }
    }
})

結(jié)果為：

• 2、循環(huán)遍歷時(shí)，小程序之前還支持wx:forin遍歷，功能和wx:for相似，但官方文檔中未說明，現(xiàn)在嘗試不會(huì)報(bào)錯(cuò)，但功能已經(jīng)失效，估計(jì)后期已經(jīng)合并。

5、模板 & 引用

模板類似于React中的組件component的概念，可以在模板中定義代碼片段，然后在不同的地方調(diào)用，減少重復(fù)的代碼。

1、定義：使用name屬性，作為模板的名字，然后在<template/>內(nèi)定義模板代碼片段；
2、使用方式有2種：

• 使用include方式，將目標(biāo)文件除了<template/>的整個(gè)代碼引入，相當(dāng)于是拷貝到include位置，所以無法傳入?yún)?shù)；
• 通過import的方式引入定義的文件，然后通過<template/>組件的 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，模板擁有自己的作用域，只能使用data傳入的數(shù)據(jù)。

注意：

• 只會(huì) import 目標(biāo)文件中定義的 <template/>，不能引用目標(biāo)文件中引用的 <template/>。
• React的父組件通過props將數(shù)據(jù)傳入子組件中，傳值方式為引用傳值，子組件中可修改自身props影響父組件數(shù)據(jù)。小程序的模板只能單向使用傳入的數(shù)據(jù)。

示例（單個(gè)菜品組件）：

<import src="../../components/common/dish-item.wxml" />
<template is="dishItem" data="{{...item}}"></template>

6、綁定事件

事件名稱為字符串，會(huì)默認(rèn)傳入event參數(shù)，無法定制其他參數(shù)，所以一般將所需參數(shù)通過data-屬性綁定至組件后通過e.currentTarget.dataset獲取。

<view class="cart-btn" data-type="1" bindtap="redirectCart">選好了</view>

WXSS

WXSS（WeiXin Style Sheet）與CSS對(duì)應(yīng)，用于描述頁面的樣式。
定義在app.less中的樣式為全局樣式，作用于每一個(gè)頁面；在page的wxss文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁面，并會(huì)覆蓋app.less中相同的選擇器，如代碼結(jié)構(gòu)中menu.less作用于menu.html。

1、支持的特性

• 內(nèi)聯(lián)樣式：組件的 style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn)style中，以免影響渲染速度。
• 選擇器
  對(duì)于常用的選擇器，目前支持的選擇器有：

 

 

注：綠色背景色行表示官方文檔中沒有說明，但經(jīng)個(gè)人親測(cè)后確定也支持的選擇器。

目前不支持的選擇器有：

注意：

 

• 如之前提到，頁面的頂層是節(jié)點(diǎn)，所以作用于整個(gè)頁面的樣式或修改頂層節(jié)點(diǎn)樣式請(qǐng)使用page選擇器。
• 小程序目前不支持Media Query。

2、擴(kuò)展的特性

• 尺寸單位rpx
  rpx為小程序自創(chuàng)的單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建議：開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。

注意： 由于數(shù)值較小時(shí)渲染時(shí)會(huì)存在四舍五入的情況，在較小屏幕上差距會(huì)很大，所以要求精確而較小的視圖內(nèi)容需避免使用此單位。

如下圖所示菜品的減號(hào)操作圖標(biāo)，高度iPhone6（750）下是2px，iPhone4s（640）下直接渲染成了1px（實(shí)際比例值為1.7px），而加號(hào)按鈕圖標(biāo)高度iPhone6（750）下是11px，iPhone4s（640）下渲染成了9px(實(shí)際比例值為9.48px)，誤差比例較小沒有出現(xiàn)明顯視覺問題，所以兩者看起來會(huì)不協(xié)調(diào)。

• 樣式導(dǎo)入
  用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語句結(jié)束。

組件

如上WXML中所述，組件是視圖層的基本組成單元，與HMTL中標(biāo)簽作用類似，基于Web Component標(biāo)準(zhǔn)，屬性和內(nèi)容的使用方法也和HTML標(biāo)簽類似，組件和屬性都須小寫。

1、組件列表

 

 

2、原生組件

如上統(tǒng)計(jì)，input、textarea、video、map、canvas為系統(tǒng)原生組件。原生組件相對(duì)來說性能和用戶交互方面會(huì)有所提升。

以部分機(jī)型input元素fixed時(shí)喚起鍵盤被遮擋的問題舉例，在某魅族機(jī)型上H5頁面中父元素fixed的輸入框會(huì)被遮擋：

同一機(jī)型小程序中，輸入框不會(huì)被遮擋：

3、組件屬性

支持類型

• Boolean：布爾值
• Number：數(shù)字
• String：字符
• Array：數(shù)組
• Object：對(duì)象
• EventHandler：事件處理函數(shù)名，事件綁定（如bindtap）屬性
• Any：任意屬性（不是很明白是什么意思）

共同屬性

• id：組件的唯一標(biāo)識(shí)
• class：組件的樣式類，和wxss中定義的class選擇器對(duì)應(yīng)
• style：內(nèi)聯(lián)樣式
• hidden：組件是否顯示
• data-*：自定義屬性，可傳入自定義數(shù)據(jù)，邏輯層事件處理函數(shù)中通過e.currentTarget.dataset獲取。
• bind / catch：都是事件綁定，bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

特殊屬性
特殊屬性是各個(gè)組件自己定義的屬性，如 <icon> 組件的size屬性，具體各參見官方文檔各組件具體說明。

兼容性

渲染機(jī)制
根據(jù)官方文檔的說明：

• 在iOS 上，小程序的javascript 代碼是運(yùn)行在JavaScriptCore 中，是由WKWebView來渲染的，環(huán)境有iOS8、iOS9、iOS10；
• 在Android上，小程序的javascript代碼是通過X5 JSCore來解析，是由 X5 基于Mobile Chrome 37 內(nèi)核來渲染的；
• 在開發(fā)工具上，小程序的javascript代碼是運(yùn)行在nwjs中，是由Chrome Webview來渲染的。

由于內(nèi)核渲染表現(xiàn)不一致，H5開發(fā)過程中存在X5瀏覽器和各類機(jī)型或系統(tǒng)的兼容性的部分問題小程序中依舊存在。

常見問題分類

• X5瀏覽器
  X5前端開發(fā)問題
  X5 Caniuse Tests
• iOS/Android版本導(dǎo)致的兼容性問題：小程序在iOS/Andriod 系統(tǒng)中只要求微信版本 >= 6.5.3，對(duì)機(jī)型的系統(tǒng)版本并無限制。
• Android機(jī)型碎片化導(dǎo)致的兼容性問題

性能優(yōu)化

前端常用的模板方案一般有2種：

• 1、將模板編譯成js函數(shù)代碼，通過字符串拼接的方式生成渲染的DOM節(jié)點(diǎn)，如：Mustache / tpl(點(diǎn)評(píng)內(nèi)部開發(fā)使用)，數(shù)據(jù)更改時(shí)DOM節(jié)點(diǎn)全部更新；
• 2、字符串parse和compile后拼接渲染外，有自己的DOM節(jié)點(diǎn)更新機(jī)制， 如：Vue.js /React等，數(shù)據(jù)更改時(shí)通過DOM Diff算法更新DOM節(jié)點(diǎn)。

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有key的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

小程序?qū)M件的渲染方式我們不得而知，只能對(duì)開發(fā)中碰到的一些問題來推測(cè)。結(jié)合小程序?qū)α斜礓秩緒x:key的解釋可知其模板渲染屬于第二種，數(shù)據(jù)更新時(shí)會(huì)根據(jù)key進(jìn)行渲染優(yōu)化。但小程序官方未提供相關(guān)接口或性能調(diào)試工具，所以項(xiàng)目中我們只能自己嘗試不同方案然后對(duì)比渲染速度。以菜單頁面為例，商戶菜品數(shù)量多者成百上千，優(yōu)化后的效果對(duì)比還是比較明顯。

采取方案

• 1、減少數(shù)據(jù)嵌套層數(shù)/減少組件嵌套層數(shù)：菜單頁面將菜品數(shù)據(jù)扁平化為一層，并合理利用key值；設(shè)計(jì)組件結(jié)構(gòu)時(shí)采用精簡(jiǎn)的組件結(jié)構(gòu)，減少渲染時(shí)的數(shù)據(jù)遍歷和組件嵌套深度帶來的性能消耗。
• 2、將數(shù)據(jù)變動(dòng)的組件與數(shù)據(jù)不變的組件進(jìn)行拆分，減少數(shù)據(jù)更改帶來的組件更新量，如將加減按鈕和菜品信息分離。
• 3、使用動(dòng)態(tài)加載等方式減小首屏渲染數(shù)據(jù)量，提升用戶體驗(yàn)。

本文時(shí)間為2017-02-24，所提小程序暫不支持屬性或碰到的bug以此時(shí)間為準(zhǔn)，后續(xù)更新或修復(fù)請(qǐng)查看官方文檔。