码迷,mamicode.com
首页 > 其他好文 > 详细

【自定义组件】结构

时间:2018-11-13 16:12:12      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:选择   observer   div   prope   ready   XML   ontap   type   内部数据   

自定义组件类似页面,也是由 json wxml wxss js 4个文件组成。

1.  json文件

在json文件中进行组件声明,代码如下:

{
    "component" : true  
}

 

2. js文件

组件的js文件用于注册组件、属性定义、内部数据及自定义方法等。

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: ‘‘, // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal, changedPath) {
         // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:‘_propertyChange‘
         // 通常 newVal 就是新设置的数据, oldVal 是旧数据
      }
    },
    myProperty2: String // 简化的定义方式
  },
  data: {}, // 私有数据,可用于模板渲染

  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) {

    }
  }

})

 

 

 

 

 

3. wxml文件

wxml文件编写组件模板,写法与页面写法类似。

 

4. wxss文件

wxss 文件中加入组件样式,写法与页面wxss写法类似。

组件的wxss中不应使用ID选择器、属性选择器和标签名选择器。

【自定义组件】结构

标签:选择   observer   div   prope   ready   XML   ontap   type   内部数据   

原文地址:https://www.cnblogs.com/wm218/p/9952431.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!