使用mpvue开发小程序的坑和经验

历经了接近两个月的痛苦煎熬，我主导开发的第一个小程序终于要上线了！总结一下～

gh_f1e2f7f1f692_258.jpg

框架的选择

原生的小程序语法我只停留在看API阶段，由于公司H5的项目是基于VUE的，所以当MPVUE出来后就一直关注，最终选择了使用它来开发。

项目的搭建

跟着mpvue的官方文档，一步步走就OK

踩到的坑

1 tabBar图标问题

在 配置小程序原生的底部tabBar 时，遇到了第一个问题：在将设计师给我的图标icon路径设置正确的情况下， 开发者工具上的tabBar的图标总是会很大，而且几乎占满了整个高度 ，相当难看
解决办法： 就是icon尺寸保持不变，然后四周留出合适的透明空白

2.多页面共用一个page导致的一系列问题

https://github.com/Meituan-Dianping/mpvue/issues/140
https://github.com/Meituan-Dianping/mpvue/issues/300
mpvue github上此类问题简直多不可数，根本原因就是多个页面共用一个小程序页面导致生命周期混乱
解决办法 ：https://github.com/HelloZJW/mpvue-page-factory 目前找到的最优解决办法

3.数据更新DIFF问题

此问题官方最新版本貌似已经进行了一部分优化，但是我自己的项目使用还是有点问题 ，目前还是在使用社区提供的一套diff算法 https://github.com/Meituan-Dianping/mpvue/issues/639

4.created钩子函数在项目初始化时就全部执行的问题

解决办法 ：不要用created钩子函数

Flyio的使用

在小程序的开发中，并没有使用小程序原生的wx.request()来进行数据交互，而是选择了mpvue文档里推荐使用的Flyio，Flyio的介绍就不多做介绍，可以自己看文档。

最近发下uni-app 不错，尝试迁移了一下发下完美兼容。打包了下APP使用体验也很不错