中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何使用Vue.js開發(fā)微信小程序開源框架mpvue-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何使用Vue.js開發(fā)微信小程序開源框架mpvue,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬,聯(lián)通大帶寬,移動大帶寬,多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報價,主機托管價格性價比高,為金融證券行業(yè)成都棕樹電信機房,ai人工智能服務(wù)器托管提供bgp線路100M獨享,G口帶寬及機柜租用的專業(yè)成都idc公司。

前言

mpvue是一款使用Vue.js開發(fā)微信小程序的前端框架。使用此框架,開發(fā)者將得到完整的 Vue.js 開發(fā)體驗,同時為H5和小程序提供了代碼復(fù)用的能力。如果想將 H5 項目改造為小程序,或開發(fā)小程序后希望將其轉(zhuǎn)換為H5,mpvue將是十分契合的一種解決方案。

目前,mpvue已經(jīng)在美團點評多個實際業(yè)務(wù)項目中得到了驗證,因此我們決定將其開源,希望更多技術(shù)同行一起開發(fā),應(yīng)用到更廣泛的場景里去。github項目地址請參見mpvue 。使用文檔請參見 http://mpvue.com/。

為了幫助大家更好的理解mpvue的架構(gòu),接下來我們來解析框架的設(shè)計和實現(xiàn)思路。文中主要內(nèi)容已經(jīng)發(fā)表在《程序員》雜志2017年第9期小程序?qū)n}封面報道,內(nèi)容略有修改。

小程序開發(fā)特點

微信小程序推薦簡潔的開發(fā)方式,通過多頁面聚合完成輕量的產(chǎn)品功能。小程序以離線包方式下載到本地,通過微信客戶端載入和啟動,開發(fā)規(guī)范簡潔,技術(shù)封裝徹底,自成開發(fā)體系,有Native和H5的影子,但又絕不雷同。

小程序本身定位為一個簡單的邏輯視圖層框架,官方并不推薦用來開發(fā)復(fù)雜應(yīng)用,但業(yè)務(wù)需求卻難以做到精簡。復(fù)雜的應(yīng)用對開發(fā)方式有較高的要求,如組件和模塊化、自動構(gòu)建和集成、代碼復(fù)用和開發(fā)效率等,但小程序開發(fā)規(guī)范較大的限制了這部分能力。為了解決上述問題,提供更好的開發(fā)體驗,我們創(chuàng)造了mpvue,通過使用Vue.js來開發(fā)微信小程序。

mpvue是什么

mpvue是一套定位于開發(fā)小程序的前端開發(fā)框架,其核心目標(biāo)是提高開發(fā)效率,增強開發(fā)體驗。使用該框架,開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉Vue.js基本語法即可上手。框架提供了完整的 Vue.js 開發(fā)體驗,開發(fā)者編寫Vue.js代碼,mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運行。此外,框架還通過 vue-cli 工具向開發(fā)者提供quick start 示例代碼,開發(fā)者只需執(zhí)行一條簡單命令,即可獲得可運行的項目。

為什么做mpvue

在小程序內(nèi)測之初,我們計劃快速迭代出一款對標(biāo) H5 的產(chǎn)品實現(xiàn),核心訴求是:快速實現(xiàn)、代碼復(fù)用、低成本和高效率… 隨后經(jīng)歷了多個小程序建設(shè),結(jié)合業(yè)務(wù)場景、技術(shù)選型和小程序開發(fā)方式,我們整理匯總出了開發(fā)階段面臨的主要問題:

  1. 組件化機制不夠完善

  2. 代碼多端復(fù)用能力欠缺

  3. 小程序框架和團隊技術(shù)棧無法有機結(jié)合

  4. 小程序?qū)W習(xí)成本不夠低

組件機制:小程序邏輯和視圖層代碼彼此分離,公共組件提取后無法聚合為單文件入口,組件需分別在視圖層和邏輯層引入,維護性差;組件無命名空間機制,事件回調(diào)必須設(shè)置為全局函數(shù),組件設(shè)計有命名沖突的風(fēng)險,數(shù)據(jù)封裝不強。開發(fā)者需要友好的代碼組織方式,通過 ES 模塊一次性導(dǎo)入;組件數(shù)據(jù)有良好的封裝。成熟的組件機制,對工程化開發(fā)至關(guān)重要。

