(一)使用模板自定义小程序弹窗

出于兴趣爱好,今天六月份开始学习H5和小程序开发,在此之前我一直都是从事iOS原生开发的,所以对于H5开发,也算是零基础开始。前期我花了两周时间进行基础知识的学习和简单的界面实践,学习内容主要是JS+CSS3。其中过程在这就不做讨论了。写这篇文章的原因是因为我在开始接收小程序开发工作后,由于项目中比较多的界面是需要弹窗显示的。而在开发过程中我发现代码里并没有一个公共的弹窗样式,只是那个界面用到就在那个界面写一个弹窗样式,这对于长期从事iOS开发的我来说是一种非常难受的事,因为对于iOS来说,我通常都会把经常需要重复使用的的东西放在指定的类里统一管理。对于项目里的弹窗和遮盖层更是如此。查看微信小程序开发文档,是可以自定义模板和组件实现的。本篇文章我只介绍使用模板自定义小程序弹窗,实现起来也比较简单。步骤如下:
1.新建弹窗文件:此处命名为hub(.wxml、.wxss、.js、.json)
在hub.wxml文件中进行弹窗UI布局,布局内容写在template标签里面

在hub.wxss中书写样式,这里跟正常布局是一样的。

2.弹窗模板的使用
(1)在需要弹窗的地方的wxml文件中引入弹窗模板,用import引入

----》使用

(2)在对应需要弹窗的界面的wxss文件中引入弹窗的样式
@import "./template/hub.wxss";

(3)注意,如果弹窗的界面是需要做事件处理的,如页面跳转,按钮点击,这里只需要在模板绑定对应的事件,然后在需要弹窗的界面的js文件里实现对应的方法即可。

你可能感兴趣的:((一)使用模板自定义小程序弹窗)