微信小程序 --- 通用模块封装(showToast,showModal ,本地存储)

这篇具有很好参考价值的文章主要介绍了微信小程序 --- 通用模块封装(showToast,showModal ,本地存储)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

01. 为什么进行模块封装

02. 消息提示模块封装

03. 模态对话框封装

04. 封装本地存储 API

05. 拓展:封装异步存储API+优化代码


01. 为什么进行模块封装

在进行项目开发的时候,我们经常的会频繁的使用到一些 API,

例如:wx.showToast() 、wx.showModal()等消息提示 API ,这些 API 的使用方法如下:

wx.showToast({
  title: '消息提示框', // 提示的内容
  icon: 'success',   // 提示图标
  duration: 2000,	 // 提示的延迟时间
  mask: true		 // 是否显示透明蒙层,防止触摸穿透
})

wx.showModal({
  title: '提示', // 提示的标题
  content: '您确定执行该操作吗?', // 提示的内容
  confirmColor: '#f3514f', // 确定按钮的样式
  // 接口调用结束的回调函数(调用成功、失败都会执行)
  complete({ confirm, cancel }) {
    if (confirm) {
      console.log('用户点击了确定')
      return
    }

    if (cancel) {
      console.log('用户点击了取消')
    }
  }
})

如果每次使用的时候,都直接调用这些 API,会导致代码很冗余,为了减少了代码冗余,我们需要将这些 API 封装成公共方法,封装后的使用方式如下:

// wx.showToast() 封装后的调用方式
toast()
toast({ title: '数据加载失败....', mask: true })

// wx.showModal() 封装后的调用方式
const res = await modal({
  title: '提示',
  content: '鉴权失败,请重新登录 ?'
})

// 用户点击了确定
if (res) { ... } else { ... }

可以看到封装后方法,极大简化 API 的调用,

同时,我们在后续还会进行网络通用模块的封装,如果直接进行封装难度比较大,

进行通过模块的封装,也是为后续 [网络请求封装] 做铺垫。

02. 消息提示模块封装

基本使用:

wx.showToast() 消息提示框是在项目中频繁使用的一个小程序 API,常用来给用户进行消息提示反馈。使用方式如下:

wx.showToast({
  title: '消息提示框', // 提示的内容
  icon: 'success',   // 提示的图标,success(成功)、error(失败)、loading(加载)、none(不显示图标)
  duration: 2000,	 // 提示的延迟时间
  mask: true		 // 是否显示透明蒙层,防止触摸穿透
})

封装思路:

  1. 创建一个 toast 方法对 wx.showToast() 方法进行封装

  2. 调用该方法时,传递对象作为参数

    • 如果没有传递任何参数,设置一个空对象 {} 作为默认参数

    • 从对象中包含 titleicondurationmask 参数,并给参数设置默认值

  3. 在需要显示弹出框的时候调用 toast 方法,并传入相关的参数,有两种参数方式:

    • 不传递参数,使用默认参值
    • 传入部分参数,覆盖默认的参数

调用方式:

新封装的模块,我们希望有两种调用的方式:

模块化的方式导入使用

import { toast } from './extendApi'

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

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

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

实现步骤:

  1. 在 utils 目录下新建 extendApi.js 文件
  2. 对 wx.showToast() 方法进行封装

落地代码:

➡️ utils/extendApi.js

/**
 * @description 封装消息提示组件
 * @param {*} title 提示的内容
 * @param {*} icon 图标
 * @param {*} duration 提示的延迟时间
 * @param {*} mask 是否显示透明蒙层,防止触摸穿透
 */
const toast = ({ title = '数据加载中', icon = 'none', mask = true, duration = 3000 } = {}) => {
  wx.showToast({
    title,
    icon,
    mask,
    duration
  })
}

// 在 wx 全局对象上封装 toast 方法
// 调用 API 方式:
// 1. 在入口文件 app.js 导入封装的模块  import './utils/extendApi'
// 2. 调用封装的方法:wx.toast('')
wx.toast = toast

// 模块化的方式使用
// 调用 API 方式:
// 1. 导入该文件:import { toast } from '../utils/extendApi'
// 2. 调用封装的方法:toast('')
export { toast }

➡️ app.js

import { toast } from './utils/extendApi'

App({
  onLaunch() {

    // 第一种调用方式:不传入任何参数
    toast()

    // 第二种调用方式:传入部分参数
    toast({ title: '数据加载失败....', mask: true })
    
    // 第三种调用方式:传入全部的参数
    toast({ title: '数据加载失败....', mask: true })
    
  }
})

03. 模态对话框封装

基本使用:

wx.showModal() 模态对话框也是在项目中频繁使用的一个小程序 API,通常用于向用户询问是否执行一些操作,例如:询问用户是否真的需要退出、是否确认删除等等

wx.showModal({
  title: '提示', // 提示的标题
  content: '您确定执行该操作吗?', // 提示的内容
  confirmColor: '#f3514f',
  // 接口调用结束的回调函数(调用成功、失败都会执行)
  complete({ confirm, cancel }) {
    confirm && console.log('点击了确定')
    cancel && console.log('点击了取消')
  }
})