多端復(fù)用:常見的業(yè)務(wù)場景有兩類,通過已有 H5 產(chǎn)品改造為小程序應(yīng)用或反之。從效率角度出發(fā),開發(fā)者希望通過復(fù)用代碼完成開發(fā),但小程序開發(fā)框架卻無法做到。我們嘗試過通過靜態(tài)代碼分析將 H5 代碼轉(zhuǎn)換為小程序,但只做了視圖層轉(zhuǎn)換,無法帶來更多收益。多端代碼復(fù)用需要更成熟的解決方案。

引入 Vue.js:小程序開發(fā)方式與 H5 近似,因此我們考慮和 H5 做代碼復(fù)用。沿襲團隊技術(shù)棧選型,我們將 Vue.js 確定為小程序開發(fā)規(guī)范。使用 Vue.js 開發(fā)小程序,將直接帶來如下開發(fā)效率提升:

  1. H5 代碼可以通過最小修改復(fù)用到小程序

  2. 使用 Vue.js 組件機制開發(fā)小程序,可實現(xiàn)小程序和 H5 組件復(fù)用

  3. 技術(shù)棧統(tǒng)一后小程序?qū)W習(xí)成本降低,開發(fā)者從 H5 轉(zhuǎn)換到小程序不需要更多學(xué)習(xí)

  4. Vue.js 代碼可以讓所有前端直接參與開發(fā)維護

為什么是 Vue.js?這取決于團隊技術(shù)棧選型,引入新的選型與統(tǒng)一技術(shù)棧和提高開發(fā)效率相悖,有違開發(fā)工具服務(wù)業(yè)務(wù)的初衷。

mpvue 的演進

mpvue的形成,來源于業(yè)務(wù)場景和需求,最終方案的確定,經(jīng)歷了三個階段。

第一階段:我們實現(xiàn)了一個視圖層代碼轉(zhuǎn)換工具,旨在提高代碼首次開發(fā)效率。通過將H5視圖層代碼轉(zhuǎn)換為小程序代碼,包括 HTML 標(biāo)簽映射、Vue.js 模板和樣式轉(zhuǎn)換,在此目標(biāo)代碼上進行二次開發(fā)。我們做到了有限的代碼復(fù)用,但組件化開發(fā)和小程序?qū)W習(xí)成本并未得到有效改善。

第二階段:我們著眼于完善代碼組件化機制。參照 Vue.js 組件規(guī)范設(shè)計了代碼組織形式,通過代碼轉(zhuǎn)換工具將代碼解析為小程序。轉(zhuǎn)換工具主要解決組件間數(shù)據(jù)同步、生命周期關(guān)聯(lián)和命名空間問題。最終我們實現(xiàn)了一個 Vue.js 語法子集,但想要實現(xiàn)更多特性或跟隨 Vue.js 版本迭代,工作量變得難以估計,有永無止境之感。

第三階段:我們的目標(biāo)是實現(xiàn)對 Vue.js 語法全集的支持,達到使用 Vue.js 開發(fā)小程序的目的。并通過引入 Vue.js runtime 實現(xiàn)了對 Vue.js 語法的支持,從而避免了人肉語法適配。至此,我們完成了使用 Vue.js 開發(fā)小程序的目的。較好地實現(xiàn)了技術(shù)棧統(tǒng)一、組件化開發(fā)、多端代碼復(fù)用、降低學(xué)習(xí)成本和提高開發(fā)效率的目標(biāo)。

mpvue設(shè)計思路

Vue.js 和小程序都是典型的邏輯視圖層框架,邏輯層和視圖層之間的工作方式為:數(shù)據(jù)變更驅(qū)動視圖更新;視圖交互觸發(fā)事件,事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新,如圖1所示。

