微信小程序之自定义组件的实现代码（附源码）

更新时刻：二〇一八年八月二日十一点零二分三十九秒，撰文者：

在项目开发过程中，我遇到了不少页面样式上的相似之处，因此萌生了将常用功能模块进行封装成组件的想法，以便于在项目中进行应用和调整。本文将详细介绍微信小程序中自定义组件的实现方法，并附上源代码，有需要的朋友可以参考一下。

近期在项目推进过程中，我发现不少页面样式存在相似之处，于是萌生了将常用功能模块进行封装成组件的想法，以便于在项目中进行应用与调整。接下来，我将依据微信小程序的相关文档，逐步为大家介绍如何编写一个微信小程序组件。

附上效果图：

：创建文件并申明

与开发微信小程序页面相似，构建一个自定义组件亦需包含json、wxml、wxss和js这四个基础文件。

在项目的主目录里设立一个新的文件夹，给它命名为：，然后在此文件夹内部再增设一个子文件夹。

在开发工具的右键菜单中，您可以选择创建新文件，系统会自动生成四个文件。具体操作如图所示：

在.json文件中进行自定义组件声明，如：

在开发工具中右键新建选择，默认自动会创建。

{ "component": true, "usingComponents": {} }

:编写组件模板代码

{{modalTitle}} {{modalDesc}}

:编写样式文件

/* 这里的样式只应用于这个自定义组件 */ /*successModal.wxss*/ .modal-opaci {

position: absolute; left: 0; top: 0; z-index: 100; height: 100%; width: 100%; background: black; opacity: 0.4; filter: alpha(opacity=40); } .modal-cont { position: fixed; top: 30%; left: 8.5%; z-index: 999; border-radius: 20rpx; padding: 40rpx 150rpx; background-color: #fff; text-align: center; } .modal-cont text { line-height: 90rpx; display: block; } .success { color: #09bb07; } .modal-titleTxt { font-size: 50rpx; font-weight: 700; } .warn { color: #f76260; }

:编写业务逻辑

在编写自定义组件的 文件时，必须采用括号来执行组件的注册操作，该组件的属性值以及内部数据信息将直接应用于组件的 WXML 渲染过程中，而这些属性值则可以由外部传入。

//successModal.js Component({ /** * 组件的属性列表 */ properties: { 此处设定了modalHidden这一属性，用户在组件应用过程中可自行设定其值，其表示方法为modal-hidden。 modalHidden: { type: Boolean, value: true }, modalIcon: { type: String, value: ' ', }, modalTitle: { type: String, value: ' ', }, modalDesc: { type: String, value: ' ', } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { // 这里是自定义方法 modal_click_Hidden函数： this.setData({ modalHidden: false, }) }, } })

:使用自定义组件

首先，在所需引用的json文件中进行相应的声明，接着，需分别列出每个自定义组件的名称及其对应的文件存储路径。

//index.json { "usingComponents": { 在“modal-success”路径下，指定了页面中使用的自定义标签名，以及对应的自定义组件文件所在的具体路径：../../component/successModal/successModal。 }, 导航栏标题文字设定为“首页”。 }

其次，于页面wxml部分，引入自定义组件：在wxml中，您能够如同运用基础组件那般，轻松运用自定义组件。其中，节点名称对应着自定义组件的标签名称，而节点属性则代表了传递给组件的各项属性值。

点击

以上就是小程序自定义组件的demo，欢迎。