快手广告投放-Component 构造器
Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。
Component(Object object)
快手广告账户-创建自定义组件，接受一个 Object 类型的参数。
参数：
| 定义段 | 类型 | 必填 | 描述 |
|---|---|---|---|
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表 |
| data | Object | 否 | 组件的内部数据，和 properties 一同用于组件的模板渲染 |
| observers | Object | 否 | 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器 |
| methods | Object | 否 | 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用。 详见 组件间通信与事件 |
| behaviors | String Array | 否 | 类似于 mixins 和 traits 的组件间代码复用机制，详见 behaviors |
| created | Function | 否 | 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData |
| attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行 |
| ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行 |
| moved | Function | 否 | 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行 |
| detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行) |
| relations | Object | 否 | 组件间关系定义，详见 组件间关系 |
| options | Object Map | 否 | 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举 |
| lifetimes | Object | 否 | 组件生命周期声明对象，详见 组件生命周期 |
| pageLifetimes | Object | 否 | 组件所在页面的生命周期声明对象，详见 组件生命周期 |
| <!-- | definitionFilter | Function | 否 |
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。
| 属性名 | 类型 | 描述 |
|---|---|---|
| is | String | 组件的文件路径 |
| id | String | 节点 id |
| dataset | String | 节点 dataset |
| data | Object | 组件数据，包括内部数据和属性值 |
| properties | Object | 组件数据，包括内部数据和属性值（与 data 一致） |
| 方法名 | 参数 | 描述 |
|---|---|---|
| setData | Object newData | 设置 data 并执行视图层渲染 |
| hasBehavior | Object behavior | 检查组件是否具有 behavior （检查时会递归检查被直接或间接引入的所有 behavior） |
| triggerEvent | String name, Object detail, Object options | 触发事件，详见 组件间通信与事件 |
| createSelectorQuery | 创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内 | |
| createIntersectionObserver | 创建一个 IntersectionObserver 对象，选择器选取范围为这个组件实例内 | |
| selectComponent | String selector | 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 ks://component-export 影响） |
| selectAllComponents | String selector | 使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组（会被 ks://component-export 影响） |
| selectOwnerComponent | 选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被 ks://component-export 影响） | |
| getRelationNodes | String relationKey | 获取这个关系所对应的所有关联节点，详见 组件间关系 |
| <!-- | groupSetData | Function callback |
| <!-- | getTabBar | |
| getPageId | 返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内 | |
| <!-- | animate | String selector, Array keyframes, Number duration, Function callback |
| <!-- | clearAnimation | String selector, Object options, Function callback |
代码示例
lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, methods: { onMyButtonTap: function(){ this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod: function(){ // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange: function(newVal, oldVal) { } } }) |
注意：在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 ksml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr=""）。
properties 定义
| 定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| type | 是 | 属性的类型 | |
| optionalTypes | Array | 否 | 属性的类型（可以指定多个） |
| value | 否 | 属性的初始值 | |
| observer | Function | 否 | 属性值变化时的回调函数 |
属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好
代码示例
Component({ properties: { min: { type: Number, value: 0 }, min: { type: Number, value: 0, observer: function(newVal, oldVal) { // 属性值变化时执行 } }, lastLeaf: { // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种 type: Number, optionalTypes: [String, Object], value: 0 } } }) |
属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。
快手广告平台-多数情况下，属性最好指定一个确切的类型。这样，在 KSML 中以字面量指定属性值时，值可以获得一个确切的类型，如：
<custom-comp min="1" max="5" />
此时，由于自定义组件的对应属性被规定为 Number 类型， min 和 max 会被赋值为 1 和 5 ，而非 "1" 和 "5" ，即：
this.data.min === 1 // true
this.data.max === 5 // true
使用 Component 构造器构造页面
事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。
此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123¶mB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。
页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。
代码示例
{
"usingComponents": {}
}
Component({
properties: {
paramA: Number,
paramB: String,
},
methods: {
onLoad: function() {
this.data.paramA // 页面参数 paramA 的值
this.data.paramB // 页面参数 paramB 的值
}
}
})
使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。
例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。
代码示例.
// page-common-behavior.js
module.exports = Behavior({
attached: function() {
// 页面创建时执行
console.info('Page loaded!')
},
detached: function() {
// 页面销毁时执行
console.info('Page unloaded!')
}
})
// 页面 A
var pageCommonBehavior = require('./page-common-behavior')
Component({
behaviors: [pageCommonBehavior],
data: { /* ... */ },
methods: { /* ... */ },
})
// 页面 B
var pageCommonBehavior = require('./page-common-behavior')
Component({
behaviors: [pageCommonBehavior],
data: { /* ... */ },
methods: { /* ... */ },
})
评论列表