如何使用Vue.js開發(fā)微信小程序開源框架mpvue

圖1: 小程序?qū)崿F(xiàn)原理

鑒于 Vue.js 和小程序一致的工作原理,我們思考將小程序的功能托管給 Vue.js,在正確的時機將數(shù)據(jù)變更同步到小程序,從而達到開發(fā)小程序的目的。這樣,我們可以將精力聚焦在 Vue.js 上,參照 Vue.js 編寫與之對應(yīng)的小程序代碼,小程序負(fù)責(zé)視圖層展示,所有業(yè)務(wù)邏輯收斂到 Vue.js 中,Vue.js 數(shù)據(jù)變更后同步到小程序,如圖2所示。如此一來,我們就獲得了以 Vue.js 的方式開發(fā)小程序的能力。

Vue代碼
- 將小程序頁面編寫為 Vue.js 實現(xiàn)
- 以 Vue.js 開發(fā)規(guī)范實現(xiàn)父子組件關(guān)聯(lián)

小程序代碼
- 以小程序開發(fā)規(guī)范編寫視圖層模板
- 配置生命周期函數(shù),關(guān)聯(lián)數(shù)據(jù)更新調(diào)用
- 將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型

并在此基礎(chǔ)上,附加如下機制
- Vue.js 實例與小程序 Page 實例建立關(guān)聯(lián)
- 小程序和 Vue.js 生命周期建立映射關(guān)系,能在小程序生命周期中觸發(fā) Vue.js 生命周期
- 小程序事件建立代理機制,在事件代理函數(shù)中觸發(fā)與之對應(yīng)的 Vue.js 組件事件響應(yīng)

這套機制總結(jié)起來非常簡單,但實現(xiàn)卻相當(dāng)復(fù)雜。在揭秘具體實現(xiàn)之前,讀者可能會有這樣一些疑問:

  1. 要同時維護 Vue.js 和小程序,是否需要寫兩個版本的代碼實現(xiàn)?

  2. 小程序負(fù)責(zé)視圖層展現(xiàn),Vue.js的視圖層是否還需要,如果不需要應(yīng)該如何處理?

  3. 生命周期如何打通,數(shù)據(jù)同步更新如何實現(xiàn)?

上述問題包含了 mpvue 框架的核心內(nèi)容,下文將仔細(xì)為你道來。首先,mpvue 為提高效率而生,本身提供了自動生成小程序代碼的能力,小程序代碼根據(jù) Vue.js 代碼構(gòu)建得到,并不需要同時開發(fā)兩套代碼。

Vue.js 視圖層渲染由 render 方法完成,同時在內(nèi)存中維護著一份虛擬 DOM,mpvue 無需使用 Vue.js 完成視圖層渲染,因此我們改造了 render 方法,禁止視圖層渲染。熟悉源代碼的讀者,都知道 Vue runtime 有多個平臺的實現(xiàn),除了我們常見的 Web 平臺,還有 Weex。從現(xiàn)在開始,我們增加了新的平臺 mpvue。

生命周期關(guān)聯(lián):生命周期和數(shù)據(jù)同步是 mpvue 框架的靈魂,Vue.js 和小程序的數(shù)據(jù)彼此隔離,各自有不同的更新機制。mpvue 從生命周期和事件回調(diào)函數(shù)切入,在 Vue.js 觸發(fā)數(shù)據(jù)更新時實現(xiàn)數(shù)據(jù)同步。小程序通過視圖層呈現(xiàn)給用戶、通過事件響應(yīng)用戶交互,Vue.js 在后臺維護著數(shù)據(jù)變更和邏輯??梢钥吹剑瑪?shù)據(jù)更新發(fā)端于小程序,處理自 Vue.js,Vue.js 數(shù)據(jù)變更后再同步到小程序。為實現(xiàn)數(shù)據(jù)同步,mpvue 修改了 Vue.js runtime 實現(xiàn),在 Vue.js 的生命周期中增加了更新小程序數(shù)據(jù)的邏輯。

