Mpvue 是一個(gè)使用 Vue.js 開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)，同樣也使得一套代碼同時(shí)復(fù)用在小程序和 Web 中成為可能。本文將以 IT之家Lite 小程序的 Web 轉(zhuǎn)換經(jīng)過(guò)為線索，大致介紹一下轉(zhuǎn)換的基本步驟及需要注意的一些事項(xiàng)。

目錄結(jié)構(gòu)

省略了部分與轉(zhuǎn)換無(wú)關(guān)的文件

├─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

轉(zhuǎn)換步驟

0.前期準(zhǔn)備

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

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

• 使用 flyio 作為請(qǐng)求庫(kù)，配置 alias 將 flyio 指向 flyio/dist/npm/wx
• 基于原分支新建 web-version 分支

1.修改打包配置

• 可以在原有配置基礎(chǔ)上修改，主要涉及 entry、target 及 loader 相關(guān)的配置項(xiàng)，這里我直接通過(guò) vue-cli 生成了一個(gè)新的項(xiàng)目，復(fù)制 build、config 文件夾及 eslint、babel 等的配置文件替換原有配置，使用新項(xiàng)目的 package.json 并做相應(yīng)修改，新建項(xiàng)目時(shí)各選項(xiàng)盡量與原項(xiàng)目保持一致 #ece3a76
• 修改 main.js，指定掛載元素，順利的話，這步之后執(zhí)行 npm run dev 便已經(jīng)可以跑起來(lái)了，有報(bào)錯(cuò)的話解決相應(yīng)錯(cuò)誤即可

2.配置路由

• 添加 vue-router，并進(jìn)行相應(yīng)配置，建議使用 history 模式 #ddf94bc
• 修改路由參數(shù)獲取相關(guān)的代碼 #b949197
• 使用 router-link 替換 a 標(biāo)簽，避免頁(yè)面重載 #eb09297

3.調(diào)整請(qǐng)求接口

• 配置 alias 將 flyio 指向 flyio/dist/npm/fly
• 小程序中不會(huì)有跨域的問題，但 web 中需配合后端進(jìn)行請(qǐng)求轉(zhuǎn)發(fā)或通過(guò)其他方式來(lái)解決這一問題 #f963975

4.轉(zhuǎn)換小程序組件及 API

• 底部導(dǎo)航欄，自己布局實(shí)現(xiàn) #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 實(shí)現(xiàn) #1945f3f
• swiper 組件，使用 vue-swiper-component 實(shí)現(xiàn) #f4a4e1a
• toast 及 loading 接口，使用 vue2-toast 實(shí)現(xiàn) #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 實(shí)現(xiàn) #38647db

pull-to(:top-load-method="refresh", :bottom-load-method="loadmore")

5.Web 優(yōu)化

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

維護(hù)

在初步完成 Web 版的轉(zhuǎn)換之后，便可以再次切換回主分支，后續(xù)的 feature 及 bugfix 均在主分支進(jìn)行，待主分支發(fā)版后切換到 web 分支進(jìn)行一次合并操作，可能會(huì)產(chǎn)生少量沖突，但也都會(huì)比較容易解決，最后處理下新引入的小程序特性即可，整體而言可維護(hù)性還是比較好的

總結(jié)

整個(gè)轉(zhuǎn)換過(guò)程還是比較順利的，主體部分約 1 個(gè)多小時(shí)完成，相對(duì)于小程序 web 的環(huán)境更為開放，所以大部分小程序的 api 可以通過(guò)各種方式模擬，由于是在兩個(gè)不同的分支進(jìn)行，也可以放心地使用各種瀏覽器端地特性，下面是幾點(diǎn)開發(fā)及轉(zhuǎn)換中的建議：

• 下拉刷新及上拉加載盡量以 method 的形式實(shí)現(xiàn)，便于 web 中復(fù)用

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)) })
  },
}

• 樣式及腳本盡量不要直接修改原有代碼，可通過(guò) mixin、新建 style 標(biāo)簽等方式實(shí)現(xiàn)，避免造成沖突

展望

• 雙端統(tǒng)一的 UI 庫(kù)，目前來(lái)看只能使用一些簡(jiǎn)單的 css 類庫(kù)
• 更好的路由支持，理想狀態(tài)下，可以通過(guò) vue-router 的配置文件自動(dòng)生成各頁(yè)面的 main.js 文件，并配置 entry，開發(fā) .vue 文件時(shí)，可以直接使用 this.$route this.$router 及 router-link 完成相關(guān)操作，避免每次手動(dòng)修改