第一个mpvue小程序开发总结

前言

说起小程序，其实在去年我都还只试着照着官方文档写过demo的，不过现在这家公司小程序做得比较多，我来之后也参与了几个小程序的开发了，最开始那几个是用的wepy，最近一个开始转用mpvue开发，最近这个项目终于上线了，我也来试着总结回顾一波吧。

关于框架的选择

我刚来现在的公司时，我就了解过有一个小程序框架叫mpvue被美团开源了，有过一个大致的了解。来了公司之后了解到我们公司已经有了一套自己的小程序技术栈那就是基于wepy的，而不是原生小程序，毕竟我们要开发的小程序不是简单的几个页面，而且原生小程序是不支持引入npm包的，原生语法开发的也相对慢一些。我们前端团队之前选择的wepy框架，这是一款腾讯出的小程序框架，类vue的语法，支持引入npm包，比较好地支持组件化开发，这是我们团队开发所必须的。

后来之所以要在最近一个项目中重新选型使用mpvue是因为，在使用wepy的过程中越来越觉得wepy像vue但又不如vue那么好用，而且我们项目一开始就是有计划做H5页面的，mpvue能够最大程度地支持我们代码的复用，而且大体上来说，mpvue能够提供全套的vue环境，包含数据管理vuex，这个跟我们其他用vue全家桶开发项目的切换时无缝的。套用一张网上比较原生、mpvue、wepy和taro的对比图吧（tarp暂时还没使用过，不评价）

项目的搭建

我们项目的基本结构是通过vue-cli生成的：

$ vue init mpvue/mpvue-quickstart my-project

然后就是常规的安装依赖和启动了，具体使用看文档。不过在开发过程中为了提高团队的效率以及最大程度上做到和原有的H5项目的一致从而做到最大程度地复用，我们还是改造了部分mpvue-quickstart 模板：

为了集中式页面配置和新增页面热更新，webpack打包的入口文件使用mpvue-entry做统一处理
为了和H5项目有尽可能一致的路由体验，引入了mpvue-router-patch
官方模版默认是没有安装预处理器相关的依赖的，我们项目中用的sass，需要安装node-sass、sass-loader两个依赖
数据请求这块我们使用的是fly.js，也叫flyio，并基于这个做了一些统一的封装，具体用法可以查阅前面提供的文档。之所以选择flyio，是因为它轻量且支持多种JavaScript，这样我们可以在不同项目中最大程度地复用请求代码。具体的封装代码下次专门用篇文章展开。
关于登录和授权

上面这张图是官方文档给出的一个完整流程，大体上来说就是先前端先通过用于授权获取code然后发送给我们自己的服务器，服务器通过登录凭证接口去微信接口服务器换取我们所需要的session_key和openid，之后我们与自己服务器之间的数据交互就只要验这个身份唯一标示就可以了。不过新版小程序更新之后用户登录权限需要手动触发了，这个需要注意。

还有一些改造的部分忘记了，先想到这些吧，完整的项目结构可以看我自己重新搭建的一个小项目https://github.com/wanCheng7/mpvue-components，这个项目的解构我基本上是按公司那个项目搭建的，准备放一些常用的组件，后续会逐步完善更新，欢迎带啊支持。

遇到的一些坑

1、关于分享功能

普通的页面分享给好友可以直接调用子弟你分享按钮

<butto n open-type='share'>分享</butto>

由于目前微信是不支持直接分享朋友圈的，所以要想分享朋友圈就只能曲线救国，那就是引导用户将要分享的图片保存到相册再分享这张图片。还有一种常见的场景就是分享我们带有小程序码的自定义图片给朋友或者朋友圈时可以先将这张图片用canvas绘制好，然后预览出来，预览出来之后用户是直接给朋友扫还是保存到手机里那就是用户的选择了。

2、关于页面数据缓存问题

因为mpvue中，小程序的生命周期钩子和vue的声明周期钩子是可以同时存在的，虽然官方不建议我们同时用，但是因为小程序一个页面的page在切换页面的过程中是不会销毁的，所以页面上的数据会被缓存起来，也就是说我们改变了A页面上的某些值，去到B页面之后再返回A页面的那些值还是改过之后的。这是我们想看到的吗？看业务情况，如果不是的话可以在onShow这个生命周期钩子里初始化那些变量。

3、关于样式适配问题

我印象比较深刻的一个问题是，如果不对页面最外层的盒子设置高度让里面的内容撑开盒子的话，在IOS系统下对底部设置margin和padding都是无效的，一定要设置一个min-height，而安卓没有这个问题。还有一些适配问题一时想不起来了。

总结

做完一个项目，真正到了总结时才发现有些问题没有及时总结，等做完项目之后可能都记忆模糊了，所以无论再忙，还是得及时总结才能记录下那些get到的知识点。

还有，就是想到那句话：能说到别人懂才是真的懂，发现自己在总结的过程中有些知识点当时查了资料似乎是懂了，可真正总结出来说给别人看时就有点说不上来了，说明还是理解得不够深入。所以，以后的文章不在于长而在于精，首先一定要坚持写同时每次尽量把一个小的知识点写得稍微深入一点点，加油！

参考文章