微信小程序项目踩过的几个坑

一、前言

近期，开始了一段辛酸的还未开始就已经结束的“创业”（参见我的第二次创业，以梦为马，莫负韶华）。大体上是开发了一款微信小程序，关于创业这件事情就不细说了，本文主要介绍一下开发小程序的过程中踩过的几个坑。

二、注册

开发一款功能全乎的小程序，在未动键盘开始码代码之前就要涉及到账号注册、微信认证、支付申请等等，这里面也有一些坑。

首先是必须要企业认证才能有微信支付功能，以个人名义申请不能进行支付。微信认证还算容易，只需要支付300元即可。支付申请的时候会让你选择需要申请的经营种类，此处如果与企业执照上相同会比较容易通过，我们的经营项目不太一致，刚开始写的比较简单被直接驳回，后面我写了一段比较长的话详细解释了一下要做个什么、为什么申请此类型，估计审核的人被我感动了，于是顺利通过。

三、HTTPS和备案

如果小程序需要和后台交互，那么交互时只能选择域名的方式，且此域名必须经过ICP备案，并且只能采用HTTPS方式。

ICP备案比较麻烦，可以直接选择购买阿里云服务器，这应该是最方便的方式了吧。

HTTPS建议使用百度云，可以申请到一年的免费证书，申请也比较容易。

四、开发

回归到本行。其实小程序开发是个涉及到方方面面的工作，要求还是蛮高的，一套下来基本也就是个全栈工程师了。

小程序本身就分前台和后台，就类似与网站开发，wxml对应html、wxss对应css、js就是js、还多了个json用于配置等。说白了就是微信把这些东西以一定的方式封装起来了，但是我个人感觉封装的也不是那么理想，所以有点不太顺手。

小程序通信的后台可以采用各种语言，相当于网页的后台，也基本等同于restful接口。此项目我们使用了python的django框架，开发起来还蛮容易的。

整个一套下来，哪方面都有接触，我的合伙人包亮是个编程大牛，对我进行了很多指导，我对开发这件事情和js、python这两种语言都有了全新的认识。

言归正传，下面开始介绍开发过程中踩过的坑。

4.1 js回调

刚开始js代码写的很冗长，一个函数有上百行。并不是我不懂得代码编写的艺术，而是小程序的js开发往往是一个请求中的sucess以及fail中嵌套另一个请求，函数只能越写越长，最后各种功能交织在一起，变量也混杂在仪器，我自己实在看不下去了，于是开始重构，将一些功能提取出来组成函数，整体代码清爽了不少，但是出现了一些让我很费解的bug，大神简单看了一下直接指出问题来了，本来应该嵌套的异步函数写成了并列，这样导致函数在执行的时候没有时间上的先后顺序，于是就会出现莫名其妙的bug，这个问题我是有所注意的，但是有些地方也确实没有注意到，他告诉我你应该将各种回掉函数作为参数传入，这样就不会再出问题。简单如下：

function b() {
    // do something when sucess
}

function a() {
    wx.request({
        url:'...',
        sucess: function(res) {
            b();
        }
    })
}

a();

这是我原来写的方式，当然比这复杂的多，所以不注意的时候就会将b写到a的后面，其实真正的方式应该是这样：

function b() {
    // do something when sucess
}

function a(aSucess) {
    wx.request({
        url:'...',
        sucess: function(res) {
            aSucess()
        }
    })
}

a(b);

这样就很清晰的知道a函数里当请求成功的时候做了什么事情，因为直接在调用a的时候就已经传入其中了。

4.2 app.js中的异步函数如何保证可靠性

有的时候需要在app.js的onLaunch事件中向后台请求一些数据，比如用户信息等等（非微信用户信息，但需要与微信openid关联），取出这些信息后在加载用户页面的时候会再向后台请求些数据进行展示等，但是app.js和页面之间无法进行普通回掉，这样就会造成在app.js中还没有请求完成，数据还是undefined而页面中使用此数据就会造成错误。后来查看了一些文档，发现可以在app.js中为特定数据自定义事件，用于在其他页面判断，方式如下：

app.js中:

wx.request({
    url: '',
    success: res_user_info => {
      if (this.userIdCallback) {
        this.userIdCallback(res_user_info)
      }
      this.globalData.userId = res_user_info.data.id;
    }
})

这样就在app.js中定义了一个userIdCallback事件，该事件完成的时候表示已经从后台取到了用户数据。在其他页面即可通过此种方式进行判断：

if (app.globalData.userId == null || app.globalData.userId == undefined) {
    app.userIdCallback = res_user_id => {
        // do something
    }
} else {
    // do something
}

即首先判断此数据是否已经请求到，如果还未完成则等待此数据完成，然后在其回调函数中再完成有关操作。

4.3 tabBar之间的切换

如果在app.js中设置了tabBar，则页面底部会出现相应的导航栏，但是页面中使用wx.navigateTo跳转到的页面底部不显示导航栏，并且如果需要切换到导航栏内的任何页面，都需要使用wx.switchTab函数而不是wx.navigateTo函数。

4.4 数据绑定

微信小程序没有数据双向绑定，在Page对象中设置的data只能单向改变前台渲染，而前台改变无法同步更改此变量。那么如果需要将前台的变化也同步到后台，只能监控前台控件的变化事件，如input的bindinput事件，在此事件中对输入值进行判断，如下：

<input bindinput="bindMoney" value="{{money}}" />

其中value="{{money}}"用于后台到前台的绑定，而bindinput则用于前台到后台的绑定，如下：

bindMoney: function (e) {
    var value = parseInt(e.detail.value);
    this.setData({
      money: value
    })
}

并且小程序在绑定变化的时候前台会出现undefined的情况，如果是图像的话就会造成请求错误，倒是无伤大雅，时间很短，前台基本不会察觉。

五、提交审核

这是最坑的一点，吭哧吭哧的做了半天，最后居然因为种种非技术原因而无法通过审核。好吧，最为个体我们真的无法说什么，只能对微信这个大平台言听计从，希望我们更改相应页面后能够通过审核。审核太严失去了自由的土壤，微信如何保证有好的产品出现呢？

六、总结

本文简单介绍了在微信小程序开发过程中踩过的一系列坑，希望对后来者能够有所帮助。