微信小程序 --- 通用模块封装(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 抛出 falseconfirm && 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

/*** @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)}})})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker 备份 mysql

使用 Docker 执行 MySQL 备份是一个实用的操作,可以帮助你确保数据的安全性和可恢复性。这里有一步步的指导帮你完成: 1. 确定 MySQL 容器名称或 ID 首先,你需要知道运行 MySQL 数据库的容器的名称或 ID。可以通过下面的命令查看所有正在运…

彩虹工具网程序开源未加密版源码,支持插件扩展

全新UI彩虹站长在线工具箱系统源码下载 全开源版本 支持暗黑模式 支持高达72种站长工具、开发工具、娱乐工具等功能。本地调用API、自带免费API接口, 是一个多功能性工具程序支持后台管理、上传插件、添加增减删功能 下载地址你别走吖 Σ(っ Д ;)っ (chaobiji.c…

Android13 编译ninja failed with: exit status 137

描述 现象很奇怪,主机是ubuntu 18.04, 内存有32G,并且系统中有两份Android13代码, 有一份编译正常,另外一份编译不正常,一度以为是因为下载源码不齐全导致,后面仔细看日志,原来是内…

Windows Server 2012 安装

1.镜像安装 镜像安装:Windows Server 2012 2.安装过程(直接以图的形式呈现) 2012激活秘钥:J7TJK-NQPGQ-Q7VRH-G3B93-2WCQD

WatiN——Web自动化测试(一)

🔥 交流讨论:欢迎加入我们一起学习! 🔥 资源分享:耗时200小时精选的「软件测试」资料包 🔥 教程推荐:火遍全网的《软件测试》教程 📢欢迎点赞 👍 收藏 ⭐留言 &#x1…

单例设计模式Singleton

1.模式定义 保证一个类只有一个实例,并且提供一个全局访问点 2.应用场景 重量级的对象,不需要多个实例,如线程池,数据库连接池。 2.1 源码中的应用 // Spring & JDK java.lang.Runtime org.springframework.aop.framework.Pro…

Linux:gitlab创建组,创建用户,创建项目

创建组和项目 让后可以在组里创建一个个仓库 创建成员 我创建个成员再把他分配进这个组里 进入管理员 密码等会我们创建完用户再去配置密码 Regular是普通的用户,只可以正常去访问指定规则的项目 而下面的administrator就是管理员,可以随便进项目&…

游戏开发速成入门

0,前言 两计算机专业菜鸡在大一到大二期间玩儿的游戏开发这一块的碰壁经验,从建模到游戏开发到c开发过渡的通俗基础参考,单纯玩玩儿可以参考本文Hah.。 by jzy/hzh 1,BLENDER 1.1流程推荐&#x…

基于springboot+vue的B2B平台的购物推荐网站(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

线阵相机参数介绍---变频参数控制

变频器介绍 变频器功能的目的在于对外部输入信号进行运算处理,以达到理想的行频值。该功能主要是为了解决信号超行频,图像拉伸压缩等问题。 输入信号处理过程: 输入信号:允许出发相机信号的频率f与所要求输入信号的频率F不同 …

基于Web的网文管理系统

项目:基于Web的网文管理系统 伴随着时代的更替,我国人民的生活水平在不断提高,同时对生活娱乐的需求也在不断加大,我们在日常生活中通常会以多种方式娱乐自己,而阅读网络小说就是其中一种方式。随着计算机技术的成熟&a…

vue3 #组件通信#父传子#defineProps

//在父组件中 <template> <h1>父组件</h1> <Son :car"car" :money"money" /> </template> <script setup lang"ts"> import { ref } from vue import Son from ./components/Son.vue const money ref…

外包实在是太坑了,划水三年,感觉人都废了

先说一下自己的情况&#xff0c;专科生&#xff0c;19年通过校招进入杭州某个外包软件公司&#xff0c;干了接近3年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了3年的功…

数据结构第3章 串

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 本篇笔记整理&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 0、思维导图1、基本概念1&#xff09;主…

vue3 element-plus 省市区选择器组件封装

文章目录 前言一、省市区数据源处理二、AreaSelect省市区选择器组件封装三 、页面使用 前言 vue3封装一个省市区选择器组件&#xff0c;通过element-plus Cascader 级联选择器实现&#xff0c;效果如下&#xff1a; 一、省市区数据源处理 data.js var areaList {province_…

技术应用:C# System.Data.DataTable().Compute 基本用法

引言&#xff1a; 在 C# 编程中&#xff0c;处理和计算数据是一个常见而重要的任务。而 System.Data.DataTable().Compute 方法作为 DataTable 类中的一项强大功能&#xff0c;能够帮助我们在 DataTable 对象中执行各种数据计算操作。本文将深入介绍 DataTable().Compute 方法的…

Unity NavMesh 清除不可行走区域

通常场景中物体设置为static或Navigation Static后&#xff0c;打开Navigation使用默认设置烘焙NavMesh&#xff0c;模型顶部和底部会出现蓝色网格&#xff0c;但其中有部分属于不可能到达区域&#xff0c;如下图 本文介绍两种可去掉NavMesh中不需要网格的方法&#xff1a; 方…

编写代码中常见问题汇总(JavaScript)

1.控制台出现"undefined"报错 "undefined"是一个Javascript的错误报错&#xff0c;表示变量或属性未定义或未赋值。 这个报错通常出现在以下情况下&#xff1a; 尝试访问未声明的变量或函数。尝试访问未定义的对象属性。尝试调用未定义的函数。变量或属…

idm下载路径在哪 idm下载保存路径怎么设置 IDM下载器 internetdownloadmanager官方版下载 网络加速器

春节&#xff08;Spring Festival&#xff09;&#xff0c;是中国最隆重最富有特色的传统节日之一。春节期间我们与一家人团聚在一起&#xff0c;其乐融融。2024年春晚已经接近尾声了&#xff0c;很多人已经踏上了返程的路上。在部分地区&#xff0c;如春晚直播过程中或者网络高…

Java学习小记——设计模式

设计模式 设计模式简介Singleton模式Singleton模式简介Singleton的创建双重锁模式Double checked locking作为Java类的静态变量 变继承关系为组合关系组合模式装饰器模式 如何创建对象抽象工厂模式 设计模式简介 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实…