实际案例

按钮点击事件

就常见的登录流程来说, 心急的用户在输入账号和密码后会连续点击按钮事件, 从而会向后端发送多次登录请求, 影响了服务器资源, 为了解决这一问题有两种实现方式:

方法一: wx.showLoading的mask配置

wx.showLoading({
  title: 'title',
  mask: true
})

使用mask:true会从渲染层阻止用户的高频点击，但由于小程序双线程的渲染机制，这种方法偶尔会失效

对于传统的web开发, 可以通过loading的方式去阻止用户高频点击重复请求的，因为传统web开发渲染层执行的时候js是阻塞的。

但是对于小程序来说, 由于小程序是双线程的，webview渲染需要时间的，在loading还未渲染出来的时候，js逻辑层依然可以运行，所以想通过loading这种视觉层的方法去阻挡用户高频点击有时是无效的**。

这时候就需要采取其他方案，那就是不通过webview层去阻挡用户的点击，而是通过js控制，也就是通过变量加锁解锁的方式实现。

方法二: 变量加锁

var loadingCas = true // 全局变量
 bind(e) {
   wx.showLoading({
     title: '绑定中, 请稍等',
   })
   // 当loadingCas为true时才发起请求
   if (loadingCas) {
     loadingCas = false
     get(url).then(res=>{
       console.log(res.data.data) // 获取数据
     }).finally(res=>{
       wx.hideLoading({})
       loadingCas = true // 此时将全局变量改为true, 可以发起下一次请求
     })
   }
 },

封装wx.request方法

封装

在utils/request.js文件中

/**
 * request.js
 * 封装一个Promise风格的通用请求
 * url - 请求地址
 * option - 包含请求方式、请求参数的配置对象
 */
var app = getApp() // 引入全局app.js，在其中定义一些公共数据，比如baseUrl、token

const request = (url, options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: app.api.host + url, // 此处的app.api.host为定义在全局中的baseUrl
      method: options.method,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: options.data,
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

module.exports = {
  //封装get方法
  get(url) {
    return request(url, {
      method: 'GET'
    })
  },
  //封装post方法
  post(
    url,
    data = {
      UnionId: wx.getStorageSync('unionId')
    }
  ) {
    return request(url, {
      method: 'POST',
      data: data
    })
  }
}

使用

const { post } = require('../../utils/request')
var app = getApp()

post(app.api.score).then(res=>{
	console.log(res)
})

封装wx.showModal

封装

wx.showModal是我们在实际开发中经常用到的方法, 这里我进行了简单的封装

const showModal = (title, content, showCancel, confirmText = '确认', cancelText = '取消') => {
  return new Promise((resolve, reject) => {
    wx.showModal({
      title: title,
      content: content,
      showCancel: showCancel,
      success: res => {
        if (res.confirm) {
          resolve()
        } else if (res.cancel) {
          reject()
        }
      },
      cancelText: cancelText,
      confirmText: confirmText
      // cancelColor: 'cancelColor',
      // confirmColor: 'confirmColor',
      // editable: true,
      // placeholderText: 'placeholderText',
    })
  })
}
module.exports = {
  updateMessage(version, content) {
    return showModal(version, content, true, '确定')
  }
}

使用

import { updateMessage } from '../../utils/showModal'
handleShow: function () {
  updateMessage('v4.4.0', '修复首页空白的bug, 引入数值动画')
    .then(res => {
      console.log('用户点击确定')
    })
    .catch(err => {
      console.log('用户点击取消')
    })
},

实际案例 ​

按钮点击事件 ​

方法一: wx.showLoading的mask配置 ​

方法二: 变量加锁 ​

封装wx.request方法 ​

封装 ​

使用 ​

封装wx.showModal ​