-
店铺开通
销客多小程序商城,可快速开通上架店铺
-
拉新推广
链接12亿微信流量,拉新工具沉淀意向客户
-
复购裂变
拼团、分销等提升转化,不断裂变新用户购买
-
对接门店
线上导流、促活门店,实现线上下同步发展
销客多小程序商城,可快速开通上架店铺
链接12亿微信流量,拉新工具沉淀意向客户
拼团、分销等提升转化,不断裂变新用户购买
线上导流、促活门店,实现线上下同步发展
2020-09-27 作者:黄先生
Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。
定义段 类型 是否必填 描述
properties Object Map 否 组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
data Object 否 组件的内部数据,和 properties 一同用于组件的模版渲染
methods Object 否 组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见 组件事件
behaviors String Array 否 类似于mixins和traits的组件间代码复用机制,参见 behaviors
created Function 否 组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用 setData
attached Function 否 组件生命周期函数,在组件实例进入页面节点树时执行
ready Function 否 组件生命周期函数,在组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery )
moved Function 否 组件生命周期函数,在组件实例被移动到节点树另一个位置时执行
detached Function 否 组件生命周期函数,在组件实例被从页面节点树移除时执行
relations Object 否 组件间关系定义,参见 组件间关系
options Object Map 否 一些组件选项,请参见文档其他部分的说明
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。
属性名 类型 描述
is String 组件的文件路径
id String 节点id
dataset String 节点dataset
data Object 组件数据,包括内部数据和属性值
方法名 参数 描述
setData Object newData 设置data并执行视图层渲染
hasBehavior Object behavior 检查组件是否具有 behavior (检查时会递归检查被直接或间接引入的所有behavior)
triggerEvent String name,
Object detail,
Object options 触发事件,参见 组件事件
create SelectorQuery 创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内
selectComponent String selector 使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象
selectAllComponents String selector使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组
getRelationNodesString relationKey 获取所有这个关系对应的所有关联节点,参见 组件间关系
代码示例:
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: '' // 属性初始值(可选),如果未指定则会根据类型选择一个
observer: function(newVal, oldVal){} // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据,可用于模版渲染
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function(){},
moved: function(){},
detached: function(){},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
_myPrivateMethod: function(){
// 内部方法建议以下划线开头
this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
this.applyDataUpdates()
}
}
})
注意:在 properties 定义段中,属性名采用驼峰写法(propertyName);在 wxml 中,指定属性值时则对应使用连字符写法(component-tag-name property-name="attr value"),应用于数据绑定时采用驼峰写法(attr="{{propertyName}}")。
Tips:
Component 构造器构造的组件也可以作为页面使用。
使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setData 修改。
生命周期函数无法在组件方法中通过 this 访问到。
属性名不要命名成 dataXyz 这样的形式,因为在 WXML 中, data-xyz="" 会被作为节点 dataset 来处理,而不是组件属性。
在一个组件的定义和使用时,组件的属性名和data字段相互间都不能冲突(尽管它们位于不同的定义段中)。
推荐文章
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() ) 获取当前的页面栈,决定需要返回几层。 OBJECT 参数说明:...
小程序的能力需要微信客户端来支撑,每一个基础库都只能在对应的客户端版本上运行,高版本的基础库无法兼容低版本的微...
根据2017年微信小程序最新开发,新开发出了一个非常有远见的功能,就是小程序弹幕功能,通过此功能可以实现实时发送弹...
wx.saveFile(OBJECT) 保存文件到本地。 OBJECT参数说明: 参数 类型 必填 说明 tempFilePath String 是 需要保存的文件的临时路径 succe...
天店收银系统有星耀、星云、标准三个版本,每套系统版本的价格都有所不同,价格从800元起,下面小编就为大家从适用业态...
收银系统小程序的开通流程 1. 选择合适的收银软件 目前市场上有多种收银软件提供小程序店铺功能。例如,店益就是一款能...
在互联网高速发展的今天,线上线下一体化的商业模式已成为主流。特别是对于零售行业而言,将收银系统与微信公众号对接...
收银系统对接微信小程序的流程 准备工作:首先,商家需要准备好收银系统和小程序的开发环境。对于收银系统,可以使用...
直接说答案:目前是不能直接推送自己的小程序的。 不过也不是说没有办法,可以通过视频号小店,然后跳转到自己的微信...
第一:线上线下收银系统 线上线下收银系统是一种结合了实体店铺与在线销售渠道的技术解决方案。这种系统不仅提高了收...