微信小程序自定义组件实现代码(附源代码)

最近在项目开发中，遇到了很多类似的页面样式，我以为常用的功能模块可以打包成组件，方便项目中的使用和修改。在这里，我将参考微信小程序的文档，一步一步地写一个微信小程序的组件。

附加渲染：

步骤1:创建一个文件并声明

就像创建微信小程序的页面一样，一个自定义组件也需要JSON、WXML、WXSS和JS文件。

在项目的根目录下创建一个名为：component的文件夹，并继续在此目录下创建文件夹successModal。

您可以在开发工具中右键单击并选择组件。默认情况下，将自动创建四个文件。如图所示：

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

右键单击开发工具中的新建，然后选择组件，默认情况下，该组件将自动创建。

{“组件”:为真，“使用组件”: {}}步骤2:编写组件模板代码

！-这是自定义组件success . WXML-View class=' modal-section ' wx : if=' { { modal hidden } } ' View class=' modal-opaci ' bind tap=' modal _ click _ hidden '/View View class=' modal-cont '图标类型=' { { modal icon } } ' size=' 70 '/icon text class=' modal-title txt { { modal icon } } ' { { modal title } }/text text class=' success-msg ' { modal desc } '

/*此处的样式仅适用于此自定义组件*//* successmodal.wxss */。modal-opaci {位置：绝对；left : 0；top : 0；z-index : 100；高度： 100%；宽度： 100%；背景：黑色；opacity: 0.4filter: alpha(不透明度=40)；}.modal-cont { position:固定；top : 30%；左侧：8.5%；z-index : 999；border-radius : 20 rpx；padding: 40rpx 150rpx背景-color : # fff；文本对齐：中心；}.model-cont text { line-height : 90 rpx；display:块；}.成功{ color: # 09bb07}.modal-title TxT { font-size : 50 rpx；font-weight : 700；}.warn { color: # f76260}步骤4:编写业务逻辑

在自定义组件的js文件中，需要使用component()注册组件，组件的属性值和内部数据将用于渲染组件wxml，其中属性值可以从组件外部导入。

//successmodal . jscomponent({/* * *组件属性列表*/properties: {//这里定义了modalHidden属性。使用组件时，可以指定属性值。书写是模式隐藏模式隐藏： {type:布尔值，value: true}，模式图标： {type: string，value: ' '，}。Modaltitle3360 {Type:string，value: ' '，}，Modaldesc3360 {Type:string，value: ' '，}，/* * *组件的初始数据*/data3360 {}，/* * *组件的方法列表*/methods: {//这里是自定义方法modal _ click _ hidden 3360 function(){ this。setdata({ modal hidden 3360 failure，})}，}})步骤5:使用自定义组件

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

//index.json { '使用组件' : {'modal-success' : '././component/successmodal/successmodal//在页面上写自定义标签的名称和自定义组件的文件路径}这里，NavigationBarTitleText ' : ' home page ' }其次，在页面的wxml中使用自定义组件：可以像基本组件一样在页面的wxml中使用自定义组件。节点名是自定义组件的标签名，节点属性是传递给组件的属性值。

！-index . wxml-view class=' container ' view class=' demo BTN ' bind tap=' bintview tap ' text click/text/view！-调用模态组件-模态-成功模态-隐藏=' {{is _ modal _ hidden}} '模态-图标=' {{is _ modal _ icon}} '模态-标题=' {{is _ modal _ title}} '模态-演示

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

注意事项：

对于基本库的1.5.x版本，1.5.7还支持一些自定义组件。因为WXML节点标签名称只能是小写字母、中间破折号和下划线的组合，所以自定义组件的标签名称只能包含这些字符。自定义组件也可以引用自定义组件，引用方法类似于页面引用自定义组件的方式(使用usingComponents字段)。自定义组件和使用自定义组件的页面不能以“wx-”为前缀，否则将报告错误。旧版本的基本库不支持自定义组件。此时，引用自定义组件的节点将成为默认的空节点。摘要

以上是边肖介绍的微信小程序自定义组件的实现代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！