Component 构造器
Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等

定义参数

选项名类型是否必填说明
properties Object 否组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段，type 表示属性类型、value 表示属性初始值、observer 表示属性值被更改时的响应函数
data Object 否组件的内部数据，和 properties 一同用于组件的模版渲染
methods Object 否组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件事件
behaviors String/Array 否类似于 mixins
created Function 否组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData
attached Function 否组件生命周期函数，在组件实例进入页面节点树时执行
ready Function 否组件生命周期函数，在组件布局完成后执行
moved Function 否组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached Function 否组件生命周期函数，在组件实例被从页面节点树移除时执行
options Object 否其他选项
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

通用属性列表

属性名类型说明
is String 组件的文件路径
id String 节点 id
dataset String 节点 dataset
data Object 组件数据
properties Object 组件数据
方法列表

方法名参数及其类型说明
setData Object data 设置 data
hasBehavior Object behavior 检查组件是否具有 behavior
triggerEvent String eventName, Object detail, Object options 触发事件
代码示例

Component({
behaviors: [],

properties: {
myProperty: {
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
type: String,

  // 属性初始值（可选），如果未指定则会根据类型选择一个value: '',// 属性被改变时执行的函数（可选），也可以写成在 methods 段中定义的方法名字符串, 如：'_propertyChange'observer: function(newVal, oldVal, changedPath) {// 通常 newVal 就是新设置的数据， oldVal 是旧数据}
},
myPropertyB: String // 简化的定义方式

// 私有数据，可用于模版渲染
data: {},

// 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
attached: function () { },
ready: function() { },

// 组件自定义方法
methods: {
onMyButtonTap: function(){
this.setData({ … })
},

_myPrivateMethod: function(){// 这里将 data.A[0].B 设为 'test'this.setData({'A[0].B': 'test'})
},_propertyChange: function(newVal, oldVal) {}

}
})
注意：在 properties 定义中，属性名采用驼峰写法（propertyName）；在 ttml/wxml 中，指定属性值时则对应使用连字符写法（my-component property-name=“value”），应用于数据绑定时采用驼峰写法（attr=""）。

使用 Component 构造器构造页面

小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。

此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123&paramB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。

代码示例

{
“usingComponents”: {}
}
在组件代码中

Component({
properties: {
paramA: Number,
paramB: String,
},

methods: {
onLoad() {
this.data.paramA // 页面参数 paramA 的值
this.data.paramB // 页面参数 paramB 的值
}
}
})
注意：此功能正在逐步支持中，可能会存在不符合预期的问题

头条小程序Component构造器相关推荐

基于uniapp开发的适用于微信小程序，头条小程序
基于的uni-app开发的跨平台商城小程序(微信小程序,头条小程序,抖音小程序),合理的代码结构和规范的编码风格,能够让你很轻松的上手并转化成为自己的作品. 与之相支持的是,我们提供了一套完整的项目代 ...
微信小程序不支持打开非业务域名_开达应用五端合一：抖音/头条小程序基础配置...
抖音/头条小程序基础配置小程序AppKey AppSecret获取登录到字节跳动小程序管理平台,开发: 域名配置登录到字节跳动小程序管理平台,进入开发»服务器域名,点击添加自己的网站域名登录 ...
关于今日头条小程序（字节跳动小程序）相关问题
上周突然遇到让开发今日头条小程序(字节跳动小程序)的需求,然后看了下文档发现真的简陋.而且文档有错别字.槽点有点多.但是和老版本的小程序相差不多,然后我就抱着试一试的心态,真的是试一试把微信小程序换了 ...
头条小程序 button组件设置边框问题
在uni-app框架下适配头条小程序,给button组件设置圆角出现了以下现象: 按uni-app文档给button组件加上plain 在开发者工具中可以了,但真机上还是不行. 看了一下字体跳动小程序 ...
VUE踩坑——this.$nextTick、头条小程序组件传值报错问题
头条小程序在使用插件并调用组件方法报错 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTi ...
今日头条适配方案_探索头条小程序开发！JavaScript为什么成了众多小程序的首选？...
从13年百度率先提出轻应用的概念以来,支付宝,微信等好多大流量App都借助自己的平台,推出了小程序.小程序的优势很明显:轻量.无需安装.随用随走.性能又可以媲美原生的应用,更重要的是可以充分发挥各自平 ...
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序. WordPre ...
今日头条小程序内测！BAT早已收割，张一鸣还能分到羹吗？
文:罗超,陶程亦有贡献日前,一位开发者向"罗超频道"透露,其已受邀参加今日头条小程序内测,如果不出意外,今日头条小程序平台很快就会发布. 如果今日头条发布小程序,将是继BAT后, ...
今日头条小程序平台今日发布，头条小程序开放了哪些能力？
继微信.支付宝.百度发布各自的小程序平台后,在今日头条生机大会上,今日头条启动生态升级,打造基础设施最完备的内容平台,并且发布了头条小程序平台. 小程序官方示例使用在今日头条客户端中搜索" ...
大力出奇迹：今日头条小程序跻身代理创业新沃土
提到小程序,大家都还是最熟悉微信小程序了,确实,微信小程序出现早,影响大,使用普遍,这些都是得益于微信这个超级APP,如果没有微信的沉淀,小程序恐怕也不会这么有名.小程序的由来就是微信的作用,现在来看 ...

头条小程序Component构造器

定义参数

使用 Component 构造器构造页面

头条小程序Component构造器相关推荐

最新文章

热门文章