事件代理機制:用戶交互觸發(fā)的數(shù)據(jù)更新通過事件代理機制完成。在 Vue.js 代碼中,事件響應(yīng)函數(shù)對應(yīng)到組件的 method, Vue.js 自動維護了上下文環(huán)境。然而在小程序中并沒有類似的機制,又因為 Vue.js 執(zhí)行環(huán)境中維護著一份實時的虛擬 DOM,這與小程序的視圖層完全對應(yīng),我們思考,在小程序組件節(jié)點上觸發(fā)事件后,只要找到虛擬 DOM 上對應(yīng)的節(jié)點,觸發(fā)對應(yīng)的事件不就完成了么;另一方面,Vue.js 事件響應(yīng)如果觸發(fā)了數(shù)據(jù)更新,其生命周期函數(shù)更新將自動觸發(fā),在此函數(shù)上同步更新小程序數(shù)據(jù),數(shù)據(jù)同步也就實現(xiàn)了。

mpvue如何使用

mpvue框架本身由多個npm模塊構(gòu)成,入口模塊已經(jīng)處理好依賴關(guān)系,開發(fā)者只需要執(zhí)行如下代碼即可完成本地項目創(chuàng)建。

# 安裝 vue-cli
$ npm install --global vue-cli
# 根據(jù)模板項目創(chuàng)建本地項目,目前為內(nèi)網(wǎng)地址
$ vue init ‘bitbucket:xxx.meituan. com:hfe/mpvue-quickstart' --clone my- project
# 安裝依賴和啟動自動構(gòu)建
$ cd my-project
$ npm install
$ npm run dev

執(zhí)行完上述命令,在當(dāng)前項目的 dist 子目錄將構(gòu)建出小程序目標(biāo)代碼,使用小程序開發(fā)者工具載入 dist 目錄即可啟動本地調(diào)試和預(yù)覽。示例項目遵循 Vue.js 模板項目規(guī)范,通過Vue.js 命令行工具vue-cli創(chuàng)建。代碼組織形式與 Vue.js 官方實例保持一致,我們?yōu)樾〕绦蚨ㄖ屏?Vue.js runtime 和 webpack 加載器,此部分依賴也已經(jīng)內(nèi)置到項目中。

針對小程序開發(fā)中常見的兩類代碼復(fù)用場景,mpvue 框架為開發(fā)者提供了解決思路和技術(shù)支持,開發(fā)者只需要在此指導(dǎo)下進行項目配置和改造。我們內(nèi)部實踐了一個將 H5 轉(zhuǎn)換為小程序的項目,下圖為使用 mpvue 框架的轉(zhuǎn)換效果:

如何使用Vue.js開發(fā)微信小程序開源框架mpvue

圖3: H5 和小程序轉(zhuǎn)換效果

將小程序轉(zhuǎn)換為H5:直接使用 Vue.js 規(guī)范開發(fā)小程序,代碼本身與H5并無不同,具體代碼差異會集中在平臺 Api 部分。此外并不需明顯改動,改造主要分如下幾部分:

  1. 將小程序平臺的 Vue.js 框架替換為標(biāo)準(zhǔn) Vue.js

  2. 將小程序平臺的 vue-loader 加載器替換為標(biāo)準(zhǔn) vue-loader

  3. 適配和改造小程序與 H5 的底層 Api 差異

將H5轉(zhuǎn)換為小程序:已經(jīng)使用 Vue.js 開發(fā)完 H5,我們需要做的事情如下:

  1. 將標(biāo)準(zhǔn) Vue.js 替換為小程序平臺的 Vue.js 框架

  2. 將標(biāo)準(zhǔn) vue-loader 加載器替換為小程序平臺的 vue-loader

  3. 適配和改造小程序與 H5 的底層 Api 差異

根據(jù)小程序開發(fā)平臺提供的能力,我們大程度的支持了 Vue.js 語法特性,但部分功能現(xiàn)階段暫時尚未實現(xiàn)。

如何使用Vue.js開發(fā)微信小程序開源框架mpvue

表1: mpvue 暫不支持的語法特性

