历经了接近两个月的摸索滚爬，抓头吃瓜，各种优化（单押X3），我主导开发的第一个小程序终于要上线了（SKR SKR！）！当然首先要感谢老板没有杀了我——因为在6月初我刚拿到小程序PRD的时候老板问我多久可以做好，我看了看之后说“两周”吧，咳咳，然后。。。一直到现在，我还能活着很Amazing有没有？？？当然这其中也有一些为了追求“精品小程序”而一改再改所用的时间。好了，废话还是不多说了，下面就开始总结下吧～
1.框架的选择
    原生的小程序我本人并没有学习过，更别提拿来开发一款商用的小程序了，刚好还在前公司时，当时的前端团队在提到小程序的解决方案时有分享了mpvue，到了新公司之后技术老大也有提到mpvue，而我本人过去一年多也一直在写vue，对vue写法比较熟悉，而且新公司团队对小程序期待已久，希望尽快上架，所以选择mpvue来开发也是最快最合理的了！
2.项目的搭建
    看了mpvue的官方文档，项目的搭建自然也选择了官方推荐的vue-cli， 在看了五分钟上手教程后，使用命令
vue init mpvue/mpvue-quickstart my-project
生成了基本的项目，在后来的开发中，项目的配置基本没做改动，只是添加了less-loader。
3.目录结构
基本上是vue-cli生成的目录结构，加了部分文件夹，主要是与后台进行数据交互所使用的框架flyio的配置文件夹（api文件夹），以及整个项目数据管理所使用的vuex（store文件夹）,整体目录结构如下：
project
└───build
└───config
└───dist
└───node_modules
└───src
    └───api
        |    ajax.js // flyio请求与响应拦截器的配置文件
        |    config.js // 请求的配置文件
        |    index.js // 生成请求api实例文件
        |    Server.js // 项目的数据请求统一管理文件
    └───components
    └───pages
    └───store
        └───modules // vuex模块文件夹
        |    index.js // vuex处理文件
    |   App.vue
    |   config.js
    |   main.js
└───static   
    └───images
    └───lib
    └───weui
│   README.md
│   package.json  
│   package-lock.json  
复制代码4.踩到的坑
    相信很多使用过mpvue的同学都或多或少猜到了一些坑，我也是踩到了不少的坑浪费了不少的宝贵时间，虽然网上关于mpvue的踩坑的文章一搜一箩筐，但我还是要写一下。。。下面就是我在本次小程序开发过程中遇到的坑（们）以及针对它们的解决方案：
4-1.tabBar图标问题
    在配置小程序原生的底部tabBar时，遇到了第一个问题：在将设计师给我的图标icon路径设置正确的情况下，开发者工具上的tabBar的图标总是会很大，而且几乎占满了整个高度，相当难看，搜了很多博客都没有找到解决办法，期间还尝试了自己实现tabBar，但是在看到那令人呕呕呕的效果之后，我还是放弃了，又回到原生的tabBar，然后静下心来想了想，最后在对比github上的一些mpvue的项目之后，发现原来是图标icon的问题，最后成功解决：就是icon尺寸保持不变，然后四周留出合适的透明（？）空白...很简单有木有？就这浪费我很多脑细胞，原谅我的愚钝（智障脸）。。。当然了，原生的tabBar其实还有一个问题就是，tabBar的标题文字在真机上会离底部特别特别近，这个我没找到解决办法，除了自己实现tabBar。。。
4-2.详情页数据保留之前旧数据的问题
    这个问题我想很多同学都遇到过了，主要是因为mpvue中页面跳转后并没有销毁页面实例，而是将其推入页面栈中，所以会保存之前的旧的数据，而且我看到mpvue github上的issues里面有很多人都遇到了这个问题并且都在持续关注，足以说明这是个痛点问题，谁让它会影响小程序的用户体验呢。。。到目前为止看到的比较统一的解决办法就是：在（详情）页面onLoad的时候，将要在本页面展示的数据初始化并且进行新的赋值，举

奈斯