微信小程序-封装通用模块
文章目录
- 微信小程序-封装通用模块
- 封装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服务端的设置,所以会有…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...
