第一个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，这个项目的解构我基本上是按公司那个项目搭建的，准备放一些经常使用的组件，后续会逐步完善更新，欢迎带啊支持。

遇到的一些坑

一、关于分享功能

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

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

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

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

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

三、关于样式适配问题

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

总结

作完一个项目，真正到了总结时才发现有些问题没有及时总结，等作完项目以后可能都记忆模糊了，因此不管再忙，仍是得及时总结才能记录下那些get到的知识点。

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

参考文章

• mpvue-docs
• 小程序开发框架技术分析选型
• 第一个mpvue小程序开发完了，来总结下吧
• 理解mpvue的生命周期