項目轉(zhuǎn)換注意事項:框架的目標(biāo)是將小程序和 H5 的開發(fā)方式通過 Vue.js 建立關(guān)聯(lián),達到大程度的代碼復(fù)用。但由于平臺差異的客觀存在(主要集中在實現(xiàn)機制、底層Api 能力差異),我們無法做到代碼 100% 復(fù)用,平臺差異部分的改造成本無法避免。對于代碼復(fù)用的場景,開發(fā)者需要重點思考如下問題并做好準(zhǔn)備:

  1. 盡量使用平臺無的語法特性,這部分特性無需轉(zhuǎn)換和適配成本

  2. 避免使用不支持的語法特性,譬如 slot, filter 等,降低改造成本

  3. 如果使用特定平臺 Api ,考慮抽象好適配層接口,通過切換底層實現(xiàn)完成平臺轉(zhuǎn)換

mpvue 最佳實踐

在表2中,我們對微信小程序、mpvue、WePY 這三個開發(fā)框架的主要能力和特點做了橫向?qū)Ρ龋瑤椭蠹伊私獠煌蚣艿膫?cè)重點,結(jié)合業(yè)務(wù)場景和開發(fā)習(xí)慣,確定技術(shù)方案。對于如何更好地使用 mpvue 進行小程序開發(fā),我們總結(jié)了一些最佳實踐。

  1. 使用 vue-cli 命令行工具創(chuàng)建項目,使用Vue 2.x 的語法規(guī)范進行開發(fā)

  2. 避免使用框架不支持的語法特性,部分 Vue.js語法在小程序中無法使用,盡量使用 mpvue 和 Vue.js 共有特性

  3. 合理設(shè)計數(shù)據(jù)模型,對數(shù)據(jù)的更新和操作做到細(xì)粒度控制,避免性能問題

  4. 合理使用組件化開發(fā)小程序,提高代碼復(fù)用率

如何使用Vue.js開發(fā)微信小程序開源框架mpvue

表2: 框架使用特點對比

結(jié)語

mpvue 框架已經(jīng)在業(yè)務(wù)項目中得到實踐和驗證,目前正在美團點評內(nèi)部大范圍使用。mpvue 來源于開源社區(qū),飲水思源,我們也希望為開源社區(qū)貢獻一份力量,為廣大高防服務(wù)器者提供一套技術(shù)方案。mpvue 的初衷是讓 Vue.js 的開發(fā)者以低成本接入小程序開發(fā),做到代碼的低成本遷移和復(fù)用,我們未來會繼續(xù)擴展現(xiàn)有能力、解決開發(fā)者的訴求、優(yōu)化使用體驗、完善周邊生態(tài)建設(shè),幫助到更多的開發(fā)者。

最后,mpvue 基于 Vue.js 源碼進行二次開發(fā),新增加了小程序平臺的實現(xiàn),我們保留了跟隨 Vue.js 版本升級的能力,由衷的感謝 Vue.js 框架和微信小程序給業(yè)界帶來的便利。

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用Vue.js開發(fā)微信小程序開源框架mpvue”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司,關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱:如何使用Vue.js開發(fā)微信小程序開源框架mpvue-創(chuàng)新互聯(lián)
標(biāo)題URL:http://m.rwnh.cn/article48/dpedhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化微信公眾號、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈品牌網(wǎng)站制作

廣告

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

外貿(mào)網(wǎng)站建設(shè)
化德县| 肃南| 英山县| 高雄市| 庆云县| 尚志市| 津市市| 汶川县| 包头市| 盐边县| 汪清县| 凤翔县| 繁昌县| 灯塔市| 台江县| 通化市| 安阳市| 绥化市| 合阳县| 宕昌县| 新野县| 崇仁县| 昆山市| 大荔县| 邛崃市| 海兴县| 盘锦市| 上饶市| 新和县| 霍城县| 毕节市| 万荣县| 邢台市| 佛冈县| 高青县| 平潭县| 邹城市| 江西省| 山阴县| 固阳县| 清水河县|