258资源分享网

  历经了接近两个月的摸索滚爬，抓头吃瓜，各种优化（单押X3），我主导开发的第一个小程序终于要上线了（SKR SKR！）！当然首先要感谢老板没有杀了我——因为在6月初我刚拿到小程序PRD的时候老板问我多久可以做好，我看了看之后说“两周”吧，咳咳，然后。。。一直到现在，我还能活着很Amazing有没有？？？当然这其中也有一些为了追求“精品小程序”而一改再改所用的时间。好了，废话还是不多说了，下面就开始总结下吧～

框架的选择

    原生的小程序我本人并没有学习过，更别提拿来开发一款商用的小程序了，刚好还在前公司时，当时的前端团队在提到小程序的解决方案时有分享了mpvue，到了新公司之后技术老大也有提到mpvue，而我本人过去一年多也一直在写vue，对vue写法比较熟悉，而且新公司团队对小程序期待已久，希望尽快上架，所以选择mpvue来开发也是最快最合理的了！

项目的搭建

    看了mpvue的官方文档，项目的搭建自然也选择了官方推荐的 vue-cli ， 在看了五分钟上手教程后，使用命令

vue init mpvue/mpvue-quickstart my-project 

生成了基本的项目，在后来的开发中，项目的配置基本没做改动，只是添加了less-loader。

目录结构

基本上是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 复制代码 踩到的坑

    相信很多使用过mpvue的同学都或多或少猜到了一些坑，我也是踩到了不少的坑浪费了不少的宝贵时间，虽然网上关于mpvue的踩坑的文章一搜一箩筐，但我还是要写一下。。。下面就是我在本次小程序开发过程中遇到的坑（们）以及针对它们的解决方案：

### tabBar图标问题 复制代码

    在 配置小程序原生的底部tabBar 时，遇到了第一个问题：在将设计师给我的图标icon路径设置正确的情况下， 开发者工具上的tabBar的图标总是会很大，而且几乎占满了整个高度 ，相当难看，搜了很多博客都没有找到解决办法，期间还尝试了自己实现tabBar，但是在看到那令人呕呕呕的效果之后，我还是放弃了，又回到原生的tabBar，然后静下心来想了想，最后在对比github上的一些mpvue的项目之后，发现原来是图标icon的问题，最后成功解决： 就是icon尺寸保持不变，然后四周留出合适的透明（？）空白 ...很简单有木有？就这浪费我很多脑细胞，原谅我的愚钝（智障脸）。。。当然了，原生的tabBar其实还有一个问题就是， tabBar的标题文字在真机上会离底部特别特别近 ，这个我没找到解决办法，除了自己实现tabBar。。。

### 详情页数据保留之前旧数据的问题 复制代码

    这个问题我想很多同学都遇到过了，而且我看到mpvue github上的issues里面有很多人都遇到了这个问题并且都在持续关注，足以说明这是个痛点问题，谁让它会影响小程序的用户体验呢。。。到目前为止看到的比较统一的解决办法就是：在（详情）页面onLoad的时候，将要在本页面展示的数据初始化并且进行新的赋值，举:chestnut:如下：

<template> <html-text :text="htmltext"></html-text> </template> <script> import htmlText from xxxxx export default { components: { htmlText }, data () { return { htmltext: '' } }, onLoad () { this.htmltext = '' this.$http.get('xxxxxxxx').then((res) => { this.htmltext = res.htmltext }) } } </script> 复制代码

    其他数组或者对象类型的处理可能会麻烦一些，但是方法类似，在数据请求返回之前的这段时间内不想留空白尬对用户的话就自己做一些loading，总是要强过用户先面对旧数据再一闪跳到新数据的体验。。。

### created钩子函数在项目初始化时就全部执行的问题 复制代码