微信小程序 --- 通用模块封装（showToast，showModal ，本地存储）

2024-02-21 23:04
文章标签 模块 通用 程序 封装 微信 存储 本地 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. 调用该方法时，传递对象作为参数

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

    • 从对象中包含 title、icon、duration、mask 参数，并给参数设置默认值

  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.setStorageSync、wx.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)}})})
}

这篇关于微信小程序 --- 通用模块封装（showToast，showModal ，本地存储）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/733367。

相关文章

W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
python: 多模块(.py)中全局变量的导入

python: 多模块(.py)中全局变量的导入

文章目录 global关键字可变类型和不可变类型数据的内存地址单模块(单个py文件)的全局变量示例总结 多模块(多个py文件)的全局变量from x import x导入全局变量示例 import x导入全局变量示例 总结 global关键字 global 的作用范围是模块(.py)级别： 当你在一个模块（文件）中使用 global 声明变量时，这个变量只在该模块的全局命名空
阅读更多...
异构存储（冷热数据分离）

异构存储（冷热数据分离）

异构存储主要解决不同的数据，存储在不同类型的硬盘中，达到最佳性能的问题。 异构存储Shell操作 （1）查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies （2）为指定路径（数据存储目录）设置指定的存储策略 hdfs storagepolicies -setStoragePo
阅读更多...
HDFS—存储优化（纠删码）

HDFS—存储优化（纠删码）

纠删码原理 HDFS 默认情况下，一个文件有3个副本，这样提高了数据的可靠性，但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码，采用计算的方式，可以节省约50％左右的存储空间。 此种方式节约了空间，但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件，都会执行此策略。 默认只开启对 RS-6-3-1024k
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟 开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚 第一站：海量资源，应有尽有 走进“智听
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
跨系统环境下LabVIEW程序稳定运行

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中，不同电脑的配置和操作系统（如Win11与Win7）可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行，需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下，使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此，在开发程序时，尽量使用
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
JavaSE——封装、继承和多态

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性：封装、继承、多态 。而类和对象阶段，主要研究的就是封装特性。何为封装呢？简单来说就是套壳屏蔽细节 。     比如：对于电脑这样一个复杂的设备，提供给用户的就只是：开关机、通过键盘输入，显示器， USB 插孔等，让用户来和计算机进行交互，完成日常事务。但实际上：电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2