甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

创新互联百度小程序教程：Component构造器

  • Component 构造器
    • 定义字段与示例方法
    • 使用 Component 构造器构造页面

    Component 构造器

    基础库 3.260.6 及以上版本开始，使用 Component 构造器构造的页面开始支持onInit生命周期。

    让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、网络空间、营销软件、网站建设、巴东网站维护、网站推广。

    定义字段与示例方法

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

    字段 类型 是否必填 描述 最低版本
    properties Object Map 否 组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
    data Object 否 组件的内部数据，和 properties 一同用于组件的模板渲染
    methods Object 否 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件事件
    behaviors Array. 否 类似于 mixins 和 traits 的组件间代码复用机制，参见 behaviors
    onInit Function 否 页面生命周期函数，仅在使用 Component 构造器构造页面时有效，在页面初始化时执行，与 Page.onInit 使用方法一致，参见在 onInit 请求首屏主数据 3.260.6
    created Function 否 组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用 setData ，参见组件生命周期
    attached Function 否 组件生命周期函数，在组件实例进入页面节点树时执行，参见组件生命周期
    ready Function 否 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息，参见组件生命周期
    detached Function 否 组件生命周期函数，在组件实例被从页面节点树移除时执行，参见组件生命周期
    externalClasses Array. 否 组件接受的外部样式类，参见组件模板和样式 1.13.27
    options Object Map 否 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举） 1.13.27
    lifetimes Object 否 组件生命周期声明对象，组件的生命周期：created、attached、ready、detached 将收归到 lifetimes 字段内进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则 lifetimes 字段内声明方式优先级最高，参见组件生命周期 1.13.27
    pageLifetimes Object 否 组件所在页面的生命周期声明对象，目前仅支持页面的 show 和 hide 两个生命周期，参见组件生命周期 1.13.27
    definitionFilter Function 否 定义段过滤器，用于自定义组件扩展，参见自定义组件扩展 1.13.27

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

    属性名 类型 描述 最低版本
    is String 组件的文件路径 1.13.27
    id String 节点 id 1.13.27
    dataset String 节点 dataset 1.13.27
    data Object 组件数据，包括内部数据和属性值
    properties Object 组件数据，包括内部数据和属性值（与 data 一致）
    方法名 参数 描述 最低版本
    setData Object newData 设置 data 并执行视图层渲染
    hasBehavior Object 检查组件是否具有 behavior（检查时会递归检查被直接或间接引入的所有 behavior） 1.13.27
    triggerEvent String name,
    Object detail,
    Object options    		 触发事件，参见组件事件
    createSelectorQuery Object newData 创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内，与 swan.createSelectorQuery().in(this) 是等效 2.5.3
    createIntersectionObserver Object options 创建一个 IntersectionObserver 对象，选择器选取范围为这个组件实例内 2.5.3
    selectComponent String selector 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 swan://component-export 影响），在生命周期 onReady 开始时生效
    selectAllComponents String selector 使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组
    groupSetData Function callback 立刻执行 callback ，其中的多个 setData 之间不会触发界面进行重复绘制 2.10.7

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. // 自定义组件js
      2.   
  
  
    2. Component({
      3.   
  
  
    3.  properties: {
      4.   
  
  
    4.  // 属性名
      5.   
  
  
    5.  propName: { 
      6.   
  
  
    6.  // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      7.   
  
  
    7.  type: String, 
      8.   
  
  
    8.  // 属性初始值（必填）
      9.   
  
  
    9.  value: 'val', 
      10.   
  
  
    10.  observer: function(newVal, oldVal) {
      11.   
  
  
    11.  // 属性被改变时执行的函数（可选）
      12.   
  
  
    12.  }
      13.   
  
  
    13.  }
      14.   
  
  
    14.  },
      15.   
  
  
    15.  // 私有数据，可用于模板渲染
      16.   
  
  
    16.  data: {}, 
      17.   
  
  
      18.   
  
  
    18.  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
      19.   
  
  
    19.  attached: function () {},
      20.   
  
  
      21.   
  
  
    21.  detached: function () {},
      22.   
  
  
      23.   
  
  
    23.  methods: {
      24.   
  
  
    24.  onTap: function () {
      25.   
  
  
    25.  this.setData({
      26.   
  
  
    26.  // 更新属性和数据的方法与更新页面数据的方法类似
      27.   
  
  
    27.  });
      28.   
  
  
    28.  }
      29.   
  
  
    29.  }
      30.   
  
  
    30. });
      31.

    注意：
    在 properties 定义段中，属性名应该采用驼峰写法（propsName）；在 swan 模板中，指定属性值时则对应使用连字符写法（ component-tag-name props-name="props value" ）。

    使用 Component 构造器构造页面

    解释：
    事实上，一个自定义组件也可以视为一个页面，故页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义字段与实例方法，其必要配置项（ json ）与正常自定义组件一致，即需要有component: true字段。

    关于页面传参：
    从其它页面跳转到由自定义组件构造的页面时，如跳转到页面 /components/custom/custom?paramA=123¶mB=xyz ，你可以在由 custom 组件构造的页面 onInit 或 onLoad 生命周期中获取传递的 query 字段。

    注意：
    页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。

    代码示例

    • JSON
    • JS
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  "component": true,
      3.   
  
  
    3.  "usingComponents": {}
      4.   
  
  
    4. }
      5.  
 
 
     
 
 
      
  
  
  
    1. /* /components/custom/custom.js */
      2.   
  
  
    2. Component({
      3.   
  
  
    3.  methods: {
      4.   
  
  
    4.  onLoad: function(options) {
      5.   
  
  
    5.  // 123
      6.   
  
  
    6.  console.log(options.paramA);
      7.   
  
  
    7.  // xyz 
      8.   
  
  
    8.  console.log(options.paramB); 
      9.   
  
  
    9.  }
      10.   
  
  
    10.  }
      11.   
  
  
    11. });
      12.

    使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. // behavior.js
      2.   
  
  
    2. module.exports = Behavior({
      3.   
  
  
    3.  attached: function() {
      4.   
  
  
    4.  // 页面创建时执行
      5.   
  
  
    5.  console.info('Page loaded!')
      6.   
  
  
    6.  },
      7.   
  
  
    7.  detached: function() {
      8.   
  
  
    8.  // 页面销毁时执行
      9.   
  
  
    9.  console.info('Page unloaded!')
      10.   
  
  
    10.  }
      11.   
  
  
    11. })
      12.
    • JS
     
 
 
      
  
  
  
    1. // 自定义组件 A
      2.   
  
  
    2. var pageCommonBehavior = require('../behavior.js')
      3.   
  
  
    3. Component({
      4.   
  
  
    4.  behaviors: [pageCommonBehavior],
      5.   
  
  
    5.  data: { /* ... */ },
      6.   
  
  
    6.  methods: { /* ... */ },
      7.   
  
  
    7. })
      8.
    • JS
     
 
 
      
  
  
  
    1. // 自定义组件 B
      2.   
  
  
    2. var pageCommonBehavior = require('../behavior.js')
      3.   
  
  
    3. Component({
      4.   
  
  
    4.  behaviors: [pageCommonBehavior],
      5.   
  
  
    5.  data: { /* ... */ },
      6.   
  
  
    6.  methods: { /* ... */ },
      7.   
  
  
    7. })
      8.

    从基础库 3.260.6 版本开始，使用 Component 构造器构建的页面开始支持使用 onInit 生命周期，执行时机与 Page.onInit 相同，开发者可以使用该生命周期提前发起首屏请求，参见 在 onInit 请求首屏主数据
    注意：
    Component.onInit 具有和 Page.onInit 完全相同的限制，即不能进行任何依赖视图层的操作等。

    代码示例

    • JS
     
 
 
      
  
  
  
    1. function getData(param) {
      2.   
  
  
    2.  return new Promise((resolve, reject) => {
      3.   
  
  
    3.  swan.request({
      4.   
  
  
    4.  url: 'xxx',
      5.   
  
  
    5.  success: res => resolve(res)
      6.   
  
  
    6.  });
      7.   
  
  
    7.  });
      8.   
  
  
    8. }
      9.   
  
  
      10.   
  
  
    10. Component(
      11.   
  
  
    11.  // 使用一个标记位，确保只请求一次主数据，用于低版本兼容
      12.   
  
  
    12.  hasRequest: false
      13.   
  
  
    13.  data: {
      14.   
  
  
    14.  value: ''
      15.   
  
  
    15.  },
      16.   
  
  
    16.  methods: {
      17.   
  
  
    17.  onInit(param) {
      18.   
  
  
    18.  if (!this.hasRequest) {
      19.   
  
  
    19.  this.hasRequest = true;
      20.   
  
  
    20.  getData(param).then(res => {
      21.   
  
  
    21.  this.setData({
      22.   
  
  
    22.  value: res.data
      23.   
  
  
    23.  });
      24.   
  
  
    24.  })
      25.   
  
  
    25.  }
      26.   
  
  
    26.  },
      27.   
  
  
      28.   
  
  
    28.  onLoad(param) {
      29.   
  
  
    29.  if (!this.hasRequest) {
      30.   
  
  
    30.  this.hasRequest = true;
      31.   
  
  
    31.  getData(param).then(res => {
      32.   
  
  
    32.  this.setData({
      33.   
  
  
    33.  value: res.data
      34.   
  
  
    34.  });
      35.   
  
  
    35.  })
      36.   
  
  
    36.  }
      37.   
  
  
    37.  }
      38.   
  
  
    38.  }
      39.   
  
  
    39. );
      40.

    说明：

    • 使用 this.data 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改；
    • 属性名应避免以 data- 开头，因为在 SWAN 中，data-name='swan'会被作为节点 dataset 来处理；
    • 属性名应避免以 prop- 开头 在处理过程中会将该前缀删除；
    • 属性名应避免包含 “ _ ” 字符，因为在渲染过程中将会以 “ _ ” 字符进行拆分。

    本文标题：创新互联百度小程序教程：Component构造器
    分享链接：https://chengdu.cdxwcx.cn/article/dhcegsh.html

    其他资讯