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、在弹窗的页面,设置背景样式

相关推荐
敖行客 Allthinker14 小时前
UniApp iOS APNs 推送证书一站式配置
uni-app·mac
梦曦i16 小时前
uni-router新推useUniEventChannel,彻底解决页面通信难题
前端·uni-app
宠友信息16 小时前
内容社区源码多端数据协议与 Spring Boot 状态流转实现思路
java·spring boot·websocket·uni-app
2501_9159184118 小时前
PerfDog 太贵?iOS 性能监控工具的功能对比与选择
android·ios·小程序·https·uni-app·iphone·webview
PedroQue9918 小时前
uni-router新推useUniEventChannel,彻底解决页面通信难题
前端·uni-app
2501_915909062 天前
IPA 深度混淆是什么意思?从混淆强度到实际效果的解读
android·ios·小程序·https·uni-app·iphone·webview
蜡台2 天前
修改Uniapp input 组件不刷新视图问题
前端·uni-app·input
宸翰3 天前
uni-app 设置 Android 底部虚拟导航栏背景色
android·前端·uni-app
千逐683 天前
UniApp 鸿蒙实战:音视频与多媒体处理完全指南
华为·uni-app·harmonyos·鸿蒙
handsome09163 天前
windows开发uniapp如何上架app到app store
uni-app·上架