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

网友投稿 581 2023-11-10

最近在项目开发中，遇到好多雷同的页面样式，就想着可以将常用的功能模块封装成组件，方便在项目中使用和修改，下面就参照微信小程序的文档分步骤写一个微信小程序的组件。

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

附上效果图：

step1：创建文件并申明

与创建微信小程序的页面一样，一个自定义组件也需要json,wxml,wxss,js四个文件。

在项目根目录中创建文件夹，取名为：component，在该目录下继续创建文件夹successModal。

可以在开发工具中右键创建，选择component，默认自动会创建四个文件。如图：

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

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

?
1
2
3
4
{
"component": true,
"usingComponents": {}
}

step2:编写组件模板代码

?
1
2
3
4
5
6
7
8
9
<!-- 这是自定义组件的内部WXML结构 success.wxml-->
<view class=modal-section wx:if="{{modalHidden}}">
<view class=modal-opaci bindtap=modal_click_Hidden></view>
<view class=modal-cont>
<icon type={{modalIcon}} size=70></icon>
<text class=modal-titleTxt {{modalIcon}}>{{modalTitle}}</text>
<text class=success-msg>{{modalDesc}}</text>
</view>
</view>

step3:编写样式文件

step4:编写业务逻辑

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//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: function () {
this.setData({
modalHidden: false,
})
},
}
})

step5:使用自定义组件

首先在需要使用的json文件中进行引用申明，然后需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

?
1
2
3
4
5
6
7
//index.json
{
"usingComponents": {
"modal-success": "../../component/successModal/successModal" //在这里写上页面中自定义的标签名和自定义组件的文件路径
},
"navigationBarTitleText": "首页"
}

其次，在页面的wxml中使用自定义组件：在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

?
1
2
3
4
5
6
7
8
<!--index.wxml-->
<view class="container">
<view class="demoBtn" bindtap="bindViewTap">
<text>点击</text>
</view>
<!-- 调用modal组件 -->
<modal-success modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>

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

github地址：https://github.com/ywyan/wx-component

注意点：

对于基础库的1.5.x版本， 1.5.7 也有部分自定义组件支持。 因为WXML节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。 自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀，否则会报错。 旧版本的基础库不支持自定义组件，此时，引用自定义组件的节点会变为默认的空节点。

总结

您可能感兴趣的文章:微信小程序自定义select下拉选项框组件的实现代码微信小程序自定义组件封装及父子间组件传值的方法微信小程序自定义组件之可清除的input组件微信小程序自定义组件实现tabs选项卡功能微信小程序自定义prompt组件步骤详解微信小程序自定义组件微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 代码 微信小程序 小程序 js
上一篇:小程序通过小程序云实现微信支付功能实例
下一篇:uniapp微信小程序订阅消息发送服务通知超详细教程
相关文章

 发表评论

暂时没有评论，来抢沙发吧~