小程序?qū)?xiàng)目代碼包的大小是有要求的鸟妙,目前限制為2M。2M大小快压,著實(shí)不大圆仔,尤其是對那些有著多條業(yè)務(wù)線的公司。小程序是個寸土寸金的地方蔫劣,每K必爭坪郭,絲毫不過。設(shè)想一下脉幢,隨著項(xiàng)目的持續(xù)迭代歪沃,新的功能不斷加進(jìn)來,代碼量總有超過2M的時候嫌松,怎么辦沪曙?此時,我們就得將那些不是太重要的萎羔,但又不能丟掉的功能放到H5上去液走。而使用Vue框架開發(fā)H5在逐漸被更多的開發(fā)者地采用,那么小程序轉(zhuǎn)Vue就是一個確實(shí)存在著的場景贾陷。本文的目的旨在通過對比小程序與Vue基礎(chǔ)語法缘眶,讓大家對小程序與Vue之間的轉(zhuǎn)換,哪些很容易搬過來髓废,哪些需要經(jīng)過適當(dāng)變通巷懈,哪些壓根沒法轉(zhuǎn),有一定的了解慌洪。
第一篇先分析對比基礎(chǔ)的數(shù)據(jù)綁定顶燕。
數(shù)據(jù)綁定
1.文本
<view>小程序:{{message}}</view>
<span>Vue:{{message}}</span>
總結(jié):文本綁定基本上可以照搬過來。
2.HTML綁定
Vue提供了v-html指令用于輸出HTML冈爹,例如:
JS
data() {
return {
rawHtml: '<p><span>這是一些文本</span></p>'
}
}
HTML
<div v-html="rawHtml"></div>
最終HTMl會被渲染為:
HTML
<p><span>這是一些文本</span></p>
但是在小程序中涌攻,并沒有與v-html對應(yīng)的api,有興趣的同學(xué)可以研究下這是為何频伤,可以在評論區(qū)里面交流癣漆。不過,小程序還是提供了rich-text組件來實(shí)現(xiàn)類似的功能剂买,只不過使用起來稍微有點(diǎn)麻煩惠爽。本文不對rich-text的使用做講解,想了解具的使用方法瞬哼,可點(diǎn)此查看婚肆。結(jié)合實(shí)際場景,如果我們要使用rich-text如下的渲染效果:
WXML
<p class="p-class"><span style="color:red;">這是一些文本</span></p>
可以這樣:
JS
data: {
nodes:[{
name: 'p',
attrs: {
class: 'p-class'
},
children: [{
name: 'span',
attrs: {
style: 'color:red;'
},
children: [{
type: 'text',
text: '這是一些文本'
}]
}]
}]
}
WXML
<rich-text nodes="{{nodes}}"></rich-text>
渲染結(jié)果在UI上表現(xiàn)正常坐慰,但是在Wxml上并不會轉(zhuǎn)換成我們預(yù)想的html標(biāo)簽较性,仍然是rich-text標(biāo)簽。
苦于小程序現(xiàn)有的api對富文本的解析支持程度較低结胀,網(wǎng)上有些第三方插件給出了解決方案赞咙,其中wxParse就是杰出的代表,有關(guān)于wxParse的使用介紹糟港,可點(diǎn)此查看攀操。
總結(jié):關(guān)于HTMl綁定,小程序轉(zhuǎn)Vue比較容易秸抚,直接定義規(guī)范化的html標(biāo)簽更符合我們的習(xí)慣速和。Vue轉(zhuǎn)小程序比較麻煩,需要我們將html標(biāo)簽映射到小程序nodes集合剥汤。
HTML特性
關(guān)于什么是HTML特性颠放,我們可以這樣理解:HTML特性是指HTML標(biāo)簽原生支持的屬性,無需用戶自定義吭敢,分為全局屬性和特有屬性碰凶。全局屬性是所有標(biāo)簽基本上都具有的屬性,比如class鹿驼、id等欲低。特有屬性是指某些特殊的標(biāo)簽具有的屬性,比如type屬性蠢沿,input和textarea等少數(shù)標(biāo)簽才具有的屬性伸头。
1.在Vue里面
mustache語法不能作用在HTML特性上,遇到這種情況需要使用v-bind指令舷蟀,比如:
HTML
<div id="dynamicId"></div>
這同樣適用于布爾類型特性恤磷,比如:
HTML
<button v-bind:disabled="isBtnDisabled"></button>
2.在小程序里面
mustache語法可以直接作用在HTML特性上,比如:
WXML
<view id="{{dynamicId}}"></view>
對于布爾類型特性野宜,mustache一定不要省略扫步,否則會被當(dāng)成字符串處理,造成適得其反的效果匈子,比如:
WXML
<button disabled="falsy"></botton>
其中falsy泛指可轉(zhuǎn)換為false的值河胎。省略mustache,falsy會被當(dāng)做字符串"falsy"處理虎敦,轉(zhuǎn)化成Boolean類型后代表真值游岳。
總結(jié):關(guān)于HTML特性的綁定政敢,記住Vue使用v-bind指令,雙方之間的轉(zhuǎn)換也比較容易進(jìn)行胚迫。
JavaScript表達(dá)式
vue和小程序都表達(dá)式喷户,比如:
<div>{{bool ? 'yes' : 'no' }}</div>
<view>{{bool ? 'yes' : 'no' }}</view>
有意思的是,小程序提供了在Mustache內(nèi)對數(shù)組和對象進(jìn)行組合的功能访锻。
數(shù)組組合
JS
data: {
zero: 0
}
WXML
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
[zero, 1, 2, 3, 4]
最終被組合為[0, 1, 2, 3, 4]
對象組合
JS
data: {
a: 1,
b: 2
}
WXML
<view data-comb="{{foo: a, bar: b}}"></view>
data-comb最終組合成{foo: 1, bar: 2}
除此之外褪尝,小程序還借鑒了ES6的新特性,比如利用擴(kuò)展運(yùn)算符...
將對象展開期犬。比如:
JS
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
WXML
<view data-comb="{{...obj1, ...obj2, e: 5}}"></view>
data-comb最終組合成{a: 1, b: 2, c: 3, d: 4, e: 5}
擴(kuò)展運(yùn)算符...
出現(xiàn)的意義就是實(shí)現(xiàn)數(shù)組和松散序列的相互轉(zhuǎn)化河哑,取代apply方法等,有興趣的同學(xué)嘗試模擬實(shí)現(xiàn)擴(kuò)展運(yùn)算符...
對對象的展開龟虎。除此之外璃谨,也支持在組合中簡寫屬性,這一點(diǎn)與ES6一致遣总,比如:
JS
data: {
foo: 'my-foo',
bar: 'my-bar'
}
WXML
<view data-comb="{{foo, bar}}"></view>
data-comb最終組合成{foo: 'my-foo', bar:'my-bar'}
總結(jié):小程序與Vue在常規(guī)的表達(dá)式綁定方面基本上是一致的睬罗,如果你在小程序中使用上述的數(shù)組和對象的組合,就需要考慮在Vue去自己實(shí)現(xiàn)旭斥。
到此容达,數(shù)據(jù)綁定的先羅列這么多,在后續(xù)的開發(fā)過程中有特殊的案例或者需要特別指明的地方垂券,我會編輯添加進(jìn)來花盐,也歡迎大家批評指正,下一篇對比分析class與style綁定菇爪。