小程序自定义组件--弹框组件

开发小程序的时候，项目需求要用到一些自定义样式，查阅了官方文档，微信小程序从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 文件的配置啦~ 如下图：

测试一下吧！