小程序(三)

前言:续上集,寒冷不能停止学习,嘻嘻

(一) 基础组件

　　1.媒体主键(video制作弹幕)

 

(二) 创建自定义主键

　　一个自定义组件由 json wxml wxss js 4个文件组成

//必要条件：要在 json 文件中进行自定义组件声明

{
"component": true
}

#使用已注册的自定义组件前，首先要在使用方页面的 json 文件中进行引用声明。 

{
　　"usingComponents":{
　　"标签名(可自定义)":"组件所在路径(即定义组件的目录所在地)"

　　}
}

注意事项：

• 因为WXML节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。

• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。

• 自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

• 旧版本的基础库不支持自定义组件，此时，引用自定义组件的节点会变为默认的空节点。

(三) slot节点

　　在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

//注意：默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在自定义组件js中声明启用：

Component({
　　options: {
　　multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
})

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

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

//使用时，用 slot 属性来将节点插入到不同的slot上：
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>    
</view>

(三) 外部样式

//有时，组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类：
Component({
  externalClasses: ['my-class']
})

//这样，组件内的效果将会受到外部样式的影响：
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

(四) 全局样式

//使用外部样式类可以让组件使用指定的组件外样式类，如果希望组件外样式类能够完全影响组件内部，可以将组件构造器中的options.addGlobalClass字段置为true：
/* 组件 custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})

//设置后在组件的模板文件中：
<!-- 组件 custom-component.wxml -->
<text class="red-text">这段文本的颜色由组件外的 class 决定</text>

注意：当开放了全局样式类，存在外部样式污染组件样式的风险，请谨慎选择。

(五) 传递模板数据

//与普通的 WXML 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据，但是需要注意，绑定数据前，需要在自定义模板的js文件中进行申明： 
Component({

  properties: {
    属性1: {
      type:数据类型,  //支持的数据类型：String、Array、Object、null、Boolean
      value: 默认值
    },
    属性2: {
      type: 数据类型,
      value: 默认值,
      observer(新值, 老值, 属性名){//回调函数

      }
    }
  }
};

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name 属性1="属性1值" 属性2="属性2值">
      ....
  </component-tag-name>
</view>