微信小程序小结：（二）

一、给每个页面设置页面id，便于区分（页面跳转传递参数的实现）

如从页面A跳转到页面B：

A向B传递参数可以使用key=value&key2=value2的形式拼接到path后面，其实就是query参数

例子：

var url = '/pages/bindResult/bindResult' + '?bindType=0' + '&telephone=' + tool.getBindPhone()
wx.navigateTo({
 url: url,
})

在页面B获取的参数是在onLoad函数中，例子如下：

  onLoad: function (options) {
    console.log("进入页面传递的参数为-----------")
    console.log(options)

    // 解析传递过来的参数
    // 电话号码
    var telephone = options.telephone
    this.setData({
      telephone: !user.isNullString(telephone) ? telephone : ''
    })
    // 绑定方式
    var bindType = options.bindType
    if (!user.isNullString(bindType)) {
      this.setData({
        bindType: bindType
      })
    }
  },

注意

• options 是一个对象，可以使用options.key来获取key对应的值

页面B向页面A传递参数

使用的是getCurrentPages()函数来获取当前页面栈里面的所有页面，然后进行遍历找到相应的页面，对改页面进行操作

例子:

    var pages = getCurrentPages()
    // 优化 返回的时候没有显示的空页面
    if (pages.length > 0) {
      for (var i = pages.length - 1; i >= 0; i--) {
        var page = pages[i]
        var pageId = page.data.pageId
        if (pageId == 'm_pictures_and_videos') {
          page.setData({
            isFromUploadPage: true
          })
          break
        }
      }
    } else {
      wx.redirectTo({
        url: '/pages/picturesAndVideos/picturesAndVideos',
      })
    }

上面实现的逻辑是:上传图片完成后需要回到图片列表页面并且刷新图片列表页面(上传图片页面和图片列表页面是两个页面)，我们使用函数getCurrentPages()获取到当前的页面栈，然后进行反向遍历(一般我们使用的是wx.navigateTo跳转页面，所以反向遍历可以以最少的时间找到需要的页面)，因为我们事先设置了每个页面的页面id，所以判断是我们需要的页面，是的话就直接修改页面的参数

ps：上述的例子也是一个优化吧，之前使用的在上传图片页面成功之后直接刷新图片列表页面，但是当上传图片很多的时候，页面有时候会莫名其妙的空白了，所以后面就优化了实现，在上传图片页面成功之后修改图片列表页面的参数，回到上一个页面的时候判断参数isFromUploadPage，为true的话就刷新页面；

二、防止连续点击两次或者多次的操作

小程序的点击事件响应有时候会很慢，这样就会导致在短时间内连续点击就会多次调用事件绑定的方法，这样肯定是不友好的，有时候还会导致错误的结果，需要处理；

小程序的事件详情见官方的连接:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

主要用到的是时间戳这个属性timeStamp，核心的就是globalEventTimeStamp为0可以点击，否则不可以点击。代码如下：

    // 是在app.js中处理的
    // 事件时间戳
  globalEventTimeStamp: 0,

  /**
   * 判断事件是否可以点击，防止多次点击
   */
  canExecuteEvent: function (event) {
    var that = this
    var timeStamp = event.timeStamp
    var beforeTimeStamp = this.globalEventTimeStamp
    console.log("现在时间戳为:" + timeStamp)
    console.log("全局时间戳为:" + beforeTimeStamp)
    if (beforeTimeStamp == 0) {
      console.log("全局时间戳为0，可以点击")
      this.globalEventTimeStamp = timeStamp
      setTimeout(function () {
        that.globalEventTimeStamp = 0
        console.log("事件倒计时结束-------")
        console.log("全局时间戳为:" + that.globalEventTimeStamp)
      }, 1000)
      console.log("事件倒计时开始-------")
      return true
    } else {
      console.log("全局时间戳不为0，不可以点击")
      return false
    }
  },

利用的是全局时间戳为0才可以执行点击事件，否则不可以执行；点击事件之后把事件的时间戳赋值给全局时间戳并开启倒计时，这里设置的是1000，即1s，这里可以自己配置；倒计时结束之后再把全局时间戳赋值为0，表示可以执行下一次的点击事件；

由此可以引发出开启/禁用事件的点击方法，如下：

  /**
   * 开启事件点击
   */
  enableExecuteEvent: function () {
    this.globalEventTimeStamp = 0
  },

  /**
   * 禁用事件点击
   */
  disableExecuteEvent: function () {
    this.globalEventTimeStamp = 1000
  },

使用的时候需要先判断可不可执行事件，如下:

```
goToFeedBack: function (event) {
   if (!app.canExecuteEvent(event)) {
     return
   }
}
```