相關(guān)學(xué)習(xí)推薦：微信小程序開(kāi)發(fā)教程

下花園網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),下花園網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為下花園成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的下花園做網(wǎng)站的公司定做！

多次論證、數(shù)月研發(fā)，我們重寫(xiě)部分Vue底層、重構(gòu)uni-app框架，實(shí)現(xiàn)了微信端性能翻倍及更多Vue語(yǔ)法支持。

背景

uni-app在初期借鑒了mpvue，實(shí)現(xiàn)了微信小程序端的快速兼容，感謝美團(tuán)點(diǎn)評(píng)團(tuán)隊(duì)對(duì)于開(kāi)源社區(qū)的貢獻(xiàn)！

隨著使用uni-app的開(kāi)發(fā)者愈來(lái)愈多，業(yè)務(wù)復(fù)雜度不斷增加，不少開(kāi)發(fā)者抱怨uni-app支持的vue語(yǔ)法少，某些場(chǎng)景性能有問(wèn)題（特別是頁(yè)面存在復(fù)雜組件的情況），這些問(wèn)題其實(shí)是由mpvue的實(shí)現(xiàn)機(jī)制導(dǎo)致的，我們以復(fù)雜組件的性能問(wèn)題為例簡(jiǎn)要說(shuō)明。

mpvue/wepy 等框架誕生之初，微信小程序尚不支持自定義組件，無(wú)法進(jìn)行組件化開(kāi)發(fā)；mpvue/wepy 為解決這個(gè)問(wèn)題，創(chuàng)造性的將用戶(hù)編寫(xiě)的Vue組件，編譯為WXML中的模板（template)，這樣變相實(shí)現(xiàn)了組件化開(kāi)發(fā)能力，提高代碼復(fù)用性，這在當(dāng)時(shí)的技術(shù)條件下是很棒的技術(shù)方案。但如此方案，也導(dǎo)致Vue組件中的數(shù)據(jù)會(huì)被編譯為Page中的數(shù)據(jù)，對(duì)組件進(jìn)行數(shù)據(jù)更新也會(huì)基于路徑映射調(diào)用Page.setData。特別是組件較多、數(shù)據(jù)量交大的頁(yè)面中，每個(gè)組件的局部更新會(huì)引發(fā)頁(yè)面級(jí)別的全局更新，產(chǎn)生極大的性能開(kāi)銷(xiāo)。

微信后來(lái)推出的自定義組件，其實(shí)支持組件級(jí)別的局部更新，經(jīng)驗(yàn)證，我們發(fā)現(xiàn)組件級(jí)別的數(shù)據(jù)更新，相比頁(yè)面全局更新，有大幅性能提升。

另外，mpvue在Vue層進(jìn)行的vnode對(duì)比及數(shù)據(jù)diff計(jì)算不徹底，也會(huì)消耗部分性能。

基于這些原因，我們開(kāi)始了微信端的框架重寫(xiě)工作。

新版特性性能翻倍

新版 uni-app調(diào)整重寫(xiě)了部分Vue.js底層實(shí)現(xiàn)，主要包括：

基于小程序自定義組件實(shí)現(xiàn) Vue.js的組件化開(kāi)發(fā)Vue層取消vnode對(duì)比更徹底的diff計(jì)算，setData()通訊數(shù)據(jù)量更少

新框架重寫(xiě)后，我們構(gòu)造了如下測(cè)試模型：

構(gòu)造一個(gè)列表界面，每個(gè)列表項(xiàng)為一個(gè)自定義組件上拉加載觸發(fā)數(shù)據(jù)更新，每次從本地讀取靜態(tài)數(shù)據(jù)，屏蔽網(wǎng)絡(luò)差異觸發(fā)數(shù)據(jù)更新計(jì)時(shí)開(kāi)始，頁(yè)面渲染完畢計(jì)時(shí)結(jié)束，求其時(shí)間差作為對(duì)比指標(biāo)（耗時(shí)，單位為毫秒）

然后分別使用新、老框架，在同一臺(tái)手機(jī)（vivo nex）上進(jìn)行多次測(cè)試，求其平均值，獲取如下結(jié)果：

組件數(shù)量老框架(mpvue)新框架200204ms129ms400280ms139ms800341ms180ms1000653ms196ms

從測(cè)試數(shù)據(jù)來(lái)看，新框架在復(fù)雜頁(yè)面下，性能有翻倍提升！特別是數(shù)據(jù)越多、組件越復(fù)雜的頁(yè)面，性能提升越大！

Tips：我們還針對(duì)目前主流的幾個(gè)跨端框架（比如：taro、wepy、chameleon等），全部做了一遍性能測(cè)試，uni-app的跑分結(jié)果同樣搶眼，近期會(huì)將測(cè)試代碼、測(cè)試結(jié)果公開(kāi)，接受大家評(píng)判，敬請(qǐng)期待。

更多 Vue 語(yǔ)法支持

我們同時(shí)增強(qiáng)了uni-app編譯器，支持了更多 Vue 語(yǔ)法，詳細(xì)如下：

