微信小程序——花坊项目

最新推荐文章于 2024-09-06 08:31:32 发布

h哦哦

最新推荐文章于 2024-09-06 08:31:32 发布

阅读量461

点赞数 3

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

本文链接：https://blog.csdn.net/m0_74320886/article/details/138323320

版权

通⽤模块封装

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 参数，并给参数设置默认值

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

{

2 wx . showToast ({

3 title ,

4 icon ,

5 duration ,

6 mask

7 })

8 }

c：在需要显示弹出框的时候调⽤ toast ⽅法，并传⼊相关的参数，有两种参数⽅式：

不传递参数，使⽤默认参值

传⼊部分参数，覆盖默认的参数

4：调⽤⽅法

a：模块化的⽅式导⼊使⽤

1 export { toast }

2

3 import { toast } from './extendApi'

4

5 toast ()

6 toast ({ title : ' 数据加载失败 ....' , m

ask : true })

b：将封装的模块挂载到 wx 全局对象身上

1 wx . toast = toast

2

3 import './utils/extendApi'

4

5 wx . toast ()

6 wx . toast ({ title : '数据加载失败....' , mask : true })

5：封装步骤

a：在utils⽂件夹内新建extendApi.js

b：完成extendApi.js⽂件

1 // function toast () {}
2
3 // 在使⽤toast⽅法时，可以传⼊参数，也可以不传⼊参数。
4 // 如果需要传⼊参数，要传⼊对象作为参数。
5 // const toast = (option = {}) => { }
6
7 // 在形参数、位置通过解构的⽅式获取⽤户传⼊的参数，同时设置默认
8 const toast = ({title="数据加载中",icon="none",duration=2000,mask=true} = {}) =>
{
9 wx.showToast({
10 title,
11 icon,
12 duration,
13 mask
14 })
15 }
16
17 // 局部暴露toast⽅法
18 export { toast }
19
20 // 如果其他.js⽂件，需要使⽤toast⽅法，需要导⼊toast，然后进⾏调⽤才可以。
21
22 // 如果有很多的.js⽂件，都需要调⽤toast⽅法
23 // 每次使⽤都需要导⼊toast再调⽤，太麻烦了
24 // 可以将toast⽅法挂载到wx全局对象上
25 // 全局挂载⽅法
26 wx.toast = toast

c：调⽤步骤

1 // app.js
2 // import { toast } from './utils/extendApi'
3 // import './utils/extendApi'
4
5 App({
6 // ⻚⾯显示⽣命周期函数
7 onShow() {
8 
9 // 局部导⼊
10 // 不传参数
11 // toast()
12 // 传⼊参数，传⼊的参数会覆盖默认的参数。
13 // toast({title:'数据加载完毕', icon:'success'})
14
15 // 全局导⼊
16 // wx.toast()
17 // wx.toast({ title: '数据加载失败....', mask: true })
18
19 }
20 })
21

模块对话框封装

1：基本使⽤

wx.showModal() 模态对话框也是在项⽬中频繁使⽤的⼀个⼩程序 API ，通常⽤于向⽤户询问是否执

⾏⼀些操作，例如：询问⽤户是否真的需要退出、是否确认删除等等。

1
wx.showModal(
2 title: '提示', // 提示的标题
3 content: '您确定执⾏该操作吗？', // 提示的内容
4 confirmColor: '#f3514f',
5 // 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
6 complete({ confirm, cancel }) {
7 confirm && console.log('点击了确定')
8 cancel && console.log('点击了取消')
9 }
10 })

2：封装思路

a：对 wx.showModal() ⽅法进⾏封装，封装后的新⽅法叫 modal。

b：调⽤该⽅法时，传递对象作为参数，对象的参数同 wx.showModal() 参数⼀致。

c：封装的 modal ⽅法的内部通过 Promise 返回⽤户执⾏的操作(确定和取消，都通过 resolve 返

回)。

d：在需要显示模态对话框的时候调⽤ modal ⽅法，并传⼊相关的参数，有三种调⽤⽅式：

不传递参数，使⽤默认参数。

传递参数，覆盖默认的参数

3：调⽤⽅式

新封装的本地存储模块，我们依然希望有两种调⽤的⽅式：

a：模块化的⽅式导⼊使⽤

b：将封装的模块挂载到 wx 全局对象身上

4：实现步骤：

a：在 extendApi.js ⽂件中新建 modal ⽅法，⽅法内部

b：modal ⽅法，⽅法内部⽤来处理封装的逻辑

5：代码实现