封装思路:

  1. 对 wx.showModal() 方法进行封装, 封装后的新方法叫 modal
  2. 调用该方法时,传递对象作为参数,对象的参数同 wx.showModal() 参数一致
  3. 封装的 modal 方法的内部通过 Promise 返回用户执行的操作(确定和取消,都通过 resolve 返回)
  4. 在需要显示模态对话框的时候调用 modal 方法,并传入相关的参数,有三种调用方式:
    • 不传递参数,使用默认参数
    • 传递参数,覆盖默认的参数

调用方式:

新封装的本地存储模块,我们依然希望有两种调用的方式:

  1. 模块化的方式导入使用
  2. 将封装的模块挂载到 wx 全局对象身上

实现步骤:

  1. 在 extendApi.js 文件中新建 modal 方法,方法内部
  2. modal 方法,方法内部用来处理封装的逻辑

落地代码:

➡️ utils/extendApi.js

// coding...

/**
 * @description 封装 wx.showModal  方法
 * @param {*} options 同 wx.showModal 配置项
 */
export const modal = (options = {}) => {
  // 使用 Promise 处理 wx.showModal 的返回结果
  return new Promise((resolve) => {

    // 默认的参数
    const defaultOpt = {
      title: '提示',
      content: '您确定执行该操作吗?',
      confirmColor: '#f3514f',
    }

    // 将传入的参数和默认的参数进行合并
    const opts = Object.assign({}, defaultOpt, options)

    wx.showModal({
      // 将合并的参数赋值传递给 showModal 方法
      ...opts,
      complete({ confirm, cancel }) {
        // 如果用户点击了确定,通过 resolve 抛出 true
        // 如果用户点击了取消,通过 resolve 抛出 false
        confirm && resolve(true)
        cancel && resolve(false)
      }
    })
  })
}

// 在 wx 全局对象上封装 myToast 方法
// 调用 API 方式:
// 1. 在入口文件 app.js 导入封装的模块  import './utils/extendApi'
// 2. 调用封装的方法:wx.toast('')
wx.toast = toast
+ wx.modal = modal

// 模块化的方式使用
// 调用 API 方式:
// 1. 导入该文件:import { toast } from '../utils/extendApi'
// 2. 调用封装的方法:toast('')
+ export { toast, modal }

➡️ app.js

import { modal } from './utils/extendApi'

App({
  async onLaunch() {
      
    // 第一种调用方式:不传入任何参数
    // 不使用任何参数,使用默认值
    const res = await modal()
    console.log(res)

    // 第二种调用方式:更改默认配置
    const res = await modal({
      content: '鉴权失败,请重新登录',
      showCancel: false
    })
    console.log(res)
  }
})

04. 封装本地存储 API

思路分析:

在小程序中,经常需要将一些数据存储到本地,方便多个页面的读取使用,例如:将用户的登录状态、用户的个人信息存储到本地。

小程序提供了同步、异步两类 API 来实现本地存储操作。例如: wx.setStorageSyncwx.setStorage 等方法

try {
  wx.setStorageSync(key, value)
} catch (err) {
  console.error(`存储指定 ${key} 数据发生错误:`, err)
}

wx.setStorage({
  key: 'key',
  data: 'data',
  success (res) => {},
  fail (err) => {}
})

如果直接使用这些 API,会比较麻烦,通常情况下,我们需要对本地存储的方法进行封装。

实现步骤:

  1. 在 utils 目录下新建 storage.js 文件
  2. 在该文件中,封装对本地数据进行 存储、获取、删除、清除的方法

落地代码:

➡️ utils/storage.js文章来源地址https://www.toymoban.com/news/detail-836275.html

/**
 * @description 存储数据
 * @param {*} key 本地缓存中指定的 key
 * @param {*} value 需要缓存的数据
 */
export const setStorage = (key, value) => {
  try {
    wx.setStorageSync(key, value)
  } catch (e) {
    console.error(`存储指定 ${key} 数据发生错误:`, e)
  }
}

/**
 * @description 从本地读取对应 key 的数据
 * @param {*} key 
 */
export const getStorage = (key) => {
  try {
    const value = wx.getStorageSync(key)
    if (value) {
      return value
    }
  } catch (e) {
    console.error(`获取指定 ${key} 数据发生错误:`, e)
  }
}

/**
 * @description 从本地移除指定 key 数据
 * @param {*} key 
 */
export const removeStorage = (key) => {
   try {
     wx.removeStorageSync(key)
   } catch (err) {
     console.error(`移除指定 ${key} 数据发生错误:`, e)
   }
}

/**
 * @description 从本地清空全部的数据
 */
export const clearStorage = () => {
  try {
    wx.clearStorageSync()
  } catch (e) {
    console.error("清空本地存储时发生错误:", e);
  }
}

05. 拓展:封装异步存储API+优化代码

思路分析:

使用 Promise 封装异步存储 API

wx.setStorage({
  key: 'key',
  data: 'data',
  success(res) {},
  fail(err) {},
  complete(res) {}
})

