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

叁歲伎倆 2021-08-19 11:09 552阅读 0赞

Mpvue接入微信小程序指南

Mpvue，即使用vue的开发模式结合微信小程序api来开发微信小程序，好处是免去了学习原生小程序语法的时间，提高开发效率和保持框架一致性可复用。但mpvue自身也存在一些缺陷和vue对比的些许差异，所以从以下几个方面说明mpvue接入微信小程序的流程。

*  安装以及引入

（1）安装参考：[http://mpvue.com/mpvue/][http_mpvue.com_mpvue]，流程和安装vue一样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

（2）目录结构

目录结构也没什么要说的，结构和采用vue-cli3.0生成的项目类似。需要注意的就是 static目录，mpvue项目的静态资源（图片、图标、第三方sdk、json数据等）都应该放在这个项目中。因为在编译成微信小程序的过程中，static会原封不动的放在 微信小程序 static目录下，这样就减少了编译时间和减少出错的几率。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

（3）微信开发者工具

①下载微信开发者工具

[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

此工具可高效开发微信小程序和公众号项目

②引入项目

可新建也可以引入，这里我选导入项目。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

Appid可以使用已经注册号的小程序，如果没有注册，可以使用测试号，但测试号会少一部分功能，比如上传代码。开发前先需要管理员在小程序后台加入开发者名单（测试号不需要）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

*  开发

开发模式和现有的vue开发流程一样，需要注意的就是 生命周期部分，搞清楚了生命周期，开发基本就没什么问题了。

1.  技术栈

mpvue+vuex+fly.js+storage(缓存)

*   *  为了保证代码可迁移可复用性，不用微信自带的wx.request()做ajax请求，而是采用fly.js http请求库，这样就可以在其他h5或者web端复用。

[https://www.jianshu.com/p/99915695267a][https_www.jianshu.com_p_99915695267a]

*   *  小程序 的ui框架目前足够使用，就不需要引入额外的ui框架 ，比如weui，如需使用再安装。

[https://mpcomponent.github.io/mpvue-weui/guide/][https_mpcomponent.github.io_mpvue-weui_guide]

*   *  缓存，直接调用api即可

![2019082713583681.png][]

1.  生命周期

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

[https://blog.csdn.net/qq\_35430000/article/details/99710462][https_blog.csdn.net_qq_35430000_article_details_99710462]

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

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

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

![2019082713583686.png][]

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

[https://github.com/Meituan-Dianping/mpvue/issues/140][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/][https_developers.weixin.qq.com_miniprogram_dev_api]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

1.  打包环境区分

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5][]

因NODE\_ENV在一些配置中已经使用，为了减少编译出错，另外设置变量WX\_ENV作为服务器环境的区分，dev.env.js 和prod.env.js的区分如下![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 8][]

1.  引入第三方sdk，以引入腾讯地图 sdk为例

[https://lbs.qq.com/qqmap\_wx\_jssdk/index.html][https_lbs.qq.com_qqmap_wx_jssdk_index.html]

申请秘钥，下载对应sdk 等等。

*  把第三方包放在 static 目录下

![20190827135836115.png][]

*  需要在微信小程序管理后台加入 腾讯地图的信任名单合法域名，不设置这一步，小程序会报非法域名。[https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh\_CN][https_mp.weixin.qq.com_wxamp_home_guide_token_905227300_lang_zh_CN]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 9][]

*  需要注意的是，微信小程序正式环境貌似只支持https请求，所以原来http需要进行升级。所以在开发阶段，可以在详情的本地设置中，勾选不校验合法域名、https

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 10][]

1.  微信小程序屏幕适配

微信小程序采用自适应的 单位 rpx,750rpx正好就是一个屏幕宽度。用的时候大概是原来 px的一半左右，比如原来 20px字体，在小程序中需要 40rpx，大概适用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 11][]

*  版本发布

微信小程序提供了一整套代码发布审核上线的流程，只需等待审核通过即可。

（1）dev sit uat prd进行打包。

通过在package.json设置的命令进行wx 的打包，wx即为微信。

![20190827135836205.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 12][]

最后发现会在dist –>wx微信目录下已经打包好了对应的微信小程序包，wx目录即为mpvue解析转换成小程序语言的最终目录。

（2）代码上传，点击上传按钮，设置版本号和备注

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 13][]

（3）代码上传完毕后，可以在小程序管理后台看到上传的版本，这时可以对上传的版本进行操作，可以提升为体验版或者正式版。[https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh\_CN][https_mp.weixin.qq.com_wxamp_home_guide_token_905227300_lang_zh_CN]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 14][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 15][]

[http_mpvue.com_mpvue]: http://mpvue.com/mpvue/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/b3a4d002888a4b5b8c8588121f2f3188.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/5e64e3a4835a49dea4a3244fe3f66ba5.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210813/13dd3e28e67641a3ae8e9412377890da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210813/0b453d58fdc7485485269fb9d940c5aa.png
[https_www.jianshu.com_p_99915695267a]: https://www.jianshu.com/p/99915695267a
[https_mpcomponent.github.io_mpvue-weui_guide]: https://mpcomponent.github.io/mpvue-weui/guide/
[2019082713583681.png]: /images/20210813/eb53df90651248dd8138e641dd8c9da4.png
[https_blog.csdn.net_qq_35430000_article_details_99710462]: https://blog.csdn.net/qq_35430000/article/details/99710462
[2019082713583686.png]: /images/20210813/5ce6acee16e349a98d8d1244e5064bdb.png
[https_github.com_Meituan-Dianping_mpvue_issues_140]: https://github.com/Meituan-Dianping/mpvue/issues/140
[https_developers.weixin.qq.com_miniprogram_dev_api]: https://developers.weixin.qq.com/miniprogram/dev/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210813/e61ea6219217446f904c2e214abed288.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20210813/70bdc1212d724b9faa4c8e466e6636b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6]: /images/20210813/2844c044218c44368e2c641d80191531.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 7]: /images/20210813/602e6240737f46feb435c324e5714929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 8]: /images/20210813/6e00a49295404c108c5cd52a93673325.png
[https_lbs.qq.com_qqmap_wx_jssdk_index.html]: https://lbs.qq.com/qqmap_wx_jssdk/index.html
[20190827135836115.png]: /images/20210813/22d8772a87a141d886407cacd14da595.png
[https_mp.weixin.qq.com_wxamp_home_guide_token_905227300_lang_zh_CN]: https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh_CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 9]: /images/20210813/971130091ad245fe933118062f8f4446.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 10]: /images/20210813/cf33bb4e56ce473e994f1f89731dada0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 11]: /images/20210813/0a0ec7ebcb6147dca528bb9f429705e7.png
[20190827135836205.png]: /images/20210813/2cf45331cb4d480aad1053b2006cdc12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 12]: /images/20210813/c5f22569001e43769e81b2c89eec7c97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 13]: /images/20210813/60ec81d1ab514f879c0f60a12144d19b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 14]: /images/20210813/6d233111f7414793a3ca2e68498eedfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 15]: /images/20210813/910cdaabf29d40449edbf5cd05826529.png