原生小程序组件

// index.wxml 
 <lamp Marquistext="{{notice.notice}}" bindtap="hiuan" hidden="{{npm}}" id="lamp"></lamp>
// 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模板
<view>
    <view>这里是page的内容</view>
    <tag><view>这里是插入到组件slot中的内容</view></tag>
  </view>

// component模板
<view>
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

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

插入模板 多个solt

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

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

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">插入到组件slot name="before"中</view>  // 
    <view slot="after">插入到组件slot name="after"中</view> 
    <!-- 组件 <slot name="after"> 的位置 -->
  </component-tag-name>
</view>

// component模板
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

组建样式

组件默认样式

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

组件引用外部的样式

<!-- page模板 -->
  <component-tag-name class="my-class" >xxxxx</component-tag-name>
<!-- page .wxss--> 
.my-class{
  color: #fff
}

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

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

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