《微信小程序开发之踩坑记录》

发表于 | 本文总阅读量 次

概述

公司终于立项了微信小程序项目，估计是想从之前的backbone框架体系中逃脱出来，技术驱动一下业务的发展。前段时间都是在基于现有框架的基础上开发一下新的活动插件等等繁杂笨重的工作，某化妆品牌的828主题活动，双11主题活动插件等等，真是不想过多的聊这个。现在下定决心要做小程序，那就好好做一个产品出来。这篇blog会记录小程序开发中遇到的种种坑，不间断的更新。

路由tabBar

小程序是一个多 tab 应用（可在底部或顶部有 tab 栏切换页面），可以在app.json中配置tabBar选项，最多5个，最少2个。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- app.json文件 -->
"tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-actived.png"
      },
      {
        "pagePath": "pages/userinfo/infolist/infolist",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my-actived.png"
      }
    ]
}

这些在小程序的官方文档中都能在例子来研究，不多讲。在开发中我一般喜欢将目前在构建的页面先配置到tabBar中，这样方便编译调试，问题来了，一次调试过程中，tabBar配置的页面死活无法通过点击tab图标打开，多次检查app.json文件，目标文件都未发现问题。后来多次检查实验才发现是某内页中使用了wx.navigate()方法指向了目标页，又在app.josn的tabBar配置中指向了这个目标页，导致无法通过tab图标打开页面。

不要同时通过wx.navigate()及wx.redirectTo与tabBar来指定同一页面，会导致点击tab图标无法打开目标页面。

下拉刷新回弹动画在ios端的问题

做下拉刷新时，最初考虑到用户体验问题，在下拉刷新时先给一个wx.showLoading()正在加载的提示，之后获取数据后再调用wx.hideLoading()关闭loading框。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 下拉刷新
onPullDownRefresh: function () {
  this.refreshOrders();
},
refreshOrders: function(){
  wx.request({
    success: res => {
      ...
      wx.hideLoading();
      wx.stopPullDownRefresh();
    }  
  })
}

初期感觉不错，下拉时提示正在加载，数据有了之后关闭loading。但是在ios端下拉回弹的动画总是会过度回弹，导致顶部元素被遮挡，同时多次下拉会有几率触发页面卡下来的bug，本来以为是ios11的bug，但是发现其他小程序并未有此问题。后来思考了下，其实小程序的下拉刷新是有个顶部动画效果的，并不需要自己再做一层loading提示，去除wx.showLoading事件后，发现原来的下拉回弹bug也不见了，估计是两者共用导致的。

下拉刷新时不需要做wx.showLoading的提示，多此一举，反倒会触发ios的回弹动画bug

关于app.json中pages的配置问题

先说结论

不要在app.json的pages中配置自定义模板及组件页面！！！

这个坑我觉得属于不经意碰见了就会恶心一下午，碰不见的人就会觉得这bug很low，不值得一说。先看官方文档说明：接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
注意，这里说的是页面，page。我想大多数开发者在用小程序的开发工具新建页面时，都会使用在目录中右键-新建-Page这种方式吧，一次建好4个同名的.js、.json、.wxml、.wxss文件，接下来就是写写写了，以这种方式新建page，小程序开发工具会自动帮你在app.json文件的Pages中帮你添加这个页面，很方便对不对。问题来了，一般的template不需要.js和.json文件，自定义的组件一般也不需要.json文件，坑就坑在如果你不注意开发工具自动帮你在Pages配置中添加了文件路径，那么你的组件和模板会一直报错，module xxxxx is not defined、xxx.js 出现脚本错误或者未正确调用 Page()等等，直接导致模板组件无效，页面无法编译等等一堆问题，定位bug所在会定位到想吐。这个坑，踩到真的很伤。