mpvue 轉小程序實踐總結

介紹

Mpvue 是一個使用 Vue.js 開發小程序的前端框架。   基礎介紹

 

框架基於 Vue.js 核心，修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，

 

從而為小程序開發引入了整套 Vue.js 開發體驗，同樣也使得  一套代碼同時復用在小程序和 Web 中成為可能。  webapp?

 

本文將以 IT之家Lite 小程序的 Web 轉換經過為線索，大致介紹一下轉換的基本步驟及需要注意的一些事項。

 

目錄結構

省略了部分與轉換無關的文件

├─build
├─config
├─src
│ ├─components │ ├─pages
│ ├─store
│ ├─styles
│ ├─utils
│ │  ├─api.js │ │ ├─index.js │ │ ├─request.js │ │ └─wx.js │ ├─App.vue │ └─main.js ├─package-lock.json └─package.json

轉換步驟

0.前期准備

• 建議使用 git 進行分支管理
• 盡量避免使用不必要的小程序特有標簽，如 text，image 等 #9137744   ? 
• 避免直接使用 wx 對象，使用 import wx from 'wx' 的方式引入，便於 web 中改寫 #c3ef6e7  ?

// src/utils/wx.js export default wx

• 使用 flyio 作為請求庫，配置 alias 將 flyio 指向 flyio/dist/npm/wx
• 基於原分支新建 web-version 分支

1.修改打包配置

• 可以在原有配置基礎上修改， 主要涉及 entry、target 及 loader 相關的配置項，
• 這里我直接通過 vue-cli 生成了一個新的項目，復制 build、config 文件夾及 eslint、babel 等的配置文件替換原有配置，
• 使用新項目的 package.json 並做相應修改，新建項目時  各選項盡量與原項目 保持一致 #ece3a76
• 修改 main.js，指定掛載元素，順利的話，這步之后執行 npm run dev 便已經可以跑起來了，有報錯的話解決相應錯誤即可

2.配置路由

• 添加 vue-router，並進行相應配置，建議使用 history 模式 #ddf94bc
• 修改路由參數獲取相關的代碼 #b949197
• 使用 router-link 替換 a 標簽，避免頁面重載 #eb09297

3.調整請求接口

• 配置 alias 將 flyio 指向 flyio/dist/npm/fly
• 小程序中不會有跨域的問題，但 web 中需配合后端進行請求轉發或通過其他方式來解決這一問題 #f963975

4.轉換小程序組件及 API

• 底部導航欄，自己布局實現 #8d6d98b

.nav(v-if="$route.meta.nav") a.nav-item(href="/pages/news/list") img.nav-icon(v-if="$route.name === 'NewsList'", src="/static/assets/news-active.png") img.nav-icon(v-else, src="/static/assets/news.png") .nav-title(:class="{ active: $route.name === 'NewsList' }") 資訊 a.nav-item(href="/pages/quanzi/list") img.nav-icon(v-if="$route.name === 'QuanziList'", src="/static/assets/quanzi-active.png") img.nav-icon(v-else, src="/static/assets/quanzi.png") .nav-title(:class="{ active: $route.name === 'QuanziList' }") 圈子

• rich-text 組件，使用 v-html 實現 #1945f3f
• swiper 組件，使用 vue-swiper-component 實現 #f4a4e1a
• toast 及 loading 接口，使用 vue2-toast 實現 #cb1d9d3

// src/utils/wx.js import Vue from 'vue' export default { showNavigationBarLoading () { Vue.prototype.$loading('加載中') }, hideNavigationBarLoading () { Vue.prototype.$loading.close() }, showToast ({ title }) { Vue.prototype.$toast.center(title) } }

• 下拉刷新及上拉加載，使用 vue-pull-to 實現 #38647db

5.Web 優化

• 使用 minireset 重置瀏覽器默認樣式，部分標簽在小程序中的默認樣式與瀏覽器不同，也需進行處理 #e98f5ba
• 引入 babel-polyfill，提高兼容性 #c184166

維護

在初步完成 Web 版的轉換之后，便可以再次切換回主分支，后續的 feature 及 bugfix 均在主分支進行，

 

待主分支發版后 切換到 web 分支進行一次合並操作，可能會產生少量沖突，

 

但也都會比較容易解決，最后處理下新引入的小程序特性即可，整體而言可維護性還是比較好的

總結

整個轉換過程還是比較順利的，主體部分約 1 個多小時完成，相對於小程序 web 的環境更為開放，

 

所以大部分小程序的 api 可以通過各種方式模擬，由於是在兩個不同的分支進行，

 

也可以放心地使用各種瀏覽器端地特性，下面是幾點開發及轉換中的建議：

 

• 下拉刷新及上拉加載盡量以 method 的形式實現，便於 web 中復用

onPullDownRefresh () {
  this.refresh() }, onReachBottom () { this.loadmore() }, methods: { ...mapActions([ 'getSlides', 'getNews' ]), async refresh () { await Promise.all([ this.getNews({ r: 2, init: true }), this.getSlides() ]) wx.stopPullDownRefresh() }, loadmore () { const { news } = this const lastnews = news[news.length - 1] this.getNews({ r: Date.parse(new Date(lastnews.postdate)) }) }, }

• 樣式及腳本盡量不要直接修改原有代碼，  可通過 mixin、新建 style 標簽等方式實現，  避免造成沖突

展望

• 雙端統一的 UI 庫，目前來看只能使用一些簡單的 css 類庫
• 更好的路由支持，理想狀態下，可以通過 vue-router 的配置文件自動生成各頁面的 main.js 文件，
• 並配置 entry，開發 .vue 文件時，可以直接使用 this.$route this.$router 及 router-link 完成相關操作，避免每次手動修改

附

1. Git 倉庫

• Mpvue：https://github.com/Meituan-Dianping/mpvue
• IT之家Lite：https://github.com/F-loat/ithome-lite

1. Demo

• IT之家Lite Web 版: http://ithome.youngon.com.cn