[小程序开发] 模态对话框模块封装

一、使用import方法引入

  •  将要重复调用的方法
// modal方法
// 使用model方法时,可以传入参数,也可以不传入参数,如果需要传入参数,要传入对象作为参数
const model=(options = {}) => {
	// 在方法内部通过Promise返回用户的操作
	// 如果用户点击了确定,需要通过resolve返回true;如果用户点击了取消,需要通过resolve返回false
	return new Promise((resolve)=>{
		const defaultOpt={
			title:'提示',
			content:'您确定执行该操作吗?',
			confirmColor:'#f3514f'
		}
		// 通过Object.assign方法将参数进行合并
		// 使用传入的参数覆盖默认的参数,将合并以后的参数赋值给一个空对象,从而不影响默认的参数
		const opts=Object.assign({},defaultOpt,options)
		wx.showModal({
			// 将合并以后的参数通过展开运算符赋值给wx.showModal对象
		  ...opts,
		  complete({confirm,cancel}){
			  confirm && resolve(true)
			  cancel && resolve(false)
		  }
		})
	})
}
// 如果其他js文件需要使用model方法,需要先导入model,然后进行调用即可。
export{model}
  • 在app.js页面使用import方法引入
import {model} from "./utils/extendApi"
App({
    async onShow(){

	// 引入model不传递参数
	await model()
	// 引入model传递参数
	await model({title:'新的提示',showCancel:false})

    }  
})

 二、使用wx全局对象引入

  •  将要重复调用的方法 
const model=(options = {}) => {
	// 在方法内部通过Promise返回用户的操作
	// 如果用户点击了确定,需要通过resolve返回true;如果用户点击了取消,需要通过resolve返回false
	return new Promise((resolve)=>{
		const defaultOpt={
			title:'提示',
			content:'您确定执行该操作吗?',
			confirmColor:'#f3514f'
		}
		// 通过Object.assign方法将参数进行合并
		// 使用传入的参数覆盖默认的参数,将合并以后的参数赋值给一个空对象,从而不影响默认的参数
		const opts=Object.assign({},defaultOpt,options)
		wx.showModal({
			// 将合并以后的参数通过展开运算符赋值给wx.showModal对象
		  ...opts,
		  complete({confirm,cancel}){
			  confirm && resolve(true)
			  cancel && resolve(false)
		  }
		})
	})
}

// 将 model方法挂载到wx全局对象身上,避免每次使用都要进行导入。
// 如果想挂载到wx全局对象上这种写法生效,需要让当前文件执行一次。
wx.model=model
  • 在app.js页面使用wx全局对象引入 
import {toast} from "./utils/extendApi"
App({
    onShow(){
	
	// 使用全局方法不传入参数
	// 通过Promise返回的参数,需要加await,onShow前加async
	const res = await wx.model()
	console.log(res)

    // 使用全局方法传入参数
	const res = await wx.model({
		title:'新的提示',
		showCancel:false
	})
	console.log(res)
	}

})

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot整合Spring Security

Spring Boot 专栏:Spring Boot 从零单排 Spring Cloud 专栏:Spring Cloud 从零单排 GitHub:SpringBootDemo Gitee:SpringBootDemo Spring Security是针对Spring项目的安全框架,也是Spring Boot底层安全模块的默认技术…

MRC是谁?- 媒体评级委员会 Media Rating Council

在在线广告的世界里,有许多不同的技术和实践用于提供和衡量广告。对于广告商、出版商和营销人员来说,了解这些技术是如何工作的以及如何有效使用这些技术很重要。在这方面发挥关键作用的一个组织是媒体评级委员会(MRC)。 1. 了解…

[Linux]文件系统

1.理解文件系统 Linux磁盘文件特性:内容加属性,内容大小是不确定的,但是属性大小是一定的,并且内容和属性是分开存储的。文件属性是用一个结构体来定义的,在Linux中,该结构体是固定128字节大小如下代码: …

LC 98.验证二叉搜索树

98.验证二叉搜索树 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例…

Vue cli创建项目时键盘操作无效;vue3.0项目搭建自定义配置

一. 问题描述 在创建vue3.0项目时,在建好的文件夹,鼠标右键 git bash 使用 vue create my-vue3.0创建新项目时,键盘方向键失效,无法选中对应的选项(交互提示符不工作) 解决方案: 方案一 使用…

架构评估方法相关知识总结

一、架构评估中的重要概念 定义:软件架构评估是在对架构分析、评估的基础上,对架构策略的选取进行决策。 常用系统架构评估的方式: 1. 基于调查问卷或检查表的方法:该方法的关键是设计好问卷或检查表。缺点是在很大 程度上依赖于评…

