程序自定义组件框架接口(附代码示例

网友投稿 38 2024-07-04

自定义组件

#1. Component

创建自定义组件,接受一个 Object 类型的参数。

扩展功能:可以创建一个xxx.ext.json文件。 xxx.ext.json中的配置

#

定义段类型是否必填描述最低版本
propertiesObject Map组件的对外属性,是属性名到属性设置的映射表
dataObject组件的内部数据,和 properties 一同用于组件的模板渲染
observersObject组件数据字段-,用于监听 properties 和 data 的变化2.0.11
methodsObject组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
behaviorsString Array类似于mixins和traits的组件间代码复用机制
createdFunction组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData
attachedFunction组件生命周期函数-在组件实例进入页面节点树时执行
readyFunction组件生命周期函数-在组件布局完成后执行
detachedFunction组件生命周期函数-在组件实例被从页面节点树移除时执行
methodsObject组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
relationsObject组件间关系定义,参见 组件间关系
optionsObject Map一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举)
externalClassesString Array组件接受的外部样式类
lifetimesObject组件生命周期声明对象
pageLifetimesObject组件所在页面的生命周期声明对象,参见 组件生命周期2.0.4

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

属性名类型描述最低版本
isString组件的文件路径2.1.5
idString节点id2.1.5
datasetString节点dataset2.1.5
dataObject组件数据,包括内部数据和属性值2.1.5
propertiesObject组件数据,包括内部数据和属性值(与 data 一致)2.1.5
方法名参数描述最低版本
setDataObject newData设置data并执行视图层渲染
triggerEventString name, Object detail, Object options触发事件,参见 组件间通信与事件
createSelectorQuery
创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内1.5.28
createIntersectionObserver
创建一个 IntersectionObserver 对象,选择器选取范围为这个组件实例内1.3.7
selectComponentString selector使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象1.5.29
selectAllComponentsString selector使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组1.5.29
getRelationNodesString relationKey获取这个关系所对应的所有关联节点,参见 组件间关系1.5.38
hasBehaviorObject behavior检查组件是否具有 behavior (检查时会递归检查被直接或间接引入的所有behavior)2.1.5
getPageId
返回页面标识符(一个字符串),可以用来判断几个自定义组件实例是不是在同一个页面内2.1.5

代码示例

Component({

  behaviors: [],

  // 属性定义(详情参见下文)
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

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

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

  // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: 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);在 FXML 中,指定属性值时则对应使用连字符写法(component-tag-name property-name="attr value"),应用于数据绑定时采用驼峰写法(attr="")。

#2. properties

定义段参数是否必填描述最低版本
type
属性的类型
value
属性的初始值
observerFunction属性值变化时的回调函数

代码示例

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 表示不限制类型。
多数情况下,属性最好指定一个确切的类型。这样,在 FTML 中以字面量指定属性值时,值可以获得一个确切的类型,如:

<custom-comp min="1" max="5" />
        已复制代码

此时,由于自定义组件的对应属性被规定为 Number 类型, min 和 max 会被赋值为 1 和 5 ,而非 "1" 和 "5" ,即:

this.data.min === 1 // truethis.data.max === 5 // true
        已复制代码

提示

  • 使用 this.data 可以获取内部数据和属性值;但直接修改它不会将变更应用到界面上,应使用 setData 修改。

  • 属性名应避免以 data 开头,即不要命名成 dataXyz 这样的形式,因为在 FXML 中, data-xyz="" 会被作为节点 dataset 来处理,而不是组件属性。

  • 在一个组件的定义和使用时,组件的属性名和 data 字段相互间都不能冲突(尽管它们位于不同的定义段中)。

#3. Behavior

注册一个 behavior,接受一个 Object 类型的参数。

参数 Object object

定义段类型是否必填描述最低版本
propertiesObject Map同组件的属性
dataObject同组件的数据
methodsObject同自定义组件的方法
behaviorsString Array引入其它的 behavior
createdFunction生命周期函数
attachedFunction生命周期函数
readyFunction生命周期函数
detachedFunction生命周期函数

代码示例

// my-behavior.jsmodule.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }})


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序页面框架接口参数(附代码)
下一篇:小程序框架模块化
相关文章

 发表评论

暂时没有评论,来抢沙发吧~