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

落日映苍穹つ 2023-01-01 15:58 382阅读 0赞

## 封装微信原生方法 ##

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

> 使用方法：页面的结构

> 使用方法：页面的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)
      }
    })