日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

使用Vue開發(fā)微信小程序:mpvue框架

 liang1234_ 2019-03-27

【最近更新】mpvue入門系列教程:
如何在mpvue中正確的引用小程序的原生自定義組件
使用mpvue開發(fā)小程序教程(六)
使用mpvue開發(fā)小程序教程(五)
使用mpvue開發(fā)小程序教程(四)
使用mpvue開發(fā)小程序教程(三)
使用mpvue開發(fā)小程序教程(二)
使用mpvue開發(fā)小程序教程(一)

接觸微信小程序有一段時間的開發(fā)者或開發(fā)團(tuán)隊(duì),我相信多多少少都會為自己搭建封裝一些便于開發(fā)的框架/腳手架,尤其是一些做過Web開發(fā)的開發(fā)者,受到現(xiàn)如今Web主流開發(fā)框架如Angular,React,Vue等的核心思想的影響,對數(shù)據(jù)/狀態(tài)管理、組件化、跨平臺等都有較高的追求。

所以,從小程序出現(xiàn)到現(xiàn)在,已經(jīng)陸陸續(xù)續(xù)出現(xiàn)了一些遵循了這些Web開發(fā)思想的小程序框架,比較突出的就是WePY,一個由騰訊團(tuán)隊(duì)推出的小程序組件化開發(fā)框架,主要的特點(diǎn)如下:

  • 類Vue開發(fā)風(fēng)格

  • 支持自定義組件開發(fā)

  • 支持引入NPM包

  • 支持Promise

  • 支持ES2015 特性,如Async Functions

  • 支持多種編譯器,Less/Sass/Styus、Babel/Typescript、Pug

  • 支持多種插件處理,文件壓縮,圖片壓縮,內(nèi)容替換等

  • 支持 Sourcemap,ESLint等

  • 小程序細(xì)節(jié)優(yōu)化,如請求列隊(duì),事件優(yōu)化等

這些特性基本上是現(xiàn)今主流Web開發(fā)的標(biāo)配了。因?yàn)槲以陂_發(fā)Web應(yīng)用的時候也經(jīng)常使用Vue,所以在試用WePY的過程中覺得非常的熟悉好上手,它確實(shí)是一個值得使用、可以有效提高生產(chǎn)力的好框架。

不過,今天的主角并不是這個類Vue框架WePY,我想聊的是另外一個基于Vue的框架:美團(tuán)點(diǎn)評團(tuán)隊(duì)出品的小程序開發(fā)框架:mpvue。為什么說WePY是一個“類Vue”的框架,而這個mpvue是“基于Vue”的框架呢?因?yàn)閃ePY是在代碼開發(fā)風(fēng)格上借鑒了Vue,本身和Vue沒有什么關(guān)系;而這個mpvue是從整個Vue的核心代碼上經(jīng)過二次開發(fā)而形成的一個框架,相當(dāng)于是給Vue本身賦能,增加了開發(fā)微信小程序的能力。

使用mpvue開發(fā)小程序,你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力:

  • 徹底的組件化開發(fā)能力:提高代碼

  • 完整的 Vue.js 開發(fā)體驗(yàn)

  • 方便的 Vuex 數(shù)據(jù)管理方案:方便構(gòu)建復(fù)雜應(yīng)用

  • 快捷的 webpack 構(gòu)建機(jī)制:自定義構(gòu)建策略、開發(fā)階段 hotReload

  • 支持使用 npm 外部依賴

  • 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

  • H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

它的目標(biāo)是:在未來最理想的狀態(tài)下,可以一套代碼可以直接跑在多端:WEB、微信小程序、支付寶小程序、Native(借助weex)。不過由于各個端之間都存在一些比較明顯的差異性,從產(chǎn)品的層面上講,不建議這么做,這個框架的官方他們對它的期望的也只是開發(fā)和調(diào)試體驗(yàn)的一致。

通過官網(wǎng)提供的五分鐘快速上手教程,可以發(fā)現(xiàn)它的開發(fā)過程和Vue保持高度一致,連使用的命令行工具也還是原先開發(fā)Web應(yīng)用時所用的vue-cli

#創(chuàng)建一個小程序工程vue init mpvue/mpvue-quickstart my-project

編寫模板代碼的時候通常也主要是以HTML為主,比如我們編寫一個.vue組件時寫了如下代碼:

<template>
  <div class='counter-warp'><p>Vuex counter:{{ count }}</p><p>  <button @click='increment'> </button>  <button @click='decrement'>-</button></p><a href='/pages/index/index' class='home'>去往首頁</a>
  </div></template>

而mpvue會通過編譯,將這個HTML模板轉(zhuǎn)換成小程序的WXML代碼:

<template name='counter$39c97971'> <view class='_div data-v-72101980 counter-warp'><view class='_p data-v-72101980'>Vuex counter:{{ count }}</view><view class='_p data-v-72101980'> <button bindtap='handleProxy' data-eventid='{{'0'}}' data-comkey='{{$k}}' class='_button data-v-72101980'> </button> <button bindtap='handleProxy' data-eventid='{{'1'}}' data-comkey='{{$k}}'class='_button data-v-72101980'>-</button></view><navigator url='/pages/index/index' class='_a data-v-72101980 home'>去往首頁</navigator> </view></template>

這樣,我們就可以完全用開發(fā)Web應(yīng)用的方式去開發(fā)小程序了,這為我們減少了一些思維切換方面的成本。其實(shí)最重要的是:

Vue真的很好用?。?/p>

另外,提供一個對原生微信小程序、mpvue、WePY這三種開發(fā)小程序方式的比較,感興趣的朋友可以參考一下:


    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多