微信小程序无需引用即可实现全局弹框工具

微信小程序无需引用即可实现全局弹框工具

哈喽,各位探友们,这里是小程序探险家。

今天我们来聊一聊微信小程序无需引即可实现全局弹框工具。

在日常开发中,自定义弹框功能是经常需要用到的,其中confirm和alert是最常见的类型。

小程序中的alert相当于toast,如果只是使用系统自带的功能,无需引用,直接使用对应的API即可。

但若要根据UI设计提示弹框,系统自带的功能就无法满足需求了。

接下来我们看看对应的效果。

如图所示,系统自带的弹框并不美观。

这时我们就会用到自定义弹框来实现根据业务需求去美化自定义弹框。

自定义弹框并不能像系统自带的弹框实现全局提示。

首先我们要新建一个自定义组件,然后在要引用的页面中引入该自定义组件。

例如,自定义弹框M要在A、B、C、D、E这五个页面中用到,那么我们就要引入五遍。

这种方法需要在每个页面的wxml中引入组件,导致大量重复代码,同时状态同步过程复杂且不够顺滑,给开发者带来了很大的困扰。

那么为了解决这个问题,我们应该怎么办呢?小程序Skyline渲染模式下就提供了这个解决方案;我们来看看官网给的解释。

看着也不是很好理解。

接下来我们看看下面的使用步骤和案例展示,就能明白。

三个步骤带你了解如何配置2. 添加appBar代码文件,在代码根目录下添加入口文件,注意不要修改文件命名。

我这里是使用typescript来做类型校验的,如果你们使用的是js的话,画红框的后缀改为js就行。

3. 编写appBar代码,用自定义组件的方式编写即可,该自定义组件完全接管appBar的渲染。

另外,自定义组件新增getAppBar接口,可获取当前页面下的appBar组件实例。

注意事项和限制案例展示上图就是使用appbar实现的自定义confirm弹框。

这个弹框的样式可自行更改。

任何页面都可以调用到它,直接使用上面提到的获取appbar实例去操作即可。

这个Toast其实就是跟上面的confirm使用的同一个文件,只不过是通过不同的参数进行不同的展示方式而已。

从而实现了全局自定义弹框的效果。

要想实现全局定义弹框,只要稍微注意一下限制就可以了。

以上就是这次跟大家分享的内容,我们下次再会。

以上就是本文相关内容,如果您对本站感兴趣可收藏本站:快创小站

© 版权声明
THE END
分享