使用方式:

// 异步将数据存储到本地
asyncSetStorage(key, data)

// 异步从本地读取指定 key 的数据
asyncGetStorage(key)

// 异步从本地移除指定 key 的数据
asyncRemoveStorage(key)

// 异步从本地移除、清空全部的数据
asyncClearStorage()

落地代码:

➡️ utils/storage.js


/**
 * @description 将数据存储到本地 - 异步方法
 * @param {*} key 本地缓存中指定的 key
 * @param {*} data 需要缓存的数据
 */
export const asyncSetStorage = (key, data) => {
  return new Promise((resolve) => {
    wx.setStorage({
      key,
      data,
      complete(res) {
        resolve(res)
      }
    })
  })
}

/**
 * @description 从本地读取指定 key 的数据 - 异步方法
 * @param {*} key
 */
export const asyncGetStorage = (key) => {
  return new Promise((resolve) => {
    wx.getStorage({
      key,
      complete(res) {
        resolve(res)
      }
    })
  })
}

/**
 * @description 从本地移除指定 key 的数据 - 异步方法
 * @param {*} key
 */
export const asyncRemoveStorage = (key) => {
  return new Promise((resolve) => {
    wx.removeStorage({
      key,
      complete(res) {
        resolve(res)
      }
    })
  })
}

/**
 * @description 从本地移除、清空全部的数据 - 异步方法
 */
export const asyncClearStorage = () => {
  return new Promise((resolve) => {
    wx.clearStorage({
      complete(res) {
        resolve(res)
      }
    })
  })
}

到了这里,关于微信小程序 --- 通用模块封装(showToast,showModal ,本地存储)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序提示确认框 wx.showModal

    核心实现代码如下 title 是确认框的标题,content 是确认框显示的内容。用户点击确定按钮时,success 函数会被调用,并且 res.confirm 为 true。用户点击取消按钮时,res.cancel 为 true。 补充说明 wx.showModal 接受一个对象作为参数,该对象可以包含以下属性: title:模态弹窗的标题,

    2024年02月06日
    浏览(52)
  • 微信小程序wx.showModal中content换行

    content是modal提示框中的提示文字,今天在开发中遇到将提示文字换行的操作具体如下图 查资料可知通过  \\\'rn\\\'  可以实现换行操作,但在开发工具中不换行,可能是BUG    

    2024年02月13日
    浏览(44)
  • uni-app 微信小程序蓝牙模块的解耦封装-持续更新

    core.js tool.js util.js main.js

    2024年03月27日
    浏览(96)
  • 微信小程序wx.showModal模态对话框中content换行

    解决方案:使用“rn”换行 注意:微信开发者工具上并不会换行只是会有空格,但是实际运行手机上是有换行效果的!  这是微信开发者工具的效果: 这是手机上显示的效果:          .join(\\\'\\\') 将数组用\\\"\\\"连接成为一个字符串         .slice(0, -4) 截取掉数组最后一项的

    2024年02月03日
    浏览(37)
  • 关于微信小程序使用UDP实现局域网通讯及UDP模块的封装

    距离我上一次发物联网类前端的教程好久了 前段时间刚刚实现了以下小程序使用UDP进行了局域网的控制 做的时候发现网上对应的教程比较少或者有的看着有点头晕 特此不要脸的发一篇教程,写得不好多多包涵。咱话不多说,直接开写!!! 首先,老规矩,先上图: 上图为

    2024年02月01日
    浏览(40)
  • 微信小程序showToast在真机中显示时间不可控制,显示时间短

    现象: 使用uniapp开发微信小程序,使用showToast,设置duration来控制提示展现时长,发现在微信开发者工具正常,在真机中显示时间比较短,并且设置duration不生效。 原因: 排查发现,是因为在调用showToast之后,又调用了hideLoading() ,执行hideLoading的时候也会把showToast也关闭。

    2024年02月13日
    浏览(41)
  • 微信小程序toast组件(解决wx.showToast文本最多显示两行问题)

    创建toast组件  index.wxmi index.less index.json index.ts toast.js 使用 index.json index.wxml  index.ts  效果

    2024年02月12日
    浏览(89)
  • 微信小程序通用字体代码

    下面是一个简单的微信小程序通用字体代码示例: 在上面的代码示例中,我们首先在 app.wxss 中导入了一个名为fonts.wxss的文件,该文件用于定义所有页面中要使用的字体样式。在fonts.wxss中,我们使用 @font-face 规则来引入自定义字体文件(如font.ttf),并将其声明为 CustomFont 。

    2024年02月12日
    浏览(36)
  • 基于微信小程序云开发的通用会议室预约小程序源码,通用会议室预约微信小程序源码

    会议室是一个单位或部门的共用资源,但在使用的时候往往会遇到时间冲突、预约困难、不方便协调等问题。目前大部分公司是统一在公司群聊中预约,每次预约时,都需要翻一下聊天记录,了解是否有人预定以及预定时间等。如果冲突则需要找到相关联系人进行沟通。查找历

    2024年02月11日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包