1 // exendApi.js
2
3 // function toast () {}
4
5 // 在调⽤modal⽅法时，可以传递参数，也可以不传递参数。
6 // 如果不传递参数，默认值就是空对象。
7 // 如果传递参数，参数需要时⼀个对象，对象中的属性需要和wx.showModal参数保持⼀致。
8 const modal = (options = {}) => {
9 // 在⽅法内部需要通过Promise返回⽤户的操作
10 // 如果⽤户点击了确认，需要通过resolve返回true
11 // 如果⽤户点击了取消，需要通过resolve返回false
12
13 return new Promise((resolve) => {
14 // 默认的参数
15 const defaultOpt = {
16 title: '提示', // 提示的标题
17 content: '您确定执⾏该操作吗？', // 提示的内容
18 confirmColor: '#f3514f',
19 // 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
20 complete({ confirm, cancel }) {
21 confirm && console.log('点击了确定')
22 cancel && console.log('点击了取消')
23 }
24 }
25
26 // 通过object.assgin⽅法将参数进⾏合并
27 // 需要使⽤传⼊的参数覆盖默认的参数
28 // 为了不影响默认的参数，需要将合并以后的参数赋值给⼀个空对象
29 const opts = Object.assign({}, defaultOpt, options)
30
31 wx.showModal({
32 // 将合并以后的参数通过展开运算符赋值给wx.showModal对象
33 ...opts,
34 complete({ confirm, cancel }) {
35 // 如果⽤户点击了确定，通过 resolve 抛出 true
36 // 如果⽤户点击了取消，通过 resolve 抛出 false
37 confirm && resolve(true)
38 cancel && resolve(false)
39 }
40 })
41 })
42 }
43
44 export { modal }
45
46 wx.modal = modal
47
1 // app.js
2
3 // app.js
4 // import { toast } from './utils/extendApi'
5 import './utils/extendApi'
6
7 App({
8 // ⻚⾯显示⽣命周期函数
9 async onShow() {
10
11 // wx.showModal({
12 // title: '提示', // 提示的标题
13 // content: '您确定执⾏该操作吗？', // 提示的内容
14 // confirmColor: '#f3514f',
15 // // 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
16 // complete({ confirm, cancel }) {
17 // confirm && console.log('点击了确定')
18 // cancel && console.log('点击了取消')
19 // }
20 // })
21
22 // 不传⼊参数
23 // const res = await wx.modal()
24
25 // 传⼊参数
26 const res = await wx.modal({
27 title:'新的提示',
28 showCancel:false
29 })
30
31 console.log(res);
32 
33 }
34
35 })
36

网络请求封装

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

2、使用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>

3、设置请求的参数

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

4、请求封装的快捷方法

//封装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
    }))
  }

通过封装HTTP的GET、POST、PUT、DELETE方法，我们可以得出以下结论：

遵循RESTful原则：封装这些方法通常意味着你正在遵循RESTful（Representational State Transfer）架构风格。RESTful API使用HTTP协议的方法（如GET、POST、PUT、DELETE）来表示对资源的操作，使得API更加清晰、简洁和易于理解。
明确的操作语义：
- GET：用于从指定的资源请求数据。
- POST：用于提交新的数据到指定的资源，常用于提交表单数据。
- PUT：用于更新指定资源的全部数据。
- DELETE：用于删除指定的资源。封装这些方法使得每种操作都有明确的语义，便于开发和维护。
提高代码的可重用性和可维护性：通过封装这些方法，你可以将HTTP请求的逻辑抽象出来，使得在多个地方调用相同的HTTP请求时，只需要调用封装好的方法，而不需要重复编写HTTP请求的代码。这大大提高了代码的可重用性和可维护性。
安全性考虑：封装这些方法时，通常会考虑安全性问题，如验证、授权和加密等。例如，在POST或PUT请求中，可能会验证请求体的数据是否合法；在DELETE请求中，可能会验证请求者是否有权删除指定的资源。
易于测试和调试：由于HTTP请求的逻辑被封装在单独的方法中，这使得对这些方法进行单元测试变得相对容易。同时，如果出现问题，也可以通过调试这些方法来定位问题所在。
适应不同前端和客户端：封装好的HTTP方法可以被不同的前端和客户端调用，如Web浏览器、移动应用、命令行工具等。这使得API更加通用和灵活。
支持版本控制：在封装HTTP方法时，可以考虑支持版本控制。例如，可以在URL中添加版本号或使用其他机制来区分不同的API版本。这使得在升级或修改API时能够保持向后兼容性。

h哦哦

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
微信小程序——花坊项目

通⽤模块封装1：wx.showToast()基本使⽤。wx.showToast() 消息提示框是在项⽬中频繁使⽤的⼀个⼩程序 API ，常⽤来给⽤户进⾏消息提示反馈。使⽤⽅式如下：2：为什么要进⾏模块封装3：封装思路a：创建⼀个 toast ⽅法对 wx.showToast() ⽅法进⾏封装b：调⽤该⽅法时，传递对象作为参数如果没有传递任何参数，设置⼀个空对象 {} 作为默认参数从对象中包含 title 、 icon 、 duration 、 mask 参数，并给参数设置默认值1。
复制链接

扫一扫