微信小程序：封装微信原生方法

封装微信原生方法

封装请求：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)
  }
})