微信小程序——花坊项目

lmyhyx

于 2024-06-24 19:28:40 发布

阅读量419

点赞数 4

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/lmyhyx/article/details/139935789

版权

1：wx.showToast()基本使⽤。

wx.showToast() 消息提示框是在项⽬中频繁使⽤的⼀个⼩程序 API ，常⽤来给⽤户进⾏消息提示反馈。使⽤⽅式如下：

1 // app.js
2
3 App({
4 // ⻚⾯显示⽣命周期函数
5 onShow(){
6 wx.showToast({
7 title: '消息提示框', // 提示的内容
8 icon: 'success', // 提示的图标，success(成功)、error(失败)、loading(加
载)、none(不显示图标)
9 duration: 2000, // 提示的延迟时间
10 mask: true // 是否显示透明蒙层，防⽌触摸穿透
11 })
12 
13 }
14
15 // ⽣命周期函数
16 // 在使⽤Page()构造⻚⾯时，需要使⽤⽣命周期函数。
17 // onLoad:⻚⾯加载时⽣命周期函数。
18 // onShow:⻚⾯显示⽣命周期函数。每次打开⻚⾯时都会调⽤⼀次。⻚⾯显示/切⼊前台前触发。
19 // onReady:⻚⾯初次渲染完成⽣命周期函数。⻚⾯初次渲染完成时触发。
20 // onHide:⻚⾯隐藏⽣命周期函数。如⻚⾯之间跳转或通过底部Tab切换到其他⻚⾯，⼩程序切⼊后
台。
21 // onUnload:⻚⾯卸载⽣命周期函数。⻚⾯卸载时触发，如⻚⾯跳转或者返回到之前的⻚⾯时。
22
23 })

2：为什么要进⾏模块封装

如果每次使⽤的时候，都直接调⽤这些 API ，会导致代码很冗余，为了减少了代码冗余，我们需要将这些 API 封装成公共⽅法

3：封装思路

a：创建⼀个 toast ⽅法对 wx.showToast() ⽅法进⾏封装
b：调⽤该⽅法时，传递对象作为参数
如果没有传递任何参数，设置⼀个空对象 {} 作为默认参数
从对象中包含 title 、 icon 、 duration 、 mask 参数，并给参数设置默认值

 const toast = ({ title = " 数据加载中 " , icon = "none" , duration = 2000 , mask = true } = {}) =>
{
 wx . showToast ({
 title ,
 icon ,
 duration ,
 mask
 })
 }

3：封装思路
对 wx.showModal() ⽅法进⾏封装，封装后的新⽅法叫 modal。
调⽤该⽅法时，传递对象作为参数，对象的参数同 wx.showModal() 参数⼀致。
封装的 modal ⽅法的内部通过 Promise 返回⽤户执⾏的操作(确定和取消，都通过 resolve 返
回)。
在需要显示模态对话框的时候调⽤ modal ⽅法，并传⼊相关的参数，有三种调⽤⽅式：
不传递参数，使⽤默认参数。
传递参数，覆盖默认的参数

4：调⽤⽅式
新封装的本地存储模块，我们依然希望有两种调⽤的⽅式：
模块化的⽅式导⼊使⽤
将封装的模块挂载到 wx 全局对象身上
实现步骤：
在 extendApi.js ⽂件中新建 modal ⽅法，⽅法内部modal ⽅法，⽅法内部⽤来处理封装的逻辑

网络请求封装

1、请求封装-request方法

// request.js
 
// 1.使用了微信自带的请求api wx.request
// 2.将wx.request封装到了一个名为request的函数中
// 3.将函数封装到了一个名为WxRequest的类中
 
// 创建一个WxRequest类
// 通过类的方式进行封装，会让代码更具有复用性
// 也可以方便添加新的属性和方法
 
class WxRequest {
 
  // 默认参数对
  defaults = {
    // 请求基地址
    baseURL: '',
    // 服务器接口地址
    url: '',
    // 请求方式
    method: 'GET',
    // 请求参数
    data: null,
    // 请求头：
    header: {
      'Content-type': 'application/json' // 设置数据的交互格式
    },
    // 默认超时时间为一分钟
    timeout: 60000
  }
 
  // 定义拦截对象，包括请求拦截器和响应拦截方法， 方便在请求或响应之前进行处理
  interceptors = {
    // 请求拦截器
    request: (config) => config,
    // 响应拦截器
    response: (response) => response
  }
  // 用于创建和初始化类的属性和方法
  // params为用户传入的请求配置项
  constructor(params = {}) {
    // 使用Object.assign方法合并默认参数以及传递的请求参数
    // 需要传入的参数，会覆盖默认的参数，因此传入的参数放在最后
    this.defaults = Object.assign({}, this.defaults, params)
  }
 
