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

相关推荐
专科3年的修炼2 天前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
q5507071772 天前
uniapp/uniappx实现原生图片编辑涂鸦、贴图、滤镜、旋转、裁剪等
uni-app
计算机学姐3 天前
基于微信小程序的校园失物招领管理系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·信息可视化·微信小程序·uni-app
2501_915921433 天前
HTTPS前端劫持 新一代流量劫持解决方案
前端·网络协议·ios·小程序·https·uni-app·iphone
爱怪笑的小杰杰3 天前
优化 UniApp 日历组件的多语言切换:告别 setLocale 引起的 App 重启
java·前端·uni-app
计算机学姐3 天前
基于微信小程序的宠物服务系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·微信小程序·uni-app·宠物
2501_915909063 天前
iOS应用签名的三种方法全解析:从官方到第三方工具
android·ios·小程序·https·uni-app·iphone·webview
心中无石马4 天前
uniapp引入tailwindcss4.x
前端·css·uni-app
fix一个write十个4 天前
【uniApp开发】微信小程序 web-view 内嵌 H5 跳转支付踩坑实录
微信小程序·uni-app
wuxianda10304 天前
苹果App上架4.3a被拒解决方案汇报总结
ios·uni-app·objective-c·cocoa·苹果上架·4.3a