原生小程序组件

// index.wxml 
 
// index.json
  "usingComponents": {
       "lamp": "../lamp/lamp"    // 引入lamp组件
  }
// index.js
 this.lamp = this.selectComponent("#lamp")
 this.lamp.startSetInter(this.rolltime);  // 调用

组件：lamp

/* lamp.json*/
{
"component": true
}

lamp.wxml && lamp.wxss 和其他页面一样没什么不同

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  // 接受从页面传递过来的参数
  properties: {
    Marquistext: {
      type: String,
      value: "默认值",     // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal){} 
  // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'propertyChange'
    },
    Marquistext: String    // 简写方式
  },
  // 组建的私有数据
  data: {},
  attached: function(){
  //组件生命周期函数，在组件实例进入页面节点树时执行
  },
  moved: function(){
  // 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
  },
  detached: function(){
  //组件生命周期函数，在组件实例被从页面节点树移除时执行
  },
  // 组建的方法
  methods: {
    hideDialog: function () { },
    startSetInter: function (e) {
      // 
    }
  }
});

插入模板 单个solt（默认单个）

// page模板

    这里是page的内容
    这里是插入到组件slot中的内容
  

// component模板

  这里是组件的内部节点
  

// page页面
这里是page的内容
这里是组件的内部节点
这里是插入到组件slot中的内容

插入模板 多个solt

可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

// 必须配置此选项，否则不会生效
 options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  
    
    插入到组件slot name="before"中  // 
    插入到组件slot name="after"中 
    
  


// component模板

  
  这里是组件的内部细节
  

组建样式

组件默认样式

 //component .wxss
:host {
  color: yellow;
···
}

组件引用外部的样式

  xxxxx
 
.my-class{
  color: #fff
}

  
Component({
  externalClasses: ['my-class']
})
   
:host {        //此时 设置的样式不会起作用，还是会用my-class的样式
  color: yellow;
···
}

组件组建 全局&&page 的样式(会污染组建样式)

/* 组件 component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})