微信小程序-封装通用模块
文章目录
- 微信小程序-封装通用模块
- 封装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服务端的设置,所以会有…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
在 Spring Boot 中使用 JSP
jsp? 好多年没用了。重新整一下 还费了点时间,记录一下。 项目结构: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天,深度学习与大模型技术已成为推动行业变革的核心驱动力,而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心,系统性地呈现了两部深度技术著作的精华:…...
MyBatis-Plus 常用条件构造方法
1.常用条件方法 方法 说明eq等于 ne不等于 <>gt大于 >ge大于等于 >lt小于 <le小于等于 <betweenBETWEEN 值1 AND 值2notBetweenNOT BETWEEN 值1 AND 值2likeLIKE %值%notLikeNOT LIKE %值%likeLeftLIKE %值likeRightLIKE 值%isNull字段 IS NULLisNotNull字段…...
安宝特案例丨寻医不再长途跋涉?Vuzix再次以AR技术智能驱动远程医疗
加拿大领先科技公司TeleVU基于Vuzix智能眼镜打造远程医疗生态系统,彻底革新患者护理模式。 安宝特合作伙伴TeleVU成立30余年,沉淀医疗技术、计算机科学与人工智能经验,聚焦医疗保健领域,提供AR、AI、IoT解决方案。 该方案使医疗…...
