大眾點評點餐小程序開發(fā)經驗 - 視圖層
本期想要和大家分享下大眾點評點餐小程序中View視圖層的一些開發(fā)經驗。本文部分示例來自于「大眾點評點餐」小程序的菜單頁面。頁 ...
本期想要和大家分享下大眾點評點餐小程序中View視圖層的一些開發(fā)經驗。本文部分示例來自于「大眾點評點餐」小程序的菜單頁面。
頁面代碼結構為：
menu
├── menu.html
├── menu.js
├── menu.json
└── menu.less
我們將要說的小程序的View視圖層是由WXML(menu.html) 與 WXSS(menu.less) 兩大部分組成，由視圖最小單元 - 組件來進行展示。視圖層將邏輯層的數(shù)據(jù)(menu.js+menu.json)反應成視圖，同時將視圖層中定義的事件發(fā)送給邏輯層，一圖以蔽之。
WXML
WXML（WeiXin Markup Language）與HTML對應，用于描述頁面的結構，可以類比React的JSX。項目中menu.html為WXML語法，一個頁面的頂層是page節(jié)點。WXML中獲取邏輯層定義的數(shù)據(jù)后，通過一系列自己的語法和邏輯展示出這些數(shù)據(jù)。結構上組件是其最小單元，通過以下方式動態(tài)渲染。
1、數(shù)據(jù)綁定
數(shù)據(jù)綁定是最簡單的使用數(shù)據(jù)方式，語法采用Mustache的變量替換，用雙大括號將變量包起來，如果組件的屬性則需將數(shù)據(jù)放置于引號之中。
<view class="dish-item" data-id="{{dishId}}"><text class="name">{{dishName}}</text></view>
數(shù)據(jù)綁定還支持ES6規(guī)范的擴展運算符 “...”、解構賦值。
<template is="dishItem" data="{{...item, count, soldout: true }}"></template>
2、邏輯運算
雙大括號中可進行算數(shù)運算、三目運算、邏輯判斷、字符串拼接等操作。
<text class="{{orderBanner.type !== 0 ? 'order-banner arrow' : 'order-banner'}}">{{orderBanner.text}}</text>
3、條件渲染
與常用模板語言將渲染內容寫在 if/else 判斷條件之中不一樣的是，小程序的條件渲染將渲染條件直接寫在渲染內容組件的 wx:if/wx:else 屬性中，如果渲染組件為多個，可將多個組件放在
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>點小評去吃滿漢全席啦~</text>
<button class="menu-btn" bindtap="requestMenu">重試</button>
</block>
4、列表渲染
列表渲染是將遍歷元素作為渲染組件的wx:for屬性值，與此相關的還有以下幾個屬性：
- wx:key：遍歷元素的唯一的標識符，主要用于數(shù)據(jù)動態(tài)變化時dom的更新機制，數(shù)據(jù)不變則可無視
- wx:for-item：遍歷元素的變量名，默認item
-
wx:for-index：遍歷元素下標的變量名，默認index
注意：以上屬性值雖然是字符串，為正確取值單詞間都不要使用-等符號連接（如dish-item在使用時{{dish-item}}會解析成減號而取不到值）。
項目中數(shù)據(jù)較為復雜，使用測試數(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>
以上代碼結構上分為兩層：
1、第一層block循環(huán)遍歷testData數(shù)組，每個遍歷值變量名為mainitem;
2、第二層view循環(huán)遍歷mainitem數(shù)組，每個遍歷值變量名為subitem，展示第一層index，第二層id和name屬性；
// 創(chuàng)建頁面實例對象
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
"testData": [
[ {
"id": "1-1",
"name": "節(jié)點1 - 1"
}, {
"id": "1-2",
"name": "節(jié)點1 - 2"
}], [{
"id": "2-1",
"name": "節(jié)點2 - 1"
}, {
"id": "2-2",
"name": "節(jié)點2 - 2"
}]
]
}
})
展示結果：
開發(fā)過程中曾碰到
- wx:for第二層中wx:for-item和wx:for-index失效
- wx:for渲染異常
-
wx:for中wx:index錯亂
以上問題小程序更新版本后均已修復。
注意：
- 1、循環(huán)遍歷時，除官方說明的數(shù)組類型可以循環(huán)遍歷外，對象類型也可通過wx:for進行屬性遍歷，此時for-index為屬性的key值。
如將上面例子中testData換成對象類型：
// 創(chuàng)建頁面實例對象
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
"testData": {
"a": [{
"id": "1-1",
"name": "節(jié)點1 - 1"
}, {
"id": "1-2",
"name": "節(jié)點1 - 2"
}],
"b": [{
"id": "2-1",
"name": "節(jié)點2 - 1"
}, {
"id": "2-2",
"name": "節(jié)點2 - 2"
}]
}
}
})
結果為：
- 2、循環(huán)遍歷時，小程序之前還支持wx:forin遍歷，功能和wx:for相似，但官方文檔中未說明，現(xiàn)在嘗試不會報錯，但功能已經失效，估計后期已經合并。
5、模板 & 引用
模板類似于React中的組件component的概念，可以在模板中定義代碼片段，然后在不同的地方調用，減少重復的代碼。
1、定義：使用name屬性，作為模板的名字，然后在<template/>內定義模板代碼片段；
2、使用方式有2種：
- 使用include方式，將目標文件除了<template/>的整個代碼引入，相當于是拷貝到include位置，所以無法傳入?yún)?shù)；
- 通過import的方式引入定義的文件，然后通過<template/>組件的 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，模板擁有自己的作用域，只能使用data傳入的數(shù)據(jù)。
注意：
- 只會 import 目標文件中定義的 <template/>，不能引用目標文件中引用的 <template/>。
- React的父組件通過props將數(shù)據(jù)傳入子組件中，傳值方式為引用傳值，子組件中可修改自身props影響父組件數(shù)據(jù)。小程序的模板只能單向使用傳入的數(shù)據(jù)。
示例（單個菜品組件）：
<import src="../../components/common/dish-item.wxml" />
<template is="dishItem" data="{{...item}}"></template>
6、綁定事件
事件名稱為字符串，會默認傳入event參數(shù)，無法定制其他參數(shù)，所以一般將所需參數(shù)通過data-屬性綁定至組件后通過e.currentTarget.dataset獲取。
<view class="cart-btn" data-type="1" bindtap="redirectCart">選好了</view>
WXSS
WXSS（WeiXin Style Sheet）與CSS對應，用于描述頁面的樣式。
定義在app.less中的樣式為全局樣式，作用于每一個頁面；在page的wxss文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋app.less中相同的選擇器，如代碼結構中menu.less作用于menu.html。
1、支持的特性
- 內聯(lián)樣式：組件的 style 接收動態(tài)的樣式，在運行時會進行解析，請盡量避免將靜態(tài)的樣式寫進style中，以免影響渲染速度。
-
選擇器
對于常用的選擇器，目前支持的選擇器有：
注：綠色背景色行表示官方文檔中沒有說明，但經個人親測后確定也支持的選擇器。
目前不支持的選擇器有：
注意：
-
如之前提到，頁面的頂層是
節(jié)點，所以作用于整個頁面的樣式或修改頂層節(jié)點樣式請使用page選擇器。 - 小程序目前不支持Media Query。
2、擴展的特性
-
尺寸單位rpx
rpx為小程序自創(chuàng)的單位，可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建議：開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。
注意： 由于數(shù)值較小時渲染時會存在四舍五入的情況，在較小屏幕上差距會很大，所以要求精確而較小的視圖內容需避免使用此單位。
如下圖所示菜品的減號操作圖標，高度iPhone6（750）下是2px，iPhone4s（640）下直接渲染成了1px（實際比例值為1.7px），而加號按鈕圖標高度iPhone6（750）下是11px，iPhone4s（640）下渲染成了9px(實際比例值為9.48px)，誤差比例較小沒有出現(xiàn)明顯視覺問題，所以兩者看起來會不協(xié)調。
-
樣式導入
用@import語句可以導入外聯(lián)樣式表，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結束。
組件
如上WXML中所述，組件是視圖層的基本組成單元，與HMTL中標簽作用類似，基于Web Component標準，屬性和內容的使用方法也和HTML標簽類似，組件和屬性都須小寫。
1、組件列表
2、原生組件
如上統(tǒng)計，input、textarea、video、map、canvas為系統(tǒng)原生組件。原生組件相對來說性能和用戶交互方面會有所提升。
以部分機型input元素fixed時喚起鍵盤被遮擋的問題舉例，在某魅族機型上H5頁面中父元素fixed的輸入框會被遮擋：
同一機型小程序中，輸入框不會被遮擋：
3、組件屬性
支持類型
- Boolean：布爾值
- Number：數(shù)字
- String：字符
- Array：數(shù)組
- Object：對象
- EventHandler：事件處理函數(shù)名，事件綁定（如bindtap）屬性
- Any：任意屬性（不是很明白是什么意思）
共同屬性
- id：組件的唯一標識
- class：組件的樣式類，和wxss中定義的class選擇器對應
- style：內聯(lián)樣式
- hidden：組件是否顯示
- data-*：自定義屬性，可傳入自定義數(shù)據(jù)，邏輯層事件處理函數(shù)中通過e.currentTarget.dataset獲取。
- bind / catch：都是事件綁定，bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
特殊屬性
特殊屬性是各個組件自己定義的屬性，如 <icon> 組件的size屬性，具體各參見官方文檔各組件具體說明。
兼容性
渲染機制
根據(jù)官方文檔的說明：
- 在iOS 上，小程序的javascript 代碼是運行在JavaScriptCore 中，是由WKWebView來渲染的，環(huán)境有iOS8、iOS9、iOS10；
- 在Android上，小程序的javascript代碼是通過X5 JSCore來解析，是由 X5 基于Mobile Chrome 37 內核來渲染的；
- 在開發(fā)工具上，小程序的javascript代碼是運行在nwjs中，是由Chrome Webview來渲染的。
由于內核渲染表現(xiàn)不一致，H5開發(fā)過程中存在X5瀏覽器和各類機型或系統(tǒng)的兼容性的部分問題小程序中依舊存在。
常見問題分類
-
X5瀏覽器
X5前端開發(fā)問題
X5 Caniuse Tests - iOS/Android版本導致的兼容性問題：小程序在iOS/Andriod 系統(tǒng)中只要求微信版本 >= 6.5.3，對機型的系統(tǒng)版本并無限制。
- Android機型碎片化導致的兼容性問題
性能優(yōu)化
前端常用的模板方案一般有2種：
- 1、將模板編譯成js函數(shù)代碼，通過字符串拼接的方式生成渲染的DOM節(jié)點，如：Mustache / tpl(點評內部開發(fā)使用)，數(shù)據(jù)更改時DOM節(jié)點全部更新；
- 2、字符串parse和compile后拼接渲染外，有自己的DOM節(jié)點更新機制， 如：Vue.js /React等，數(shù)據(jù)更改時通過DOM Diff算法更新DOM節(jié)點。
當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有key的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時的效率。
小程序對組件的渲染方式我們不得而知，只能對開發(fā)中碰到的一些問題來推測。結合小程序對列表渲染wx:key的解釋可知其模板渲染屬于第二種，數(shù)據(jù)更新時會根據(jù)key進行渲染優(yōu)化。但小程序官方未提供相關接口或性能調試工具，所以項目中我們只能自己嘗試不同方案然后對比渲染速度。以菜單頁面為例，商戶菜品數(shù)量多者成百上千，優(yōu)化后的效果對比還是比較明顯。
采取方案
- 1、減少數(shù)據(jù)嵌套層數(shù)/減少組件嵌套層數(shù)：菜單頁面將菜品數(shù)據(jù)扁平化為一層，并合理利用key值；設計組件結構時采用精簡的組件結構，減少渲染時的數(shù)據(jù)遍歷和組件嵌套深度帶來的性能消耗。
- 2、將數(shù)據(jù)變動的組件與數(shù)據(jù)不變的組件進行拆分，減少數(shù)據(jù)更改帶來的組件更新量，如將加減按鈕和菜品信息分離。
- 3、使用動態(tài)加載等方式減小首屏渲染數(shù)據(jù)量，提升用戶體驗。
本文時間為2017-02-24，所提小程序暫不支持屬性或碰到的bug以此時間為準，后續(xù)更新或修復請查看官方文檔。
