微信小程序-封装通用模块
文章目录
- 微信小程序-封装通用模块
- 封装toast和modal
- 封装storage
- 封装网络请求
微信小程序-封装通用模块
封装toast和modal
/** 提示消息框 */
function toast({title = "数据加载中",icon = "none",duration = 2000,mask = true,
}) {wx.showToast({title,icon,duration,mask,})
}/** 模拟对话框 */
function modal(opts = {}) {const defaultOpts = {title: "提示",content: "您确定执行该操作吗?",confirmColor: "#f3514f",}return new Promise((resolve) => {const options = Object.assign({}, defaultOpts, opts)wx.showModal({...options,complete({ confirm, cancel }) {confirm && resolve(true)cancel && resolve(false)},})})
}// 挂载到 wx 全局对象上
wx.toast = toast
wx.modal = modalexport { toast, modal }
封装storage
/** 同步存储数据 */
export const setStorage = (key, data) => {try {wx.setStorageSync(key, data)} catch (e) {console.error(`存储指定 ${key} 数据时发生了异常`, e)}
}/** 同步获取数据 */
export const getStorage = (key) => {try {const value = wx.getStorageSync(key)if (value) {return value}} catch (e) {console.error(`获取指定 ${key} 数据时发生了异常`, e)}
}/** 同步删除指定数据 */
export const removeStorage = (key) => {try {wx.removeStorageSync(key)} catch (e) {console.error(`移除指定 ${key} 数据时发生了异常`, e)}
}/** 同步清空全部数据 */
export const clearStorage = () => {try {wx.clearStorageSync()} catch (e) {console.error(`清空数据发生了异常`, e)}
}/** 异步存储数据 */
export const asyncSetStorage = (key, data) => {return new Promise((resolve) => {wx.setStorage({key,data,complete(res) {resolve(res)},})})
}/** 异步获取指定数据 */
export const asyncGetStorage = (key) => {return new Promise((resolve) => {wx.getStorage({key,complete(res) {resolve(res)},})})
}/** 异步删除指定数据 */
export const asyncRemoveStorage = (key) => {return new Promise((resolve) => {wx.removeStorage({key,complete(res) {resolve(res)},})})
}/** 异步清空全部数据 */
export const asyncClearStorage = () => {return new Promise((resolve) => {wx.clearStorage({key,complete(res) {resolve(res)},})})
}
封装网络请求
request.js
class WxRequest {/** 默认请求参数 */defaultOpts = {baseURL: "https://gmall-prod.atguigu.cn/mall-api", //域名url: "", // 请求路径data: null, // 请求参数method: "GET", // 请求方法header: {// 请求头"Content-type": "application/json",},timeout: 60000, // 超时时间isLoading: true, // 是否显示loading}/** 拦截器 */interceptors = {// 请求拦截器,发送请求前,可以对请求参数进行更改request: (config) => config,// 响应拦截器,服务器响应后,可以对数据进行逻辑处理response: (response) => response,}/** 数组,存放请求标识 */queue = []constructor(options = {}) {this.defaultOpts = Object.assign({}, this.defaultOpts, options)}request(options) {this.timeId && clearTimeout(this.timeId)options.url = this.defaultOpts.baseURL + options.urloptions = { ...this.defaultOpts, ...options }// 使用请求拦截器options = this.interceptors.request(options)// 如果数组为空,则显示loadingif (options.isLoading) {this.queue.length === 0 && this.showLoading()this.queue.push("request")}return new Promise((resolve, reject) => {wx.request({...options,success: (res) => {console.log("success", res)if (res.statusCode === 200) {// 第一个参数:目标对象;第二个参数:服务器响应数据;第三个参数:请求配置const mergeRes = Object.assign({}, res, {config: options,isSuccess: true,})resolve(this.interceptors.response(mergeRes))} else {wx.showToast({title: "服务器异常",icon: "error",})}},fail: (err) => {console.log("fail", err)const mergeErr = Object.assign({}, err, {config: options,isSuccess: false,})reject(this.interceptors.response(mergeErr))},complete: () => {if (options.isLoading) {this.queue.pop()this.queue.length === 0 && this.queue.push("request")this.timeId = setTimeout(() => {this.queue.pop()this.queue.length === 0 && this.hideLoading()clearTimeout(this.timeId)}, 1)}},})})}/** 封装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))}/** 并发请求 */all(...promise) {console.log("all", promise)return Promise.all(promise)}showLoading() {wx.showLoading({title: "加载中",})}hideLoading() {wx.hideLoading()}
}export default WxRequest
http.js
import WxRequest from "./request"// 实例化
const instance = new WxRequest()// 配置请求拦截器
instance.interceptors.request = (config) => {const token = wx.getStorageSync("token")if (token) {config.header["token"] = token}return config
}
// 配置响应拦截器
instance.interceptors.response = async (response) => {const { isSuccess, data } = responseif (!isSuccess) {wx.showToast({title: "网络异常请重试",icon: "error",})return response}switch (data.code) {case 200:return datacase 208:wx.showModal({title: "提示",content: "鉴权失败,请重新登录",complete: (res) => {if (res.confirm) {wx.clearStorage()// TODO 跳转登录页面}},})return Promise.reject(response)default:wx.showToast({title: "程序出现异常",icon: "error",})return Promise.reject(response)}
}export default instance
相关文章:
微信小程序-封装通用模块
文章目录 微信小程序-封装通用模块封装toast和modal封装storage封装网络请求 微信小程序-封装通用模块 封装toast和modal /** 提示消息框 */ function toast({title "数据加载中",icon "none",duration 2000,mask true, }) {wx.showToast({title,ico…...
Modnet 人像抠图(论文复现)
Modnet 人像抠图(论文复现) 本文所涉及所有资源均在传知代码平台可获取 文章目录 Modnet 人像抠图(论文复现)论文概述论文方法复现WebUI部署 论文概述 人像抠图(Portrait matting)旨在预测一个精确的 alpha 抠图,可以用…...
利用session机制造测试账号,无需前端也可以测试后端接口
适用场景:我们在测试的时候经常会遇到前端还没有开发完毕,后端已经结束开发了,但是后端的有些接口是需要特定的账号身份调用才会生效,此时因为前端未开发完毕,所以我们不能通过web页面进行登录,那么如何解决…...
JAVA_18
JAVA_18 1.IO流2.JAVA_IO流3.标准输入输出4.对象序列化5.字符编码与字符集6.异常处理和资源关闭 1.IO流 IO流(Input/Output stream)是用于在程序和外部设备(如文件、网络等)之间进行数据传输的机制。它是Java中处理输入和输出操作的一种抽象方式。概念: 输入流(Input Stream):…...
Linux升级openssl版本
Linux升级openssl版本 服务器编译依赖库检查 $ yum -y install gcc gcc-c make libtool zlib zlib-devel版本检测 $ openssl version OpenSSL 1.0.1e-fips 11 Feb 2013 $ ssh -V OpenSSH_6.6.1p1, OpenSSL 1.0.1e-fips 11 Feb 2013下载openssl 地址:https://www.o…...
多态对象的存储方案小结
某个类型有几种不同的子类,Jackson中的JsonTypeInfo 和JsonSubTypes可以应对这种情形,但有点麻烦,并且name属性必须是字符串、必须用Jackson为基础的json工具类对json字符串和对象进行序列化和反序列化。用过一次这种方案后边就不想再用了。 …...
Linux 之 nano 编辑器
使用git提交的时候,发生冲突或要记录相关信息时会弹出nano这个编辑器。 nano [选项] [[行,列] 文件名]... nano[必要参数][选择参数][文件] 命令行白的部分是组合键,后面的则是该组合键的功能。指数符号(^)代表的是键盘的[ctrl]按键,(M)表示…...
zipkin启动脚本并指定mysql数据存储
#!/bin/bash# 配置部分 ############################################################## Zipkin JAR 文件的名称 # 这里指定了 Zipkin 的可执行 JAR 文件,确保该文件在当前目录中可用。 ZIPKIN_JAR"zipkin-server-2.23.2-exec.jar"# PID 文件的位置 # 该…...
超越GPT-4的视觉与文本理解能力,开源多模态模型领跑者 - Molmo
Molmo是由艾伦人工智能研究所(Ai2)发布的一系列多模态人工智能模型,旨在提高开放系统在性能上与专有系统(如商业模型)之间的竞争力。以下是对Molmo的详细总结: Molmo是什么: Molmo是基于Qwen2和…...
输入输出--I/O流【C++提升】()
1.1基础知识: 在C中,输入输出(IO)流是通过标准库中的 <iostream> 头文件来处理的。C 提供了几种基本的输入输出流类,最常用的有以下几种: std::cin:用于输入。std::cout:用于…...
Maven 中央仓库地址推荐
目录 Maven 中央仓库地址推荐 Maven Maven 中央仓库概述 什么是 Maven 中央仓库? 中央仓库的作用 常用的 Maven 中央仓库地址 官方 Maven 中央仓库 阿里云 Maven 中央仓库镜像 腾讯云 Maven 中央仓库镜像 网易 Maven 中央仓库镜像 华为云 Maven 中央仓库…...
Fastgpt本地化部署 - 以MAC为例
1.认识fastgpt 2.私有化部署 MongoDB:用于存储除了向量外的各类数据PostgreSQL/Milvus:存储向量数据OneAPI: 聚合各类 AI API,支持多模型调用 (任何模型问题,先自行通过 OneAPI 测试校验) (1&a…...
SpringBoot框架下购物推荐网站的设计模式与实现
3系统分析 3.1可行性分析 通过对本东大每日推购物推荐网站实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本东大每日推购物推荐网站采用JAVA作为开发语言&…...
Apache Flink 和 Apache Kafka
Apache Flink 和 Apache Kafka 都是大数据生态系统中非常重要的工具,但它们的作用和应用场景有所不同。下面将分别介绍两者的主要特性和它们之间的异同点。 Apache Kafka 作用: 消息队列:Kafka 主要作为消息队列使用,用于解耦生…...
Excel中Ctrl+e的用法
重点:想要使用ctrle,前提是整合或拆分后的结果放置的单元格必须和被提取信息的单元格相邻,且被提取信息的单元格也必须相连。 下图为错误示例 这样则可以使用ctrle 1、信息整合 2、提取信息 3、添加符号 4、信息顺序调换 5、数字提取 crtle还…...
07-Cesium动态处理线条闪烁材质的属性
这段代码定义了 LineFlickerMaterialProperty 类,用于管理线条闪烁材质的属性。构造函数接收颜色和速度作为选项,类包含动态属性 isConstant 和 definitionChanged,以及获取材质类型和当前属性值的方法。getValue 方法返回颜色和速度的当前值,equals 方法用于比较两个实例是…...
postgresql16分区表解析
PostgreSQL 16 引入了对分区表的多项改进,增强了其性能和可用性。本文介绍PostgreSQL 16 中分区表功能,包括基本概念、创建方法、管理技巧以及一些最佳实践。 分区表的基本概念 分区表是一种将大表物理分割成更小、更易管理的部分的技术。每个部分称为…...
文字识别解决方案-OCR识别应用场景解析
光学字符识别(Optical Character Recognition, OCR)技术是一种将图像中的文字转换为可编辑和可搜索的数据的技术。随着人工智能和机器学习的发展,OCR技术的应用场景越来越广泛,为文字录入场景带来了革命性的变革,下面以…...
Qt 每日面试题 -9
81、请写一个调用消息对话框提示报错的程序 QMessageBox::waring(this,tr("警告"), tr("用户名或密码错误!"),QMessageBox::Yes)82、Qt都提供哪些标准对话框以供使用,他们实现什么功能? Qt提供9个标准对话框: QColorDialog 颜色对话框&…...
K8s环境下使用sidecar模式对EMQX的exhook.proto 进行流量代理
背景 在使用emqx作为mqtt时需要我们需要拦截client的各种行为,如连接,发送消息,认证等。除了使用emqx自带的插件机制。我们也可以用多语言-钩子扩展来实现这个功能,但是目前emqx仅仅支持单个grpc服务端的设置,所以会有…...
当知识有了‘关系网‘:LightRAG如何让大模型‘秒懂‘你的文档?
想象一下,你有一座藏书万卷的图书馆,但你找书的方式只有一种——记住每本书某个页面的关键词,然后靠"猜"来定位。 这,就是传统RAG系统的尴尬处境。 今天要介绍的这个开源项目LightRAG,被顶会EMNLP 2025接收…...
Halcon清晰度检测实战:5种算法全解析,手把手教你选出最清晰的PCB图像
Halcon清晰度检测实战:5种算法全解析,手把手教你选出最清晰的PCB图像 在工业视觉检测领域,PCB板的图像清晰度直接影响缺陷检测的准确率。当相机对焦不准确或存在景深限制时,如何从多张候选图像中自动选择最清晰的一张,…...
从Gazebo到真实硬件:robot_state_publisher在ROS 2仿真迁移中的5个关键配置项
从Gazebo到真实硬件:robot_state_publisher在ROS 2仿真迁移中的5个关键配置项 当你在Gazebo中完成机器人运动算法的仿真验证后,下一步就是将这套系统部署到真实硬件上。这个过程中,robot_state_publisher的配置往往是工程师们最容易踩坑的环节…...
基于Comsol相控阵技术的实用钢纵波超声波成像模型:单层缺陷TFM成像与压力声学仿真
comsol 相控阵 超声成像 此模型为压力声学仿真超声波,实用钢纵波速度6000 密度7.8e-9 单层缺陷TFM成像相控阵超声检测这玩意儿在工业NDT圈子里算是老熟人了,今天咱们拿COMSOL搞个钢材料缺陷成像的骚操作。模型基础是压力声学模块,材料参数先给…...
WAN2.2文生视频开源镜像快速上手:ComfyUI界面操作+SDXL Prompt Styler详解
WAN2.2文生视频开源镜像快速上手:ComfyUI界面操作SDXL Prompt Styler详解 想试试用几句话就让AI帮你生成一段视频吗?WAN2.2文生视频开源镜像,结合了强大的ComfyUI界面和SDXL Prompt Styler风格化工具,让这个过程变得直观又简单。…...
Agent上线后有专人运营支持吗?深度解析AI Agent的全生命周期运维保障体系
随着AI Agent(智能体)在企业业务场景中的深度渗透,从简单的流程自动化到复杂的跨境贸易、研发辅助,企业对“数字员工”的期待已不再局限于单次的开发交付,而是转向了长期的稳定运行与持续进化。对于许多决策者而言&…...
抖音批量下载神器:免费一键收藏创作者全部作品
抖音批量下载神器:免费一键收藏创作者全部作品 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音…...
特朗普政府发布《国家人工智能立法框架》,多维度布局AI领域
【《国家人工智能立法框架》六大核心目标锚定AI发展方向】特朗普政府发布的《国家人工智能立法框架》,意在通过统一国家政策确保美国在AI领域的全球领先地位。该框架包含六大核心目标,分别是保护儿童与赋能家长、维护与强化美国社区、尊重知识产权与支持…...
MediaPipe人脸检测避坑指南:如何优化检测精度与性能(含模型选择建议)
MediaPipe人脸检测实战优化:从参数调优到模型部署的完整指南 人脸检测作为计算机视觉的基础任务,其性能直接影响后续的面部分析效果。MediaPipe提供的轻量级解决方案在移动端和边缘设备上表现出色,但实际应用中常遇到误检、漏检或性能瓶颈问题…...
DamoFD与数据结构优化:提升人脸检测效率50%的实战技巧
DamoFD与数据结构优化:提升人脸检测效率50%的实战技巧 1. 效果惊艳的开场 如果你正在为人脸检测模型的推理速度发愁,那么今天的内容绝对能让你眼前一亮。DamoFD-0.5G作为达摩院推出的轻量级人脸检测模型,本身已经相当高效,但通过…...
