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