mpvue对接微信小程序详细流程指南

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开发流程一样，需要注意的就是 生命周期部分，搞清楚了生命周期，开发基本就没什么问题了。

1. 技术栈

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即可

1. 生命周期

生命周期部分，具体先看一下这篇文章

https://blog.youkuaiyun.com/qq_35430000/article/details/99710462

小程序生命周期  onLoad、onShow等生命周期够用，可抛弃vue原有生命周期。

总结一点：使用mpvue开发，采用vue的开发方式，使用小程序的生命周期。

缺点：mpvue生命周期有一个缺陷，举个例子：当前页面表单填充的内容 在下个页面点击返回后依然存在，也就是说 页面的data没有销毁，这时候需要手动去初始化和清空数据。

这个缺陷在 mpvue  issue上面有提到：

https://github.com/Meituan-Dianping/mpvue/issues/140

1. 微信小程序api调用

因mpvue是适应微信小程序的框架，所以mpvue是可以识别 微信 wx变量的，小程序所有的api 都可以通过wx进行调用，需要注意的就是 要使用变量接收vue实例 this

Api：https://developers.weixin.qq.com/miniprogram/dev/api/

1. 打包环境区分

可以看到在mpvue package.json中不但可以打包微信小程序，还对头条、百度、支付宝等小程序有支持，这里不涉及这些产品，红框部分直接删除，然后设置我们需要的变量 dev sit uat prd等。

因NODE_ENV在一些配置中已经使用，为了减少编译出错，另外设置变量WX_ENV作为服务器环境的区分，dev.env.js 和prod.env.js的区分如下

1. 引入第三方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

1. 微信小程序屏幕适配

微信小程序采用自适应的 单位 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

值得注意的是，每次上传版本，都会覆盖原来已上传的开发版本。

体验版二维码可直接微信扫码查看