  // request实例方法接受一个对象类型的参数
  request(options) {
    // 拼接完整的请求路径
    options.url = this.defaults.baseURL + options.url
    // 合并请求参数
    options = {
      ...this.defaults,
      ...options
    }
 
    // 发送请求之前发送一个loading
    wx.showLoading({})
 
    // 在发送请求之前调用请求拦截器
    options = this.interceptors.request(options)
 
    console.log(options);
 
    return new Promise((resolve, reject) => {
 
      wx.request({
 
        // 使用拓展运算符将request函数传来的对象参数展开
        ...options,
 
        //当接口调用成功就会触发success回调函数
        success: (res) => {
 
          // 不管接口成功还是失败，都需要调用响应拦截器
          // 响应拦截器需要接受服务器响应的数据，然后对数据进行逻辑处理，处理好后进行返回
 
          // 再给响应拦截器传递参数时，需要将请求参数也一起上传
          // 方便进行代码的调试或者其他逻辑处理，所以需要合并参数
          // 然后将合并的参数给响应拦截器
 
          // 第一个参数：需要合并的目标对象
          // 第二个参数：服务器响应的数据
          // 第三个参数：请求配置以及自定义属性
 
          //不管是请求失败还是请求成功，都会将响应的数据传递给响应拦截器
          //这个时候合并参数时，就需要追加一个属性:isSuccess
          //如果属性值为true.说明执行了success同调函数
          const mergetRes = Object.assign({}, res, {
            config: options,
            isSuccess: true
          })
 
          // resolve(res)
          resolve(this.interceptors.response(mergetRes))
        },
 
        // 当接口调用失败的时候会触发fail回调函数
        fail: (err) => {
          //如果属性值为false,说明执行了fail回调函数
          const mergetErr = Object.assign({}, err, {
            config: options,
            isSuccess: true
          })
          // reject(err)
          reject(this.interceptors.response(mergetErr))
        },
 
        //不管promise请求是否成功，
        //都会执行complete里面的内容
        complete:()=> {
          //接口调用完成后隐藏loading
          wx.hideLoading()
        },
 
        // 当接口调用失败时会触发fail回调函数
        fail: (err) => {
          //如果属性值为false,说明执行了fail回调函数
          const mergetErr = Object.assign({}, err, {
            config: options,
            isSuccess: false
 
          })
          // reject(err)
          reject(this.interceptors.response(mergetErr))
        }
      })
    })
  }
  //封装GET实例方法
  get(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'GET',
      config
    }))
  }
 
  // 封装POST实例方法
  post(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'POST',
      config
    }))
  }
 
  // 封装PUT实例方法
  put(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'PUT',
      config
    }))
  }
 
  // 封装DELETE实例方法
  delete(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'DELETE',
      config
    }))
  }
 
  // 用来处理并发请求
  all(...promise){
 
    // 通过展开运算符接受传递的参数
    //展开运算符会将传入的参数转为数组
 
    console.log(promise);
    return Promise.all(promise)
  }
}
export default WxRequest

使用request方法

<view class="box">
  <!-- 设置一个按钮 并给按钮设置一个名为handler的点击事件 点击按钮则会发送请求 -->
  <button type="warn" size="mini" plain bindtap="handler">测试发送请求</button>
 
  <button type="primary" size="mini" plain bindtap="handler1">测试发送请求</button>
 
  <button type="primary" size="mini" plain bindtap="AllHandler">测试发送请求</button>
</view>

设置请求的参数

  // 默认参数对像
  defaults = {
    // 请求基地址
    baseURL: '',
    // 服务器接口地址
    url: '',
    // 请求方式
    method: 'GET',
    // 请求参数
    data: null,
    // 请求头：
    header: {
      'Content-type': 'application/json' // 设置数据的交互格式
    },
    // 默认超时时间为一分钟
    timeout: 60000
  }

请求封装的快捷方法

//封装GET实例方法
  get(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'GET',
      config
    }))
  }
 
  // 封装POST实例方法
  post(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'POST',
      config
    }))
  }
 
  // 封装PUT实例方法
  put(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'PUT',
      config
    }))
  }
 
  // 封装DELETE实例方法
  delete(url, data = {}, config = {}) {
    return this.request(Object.assign({
      url,
      data,
      method: 'DELETE',
      config
    }))
  }