组件（二）

常见组件

view

代表原来的 div 标签

<view hover-class="h-class">
  点击我试试
</view>

text

• 文本标签
• 只能嵌套文字
• 长按文字可以复制（只有该标签有这个功能）
• 可以对空格、回车进行编码

image

• 图片标签，组件默认宽度 320px ，高度 240px
• 组件中的图片默认水平居中
• 支持懒加载

mode 属性有效值：

mode 有 13 种模式，其中 4 中是绽放模式，9 种是裁剪模式

swiper

微信小程序内置轮播图组件

• 组件默认宽度为 100%，高度 150px
• 高度无法实现由内容撑开

swiper 组件要结合 swiper-item 组件使用

• 默认宽度和高度都是 100%

navigator

导航组件，类似超链接标签

• 块级元素，默认会换行

pen-type 有效值：

rich-text

富文本标签，可以将字符串解析成对应标签，类似 vue中 v-html 功能

现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点

nodes 属性支持 字符串 和 标签节点数组

元素节点：type = node*

_
文本节点：type = text*

示例：

// index.wxml  
// 1.节点数组
<rich-text nodes="{{nodes}}"></rich-text>
// 2.字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p ng" alt="">'></rich-text>

// index.js
Page({
  data: {
    nodes: [{
      name: 'div',
      // 设置属性与样式
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;' 
      },
      // 设置子节点
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  }
})

• nodes 不推荐使⽤ String 类型，性能会有所下降
• rich-text 组件内屏蔽所有节点的事件
• attrs 属性不⽀持 id，⽀持 class
• name 属性⼤⼩写不敏感
• 如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除
• img 标签仅⽀持⽹络图⽚
• 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效

button

就是一个按钮，不过这个按钮包含了很多功能

size 合法值：

type 合法值：

form-type 合法值：

open-type 的合法值

open-type 的 contact 的实现流程

1. 将⼩程序的 appid 由测试号改为 ⾃⼰的 appid
2. 登录微信⼩程序官⽹，功能 - 客服，添加客服账号
3. 当用户点击按钮时，就会弹出客服账号的对话框

icon

在小程序中已经封装了一些字体图标

radio

单选框，当要触发事件时需要结合 radio-group 组件使用

通过源数据 e 可以拿到选中的 value

checkbox

复选框，当要触发事件时需要结合 checkbox-group 组件使用

通过源数据 e 可以拿到选中的 value

自定义组件

⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯

创建组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

可以在微信开发者⼯具中快速创建组件的⽂件结构

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明

{
  "component": true
}

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式

slot 表⽰插槽，类似 vue 中的 slot

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
  <slot></slot>
</view>

在组件的 wxss ⽂件中编写样式，注意，在 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法

Component({
  properties: {
  // 这里定义了 innerText 属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string 类型
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

引入组件

⾸先在需要使用自定义组件的⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

{
    // 引用声明
  "usingComponents": {
    // 要使用的组件的名称:组件的路径(使用相对路径)
    "my-header":"/components/myHeader/myHeader"
  }
}

使用组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
  </my-header>
</view>

其它属性

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等

组件通信

父传子

父组件通过自定义属性的方式给子组件传递数据

<tabs tabItem="{{tabs}}" >

子组件通过 properties 接收数据

Component({
  properties: {
        tabItem: {
      // 接收数据的类型
         type: Array,
      // 默认值
      value: []
    }
  },
})

子传父

子组件通过 this.triggerEvent 发送事件

// this.triggerEvent('事件名', 传递的数据);
this.triggerEvent('itemChange',{index});

父组件通过自定义事件接收数据

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >

Page({
  // 自定义事件 用来接收子组件传递的数据的
  handleItemChange(e) {
    // 接收传递过来的参数
    const { index } = e.detail;
  }
})