华为北向网管NCE开发教程(5)打包org.omg.CosNotification找不到

1问题描述 在IDE中,代码能正常运行,但是打包的时候,会抱不到一些类 2问题原因 导入的本地包中,能在IDE中找到,但是在使用maven打包时,maven找不到这些依赖包 3解决办法 将依赖包通过maven安装到maven…

算法沉淀 —— 动态规划篇(斐波那契数列模型)

算法沉淀 —— 动态规划篇(斐波那契数列模型) 前言一、第 N 个泰波那契数二、三步问题三、使用最小花费爬楼梯四、解码方法 前言 几乎所有的动态规划问题大致可分为以下5个步骤,后续所有问题分析都将基于此 1.、状态表示:通常状态…

Matlab|【免费】基于数据驱动的模型预测控制电力系统机组组合优化

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现文章《Feature-Driven Economic Improvement for Network-Constrained Unit Commitment: A Closed-Loop Predict-and-Optimize Framework》,程序主要做的是一个基于数据驱动的电力系统机…

YOLO算法改进Backbone系列之:CoaT

在本文中,我们提出了co-scale conv-attention image transformer(CoaT),这是一种基于Transformer的图像分类器,配备了co-scale和conv-attention机制。首先,co-scale机制在各个尺度上保持Transformer编码器支…

09、ArrayList

ArrayList 文章目录 ArrayList集合与数组ArrayList集合进阶集合体系结构Collection集合List集合(接口)数据结构ArrayList集合LinkedList集合 Set集合HashSet 双列集合创建不可变集合 集合与数组 自动扩容 无法存储基本数据类型,只能将其变为…

【C++】CC++内存管理

目录 一、C/C内存分布二 、C语言中动态内存管理方式:malloc/calloc/realloc/free三、 C内存管理方式3.1 new/delete操作内置类型3.2 new和delete操作自定义类型3.3 长度域 四、operator new与operator delete函数五、new和delete的实现原理5.1 内置类型5.2 自定义类…

K8S--水平自动扩缩容实战演练

原文网址:K8S--水平自动扩缩容实战演练-CSDN博客 简介 本文用实例来展示K8S的自动扩缩容(水平方向)。 官网网址 HorizontalPodAutoscaler 演练 | Kubernetes 为 Pod 和容器管理资源 | Kubernetes 水平扩缩的原理 水平扩缩容&#xff…

阿里云-零基础入门NLP【基于深度学习的文本分类3-BERT】

文章目录 学习过程赛题理解学习目标赛题数据数据标签评测指标解题思路BERT代码 学习过程 20年当时自身功底是比较零基础(会写些基础的Python[三个科学计算包]数据分析),一开始看这块其实挺懵的,不会就去问百度或其他人,当时遇见困难挺害怕的…

NKCTF2024-Eznative

首先使用blutter解析,拿到如上的output文件 先看看asm 都被混淆了,真的是太可恶了。 查看libapp.so的内容 一点符号都不给,首先我们使用LoadScript File去添加一部分符号 加载之前解析的 恢复了一部分,但是没有什么乱用啊 这个时候…

微服务(基础篇-002-Ribbon)

目录 Ribbon负载均衡(1) 负载均衡的原理(1.1) 负载均衡策略(1.2) Ribbon-IRule(1.2.1) 修改负载均衡的方法(1.2.2) 懒加载(1.3) 饥饿加载(1…

吴恩达2022机器学习专项课程(一) 3.3 成本函数的公式

问题预览 模型的参数(w和b)有什么作用?不同的w和b对线性回归模型有什么影响?训练集里的y和线性回归模型预测的y(y帽)的区别是什么?成本函数的作用是什么?成本函数的公式是什么&…

【PyQt】19-数据操作

数据表 前言一、显示二维表数据(QTableView控件)扩展知识---MVC模式1.1 代码1.2 运行结果 二、显示列数据(QListView控件)2.1 代码2.2 运行结果2.3 扩展---列表控件(QListWidget)运行结果 总结 前言 一、显…

C语言中的联合和枚举

1、联合体 联合体类型的声明 像结构体⼀样,联合体也是由⼀个或者多个成员构成,这些成员可以不同的类型。但是编译器只为最⼤的成员分配⾜够的内存空间。联合体的特点是所有成员共⽤同⼀块内存空间。所以联合体也叫:共⽤体。因为所有变量公用…

UE5 LiveLink 自动连接数据源,以及打包后不能收到udp消息的解决办法

为什么要自动连接数据源,因为方便打包后接收数据,这里我是写在了Game Instance,也可以写在其他地方,自行替换成Beginplay和Endplay 关于编辑器模式下能收到udp消息,打包后不能收到消息的问题有两点需要排查,启动打包后…
最新文章