小程序框架MPVUE

官方文档：http://mpvue.com/
小程序开发使用vue语法，支持使用 npm 外部依赖，可以与h5做到部分代码共用，共用h5拆分出来的模块。安装：

image.png
目录结构：
image.png
npm run dev运行项目，即可在微信开发者工具中预览调试，支持文件修改实时预览。

现在将原有h5项目转为小程序，将原有项目的src文件夹拷贝至mpvue项目，然后开始改造

1. 将axios换成wx.request
2. 注册的全局自定义组件删除（不支持）
3. 删除路由文件，小程序是多页应用，路由没有用（可以获取参数，不能跳转）

4. 根main.js添加

   
   image.png

5. 为每个vue文件添加main.js，为每个页创建自己的vue实例，并注册vuex（实际用的是Storage）、路由（可以获取参数，不能跳转）等。其它可以使用原来的代码。

   
   image.png
6. mpvue默认打包pages，修改webpack.base.conf.js

// const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
const pagesEntry = getEntry(resolve('./src'), 'views/**/main.js')

使用框架后的文件夹是这样的：

360截图16290612558751.jpg

开发时语法使用vue，mpvue会将语法转为小程序语法

1. html转化：如将div转为view。
   一些标签在开发时还是要手动转化，如map。
   如h5的图片组滑动在小程序有封装好的swiper。
   小程序页面绑定不支持js方法
   不支持router-link
   ...
2. css转化：会将css、sass、lese转为wxss；px自动转rpx。
   rem需要自己处理
   转完后样式会有偏差，需要调整（这个很耗时间其实）
   小程序自定义组件中只能用class，后代选择器有时会有非预期的表现
3. js：打包压缩。
   一些功能需要做兼容，如分享、数据请求、路由跳转、定位等

build后的代码如下：

image.png
image.png

总结：可以共用h5拆分出来的模块，小程序开发量会减少40%-80%，具体要看需求。