uniapp的app项目,添加全局弹窗

项目需求:需要每隔半个小时,获取硬件的电量,如果电量低于20%,弹窗提示。

在APP.vue中增加了mixins,在mixins中实现每隔半小时获取电量的工作。

但是全局弹窗怎么做,之前确实不清楚。

1、刚开始想着直接在APP.vue中定义弹窗,或者组件引入,但是发现app.vue中定义弹窗不行。

2、后来又想直接去插件市场找个插件,刚开始找了如下的,在h5可以运行,但是app可能是我写的不对,有点问题。

3、后来去uniapp官网,直接搜索全局弹窗,找到了一个,点击进去,她有例子,点击例子链接

其中对应的例子,就是

可以下载参考,它是直接把弹窗配置到了package.json中,然后在对应的地方跳转,

跳转到的弹窗页面,注意设置背景page {

background: transparent;

}

至此,就实现了全局弹窗,再次总结:

1、在app.vue中定义mixins,将需要的公共操作放进来。

2、将弹窗定义到package.json中,具体配置如下

3、在对应的需要弹窗的地方,设置事件,用跳转的方式显示弹窗

4、在弹窗的页面,设置背景样式

相关推荐
不法1 小时前
uniapp image标签展示视频第一帧
uni-app
IceyWu1 小时前
uniapp小程序 LivePhoto(实况图片)实现详解
微信小程序·uni-app
小付-小付7 小时前
萤石云监控web+uniapp
uni-app
996幸存者21 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app
anyup1 天前
🔥 uView Pro 全新升级来啦!一行配置,解锁 uView Pro 全局 TS 类型提示与校验
前端·vue.js·uni-app
Ankkaya1 天前
开发小结(08.11-08.16)
前端·uni-app
源码哥_博纳软云1 天前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
Burt1 天前
#🎉 unibest 3.11了!快来看看新增了啥~
微信小程序·uni-app
2501_915106322 天前
iOS混淆工具实战 金融支付类 App 的安全防护与合规落地
android·ios·小程序·https·uni-app·iphone·webview
TellMeha2 天前
uniapp打包app关于获取本机相机、相册、麦克风等权限问题(ios第一次安装权限列表里没有对应权限问题)
ios·uni-app