小程序自定义组件示例教程

一个小程序提供了很多api和基本组件，但是为了降低代码的复杂性并提高重用率，小程序还提供了自己的代码重用机制:

小程序多路复用：页面模板（模板），组件模板（组件，以标签的形式）。

这两个模板的编写方式与上一页相同，包含四个文件wxml，js，wxss，json

其次，我们总是在使用底层组件时编写事件和属性值，

自定义组件还需要拥有自己的属性和事件，

属性分为内部属性和外部属性，它们共同设置组件的样式。内部属性可以理解为手机预装的软件。外部属性可以理解为移动电话的应用商店，可以由您自己手动管理。当然，我们还为用户提供了修改内部属性的接口。

第三，生命周期：

组件也具有生命周期功能，就像页面一样。

该页面包含：onload onready onshow onhideonunload

组件是：创建附加的readydetached移动

新组件组件：

第四，自定义组件，这是一个官方的例子

组件（{//自定义表单的自定义组件，例如页面页面（{}），应用程序文件App（{}）

行为: []，

属性: {

myProperty: {//属性名称

类型: String，//type（必需），当前接受的类型包括：String，Number，Boolean，Object，Array，null（对于任何类型）

值:''，//属性初始值（可选），如果未指定，将根据类型选择一个

观察者:函数（newVal，oldVal）{} //更改属性时执行的函数（可选），或者可以将其写为方法部分中定义的方法名称字符串，例如：'_ propertyThange'

}，

myProperty2:字符串//简化定义

}，

数据: {}，//私有数据，可用于模板渲染

//生命周期函数，可以是函数，也可以是方法部分中定义的方法名称

附加:函数（）{}，

移动了:函数（）{}，

分离的:函数（）{}，

方法: {

onMyButtonTap: function（）{

this.setData（{

//更新属性和数据的方法类似于更新页面数据的方法

}）

}，

_myPrivateMethod: function（）{

//内部方法建议以下划线开头

this.replaceDataOnPath（['A'，0，'B']，'myPrivateData'）//这会将data.A [0] .B设置为'myPrivateData'

this.applyDataUpdates（）

}，

_propertyChange:函数（newVal，oldVal）{

}

}

}）

在组件页面的json文件中配置

{useComponents: {'自定义组件名称':'组件的绝对路径'}}，例如{useComponents: {'p':'./page/page'}}

要求：将其他基本组件放入自定义组件中。

方法：在自定义组件的wxml文件中使用标记

自定义组件：将此标记放在您想要的位置。

引用页面：//如果要设置样式，则在标签中写入无效。

组件（无论是自定义组件还是基本组件）都有自己的属性事件。

注意：如果name属性写在组件的wxml文件的slot标记中，那么必须在组件的js文件中写入选项: {multipleSlots: true}，否则它将无效。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。