支持過(guò)濾器 filter支持比較復(fù)雜的 JavaScript渲染表達(dá)式支持在 template內(nèi)使用 methods中的函數(shù)支持 v-html（同 rich-text的解析）組件支持原生事件綁定，如：@tap.native體驗(yàn)方式

目前新框架在微信端已完成開(kāi)發(fā)，其他小程序和App的編譯器仍為舊版。我們放出群測(cè)版，邀請(qǐng)開(kāi)發(fā)者在微信端搶鮮體驗(yàn)。

開(kāi)發(fā)者按照如下方式創(chuàng)建vue-cli并創(chuàng)建uni-app項(xiàng)目，編譯發(fā)行到微信小程序：

# npm script# 全局安裝vue-cli$ npm install -g @vue/cli# 創(chuàng)建uni-app項(xiàng)目，會(huì)提示選擇項(xiàng)目模板，初次接觸建議選擇 hello uni-app 模板$ vue create -p dcloudio/uni-preset-vue my-project# 進(jìn)入項(xiàng)目目錄$ cd my-project# dev 模式，編譯預(yù)覽$ npm run dev:mp-weixin# build 模式，發(fā)行打包$ npm run build:mp-weixin復(fù)制代碼

新老版本切換

為了不影響老項(xiàng)目，uni-app群測(cè)版目前同時(shí)內(nèi)置新、老兩個(gè)框架，且默認(rèn)使用老框架，開(kāi)發(fā)者可通過(guò)配置 manifest.json-> mp-weixin-> usingComponents節(jié)點(diǎn)啟用新編譯框架，如下：

// manifest.json
{
	// ...
	/* 小程序特有相關(guān) */
	"mp-weixin": {
		"usingComponents":true //啟用新框架編譯，默認(rèn)為false
	}
}復(fù)制代碼

如果你使用了新增的vue語(yǔ)法，請(qǐng)注意只有H5和微信支持這些新語(yǔ)法，編譯到其他平臺(tái)時(shí)，要用條件編譯處理。

Tips：

為保證自定義組件兼容性，運(yùn)行到微信開(kāi)發(fā)者工具時(shí)，建議將微信基礎(chǔ)庫(kù)設(shè)置為最新版本。體驗(yàn)新框架時(shí)，有任何問(wèn)題或者建議，歡迎到github提交 issue現(xiàn)狀與未來(lái)

春節(jié)過(guò)后，uni-app1.6版本發(fā)布，新增字節(jié)跳動(dòng)小程序平臺(tái)支持；至此，實(shí)現(xiàn)一套代碼、7端發(fā)布！7端分別包括：App（iOS/Android）、小程序（微信/支付寶/百度/字節(jié)跳動(dòng)）、H5平臺(tái)，見(jiàn)下圖：

大量開(kāi)發(fā)者熱情涌入 uni-app 社區(qū)，目前已有幾十個(gè)uni-app交流群，下圖為一個(gè)500人的QQ交流群，創(chuàng)建2天即滿(mǎn)群，開(kāi)發(fā)者的熱情可見(jiàn)一斑。

目前，每天新創(chuàng)建的uni-app項(xiàng)目（包括測(cè)試項(xiàng)目）達(dá)數(shù)千個(gè)，案例過(guò)萬(wàn)，部分案例見(jiàn)uniapp.dcloud.io/case。與Taro等框架清一色微信小程序案例相比，uni-app的跨端案例要豐富很多。

在小程序跨端框架中，uni-app也許是使用人數(shù)最多、跨端案例最豐富的前端框架。

近期，為活躍Vue多端開(kāi)發(fā)生態(tài)，由uni-app與mpvue團(tuán)隊(duì)聯(lián)合舉辦的插件開(kāi)發(fā)大賽正式開(kāi)始了！歡迎各位開(kāi)發(fā)者踴躍參與，制造輪子、造福社區(qū)的同時(shí)，順手再拿個(gè)獎(jiǎng)品（iphone Xs Max、4K顯示器等獎(jiǎng)品多多），一舉多得^_^，點(diǎn)擊了解詳情。

接下來(lái)，uni-app團(tuán)隊(duì)將繼續(xù)全力奔跑，在如下方面快速完善：

uni-app新框架兼容到其它平臺(tái)uni-ui 跨端UI庫(kù)精致化App端引入更多原生渲染，提升系能體驗(yàn)周邊生態(tài)進(jìn)一步完善，比如行業(yè)模板、跨端統(tǒng)計(jì)等

“為開(kāi)發(fā)者而生”，不是口號(hào)，而是定位。

uni-app團(tuán)隊(duì)將一如既往的為開(kāi)發(fā)者解決開(kāi)發(fā)痛點(diǎn)、提升開(kāi)發(fā)效率！

了解更多其他精品文章，敬請(qǐng)關(guān)注uni-app欄目~

網(wǎng)頁(yè)題目：uni-app實(shí)現(xiàn)微信端性能翻倍的妙招
URL標(biāo)題：http://m.rwnh.cn/article22/cpsicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)