封装微信原生方法
封装请求:
utils / index.js
// 封装请求方法
function request(method, url, data) {
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中',
})
wx.request({
method,
url,
data,
success: res => {
resolve(res.data)
},
complete() {
wx.hideLoading()
}
})
})
}
// get请求
export function $get(url, data) {
return request('GET', url, data)
}
// post请求
export function $post(url, data) {
return request('POST', url, data)
}
// showToast提示
export function $showToast(title,icon) {
wx.showToast({
title: title,
icon: icon
})
}
/**
* 接收页面通过 data- 传递的参数
*/
export function $d(e, key) {
let res = e.currentTarget.dataset;
console.log('res',res)
return key ? res[key] : res
}
/**
* 封装原生:this.setData()方法
*/
export function $setData(key, val) {
this.setData({
[key]: val
})
}
/**
* 统一页面对象,封装了Page,添加了自定义方法
* @params option 同原本的Page参数
*/
export default function Router(option) {
option.$get = $get
option.$post = $post
option.$setData = $setData
option.$d = $d
option.$showToast = $showToast
return Page(option)
}
使用方法:页面的结构
<view bindtap="handleClick" data-zz="3">
首页{{num}}
</view>
<view wx:for="{{list}}" wx:key="item.id">
{{item.name}}
</view>
使用方法:页面的js文件
// 引入封装的方法
import Router from '../../utils/index.js'
Router({
data: {
num: 20,
pageIndex: 1,
list: [{
id: 0,
name: 'vue'
},
{
id: 1,
name: 'React'
}
]
},
handleClick(e) {
let {zz} = this.$d(e)
console.log(zz)
const array = [{
id: 1,
name: 'HTML'
}]
this.$setData('list', array)
},
async getList(){
let data = this.$get(url,data); // data中传入 this.data.pageIndex
// 请求第一页数据:先清空数组
if(this.data.pageIndex === 1){ this.data.list = []
if(data && data.length){
this.$setData('list',this.data.list.concat(data))
}else{
this.$showToast('no More','none')
}
},
// 页面初始化
onLoad(){
this.getList()
},
/**
* 页面上拉触底事件
*/
onReachBottom(){
this.data.pageIndex++
this.getList()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
setTimeout(() => {
wx.shopPullDownRefresh({
success: (res) => {
this.data.pageIndex = 1
this.getList()
}
})
}, 500)
}
})