Mpvue接入微信小程序指南
Mpvue，即使用vue的开发模式结合微信小程序api来开发微信小程序，好处是免去了学习原生小程序语法的时间，提高开发效率和保持框架一致性可复用。但mpvue自身也存在一些缺陷和vue对比的些许差异，所以从以下几个方面说明mpvue接入微信小程序的流程。
- 安装以及引入
（1）安装参考：http://mpvue.com/mpvue/，流程和安装vue一样
（2）目录结构
目录结构也没什么要说的，结构和采用vue-cli3.0生成的项目类似。需要注意的就是 static目录，mpvue项目的静态资源（图片、图标、第三方sdk、json数据等）都应该放在这个项目中。因为在编译成微信小程序的过程中，static会原封不动的放在 微信小程序 static目录下，这样就减少了编译时间和减少出错的几率。
（3）微信开发者工具
①下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
此工具可高效开发微信小程序和公众号项目
②引入项目
可新建也可以引入，这里我选导入项目。 
Appid可以使用已经注册号的小程序，如果没有注册，可以使用测试号，但测试号会少一部分功能，比如上传代码。开发前先需要管理员在小程序后台加入开发者名单（测试号不需要）
- 开发
开发模式和现有的vue开发流程一样，需要注意的就是 生命周期部分，搞清楚了生命周期，开发基本就没什么问题了。
- 技术栈
mpvue+vuex+fly.js+storage(缓存)
-
- 为了保证代码可迁移可复用性，不用微信自带的wx.request()做ajax请求，而是采用fly.js http请求库，这样就可以在其他h5或者web端复用。
https://www.jianshu.com/p/99915695267a
-
- 小程序 的ui框架目前足够使用，就不需要引入额外的ui框架 ，比如weui，如需使用再安装。
https://mpcomponent.github.io/mpvue-weui/guide/
-
- 缓存，直接调用api即可
- 生命周期
生命周期部分，具体先看一下这篇文章
https://blog.csdn.net/qq_35430000/article/details/99710462
小程序生命周期 onLoad、onShow等生命周期够用，可抛弃vue原有生命周期。
总结一点：使用mpvue开发，采用vue的开发方式，使用小程序的生命周期。
缺点：mpvue生命周期有一个缺陷，举个例子：当前页面表单填充的内容 在下个页面点击返回后依然存在，也就是说 页面的data没有销毁，这时候需要手动去初始化和清空数据。
这个缺陷在 mpvue issue上面有提到：
https://github.com/Meituan-Dianping/mpvue/issues/140
- 微信小程序api调用
因mpvue是适应微信小程序的框架，所以mpvue是可以识别 微信 wx变量的，小程序所有的api 都可以通过wx进行调用，需要注意的就是 要使用变量接收vue实例 this
Api：https://developers.weixin.qq.com/miniprogram/dev/api/
- 打包环境区分
可以看到在mpvue package.json中不但可以打包微信小程序，还对头条、百度、支付宝等小程序有支持，这里不涉及这些产品，红框部分直接删除，然后设置我们需要的变量 dev sit uat prd等。
因NODE_ENV在一些配置中已经使用，为了减少编译出错，另外设置变量WX_ENV作为服务器环境的区分，dev.env.js 和prod.env.js的区分如下
- 引入第三方sdk，以引入腾讯地图 sdk为例
https://lbs.qq.com/qqmap_wx_jssdk/index.html
申请秘钥，下载对应sdk 等等。
- 把第三方包放在 static 目录下
- 需要在微信小程序管理后台加入 腾讯地图的信任名单合法域名，不设置这一步，小程序会报非法域名。https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh_CN
- 需要注意的是，微信小程序正式环境貌似只支持https请求，所以原来http需要进行升级。所以在开发阶段，可以在详情的本地设置中，勾选不校验合法域名、https
- 微信小程序屏幕适配
微信小程序采用自适应的 单位 rpx,750rpx正好就是一个屏幕宽度。用的时候大概是原来 px的一半左右，比如原来 20px字体，在小程序中需要 40rpx，大概适用。
- 版本发布
微信小程序提供了一整套代码发布审核上线的流程，只需等待审核通过即可。
（1）dev sit uat prd进行打包。
通过在package.json设置的命令进行wx 的打包，wx即为微信。
最后发现会在dist –>wx微信目录下已经打包好了对应的微信小程序包，wx目录即为mpvue解析转换成小程序语言的最终目录。
（2）代码上传，点击上传按钮，设置版本号和备注
（3）代码上传完毕后，可以在小程序管理后台看到上传的版本，这时可以对上传的版本进行操作，可以提升为体验版或者正式版。https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh_CN
值得注意的是，每次上传版本，都会覆盖原来已上传的开发版本。
体验版二维码可直接微信扫码查看
