开发小程序的时候,项目需求要用到一些自定义样式,查阅了官方文档,微信小程序从1.6.3开始,对于自定义组件这块有了比较大的改动,文档比以前全,比以前详细了,现在小程序支持简洁的组件化编程,可以将页面的功能模块抽象成自定义组件,以便在不同的页面复用,提高自己的代码可读性,提高开发效率,降低自己的维护成本!
在项目开发中用到了类似iOS的弹窗组件,基本效果如下:
具体实现如下:
第一步:
我们初始化一个小程序,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们要实现的是一个弹框组件,因此,我们在 components 组件中新建一个alertview 文件夹来存放我们的弹窗组件,在alertview下右击新建 Component 并命名为 alertview 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时项目结构应该如下图所示:
第二步:
组件初始化工作准备完成,接下来设置一下相关配置,首先我们需要声明自定义组件,将 alertview.json 中 component 字段设置为 true(现在新建component文件时,.json中的component 字段默认为 true,不需要设置),不过还是看一下,避免出错。
第三步:
配置完成啦,接下来我们开始写弹窗模板,在 alertview.wxml 文件中加入弹窗组件模板,在 alertview.wxss 文件中加入弹窗组件样式, 写法与写页面的写法一样,就直接贴代码啦~
alertview.wxml文件如下:
alertview.wxss 文件如下图:
第四步:
样式写完啦,具体实现就是在 alertview.js 中。alertview.js 是自定义组件的构造器,是使用小程序中 Component 构造器生成的,调用 Component 构造器时可以用来指定自定义组件的属性、数据、方法等,具体的细节可以参考一下小程序官方文档。
下面代码通过注释解释构造器中的一些属性使用:
第五步:
自定义组件完成啦~接下来开始使用我们自定义的组件:
首先需要在使用的文件 xxx.json 文件中引入组件,(注:我在item文件中使用,在item.json中引入) 引入代码就是圈起来的位置,如下图:
然后在 item.wxml中引入,并增加一些自定义值,如下图:
最后,就是 item.json 文件的配置啦~ 如下图:
测试一下吧!