实际案例
按钮点击事件
就常见的登录流程来说, 心急的用户在输入账号和密码后会连续点击按钮事件, 从而会向后端发送多次登录请求, 影响了服务器资源, 为了解决这一问题有两种实现方式:
方法一: wx.showLoading的mask配置
js
wx.showLoading({
title: 'title',
mask: true
})
使用mask:true会从渲染层阻止用户的高频点击,但由于小程序双线程的渲染机制,这种方法偶尔会失效
对于传统的web开发, 可以通过loading的方式去阻止用户高频点击重复请求的,因为传统web开发渲染层执行的时候js是阻塞的。
但是对于小程序来说, 由于小程序是双线程的,webview渲染需要时间的,在loading还未渲染出来的时候,js逻辑层依然可以运行,所以想通过loading这种视觉层的方法去阻挡用户高频点击有时是无效的**。
这时候就需要采取其他方案,那就是不通过webview层去阻挡用户的点击,而是通过js控制,也就是通过变量加锁解锁的方式实现。
方法二: 变量加锁
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文件中
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
})
}
}
使用
js
const { post } = require('../../utils/request')
var app = getApp()
post(app.api.score).then(res=>{
console.log(res)
})
封装wx.showModal
封装
wx.showModal是我们在实际开发中经常用到的方法, 这里我进行了简单的封装
js
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, '确定')
}
}
使用
js
import { updateMessage } from '../../utils/showModal'
handleShow: function () {
updateMessage('v4.4.0', '修复首页空白的bug, 引入数值动画')
.then(res => {
console.log('用户点击确定')
})
.catch(err => {
console.log('用户点击取消')
})
},