微信小程序开发系列教程（三）：组件，自定义组件

一、微信内部组件

把文档过一下即可，略过

https://developers.weixin.qq.com/miniprogram/dev/component/

二、自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

1）在根目录下新建组件文件夹及文件components/Header/

点新建页面——Header——回车——即自动建立4个相关页面
一个自定义组件由 json wxml wxss js 4个文件组成。

components
└─Header
        Header.js
        Header.json
        Header.wxml
        Header.wxss

2）首先需要在 json 文件中Header.json

进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

3）编写组件模板，并加入样式Header.wxml, Header.wxss

还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式
【注意】：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
Header.wxml：

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

Header.wxss：

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

4）Header.js中注册组件

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。更多细节参见 Component构造器 。
Header.js:

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

5）引入组件，在pages/about/about.json中引入组件

component-tag-name：为标签名，可自定义，和6步使用时名称一致即可

{
  "usingComponents": {
    "component-tag-name": "../../components/Header/Header"
  },
  "navigationBarTitleText": "About"
}

6）使用组件，pages/about/about.wxml中

自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

效果：

7）注意事项

1）一些需要注意的细节：

1. 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
2. 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
3. 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

2）注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

1. 使用 usingComponents 页面的原型与不使用时不一致，即Object.getPrototypeOf(this) 结果不同。
2. 使用 usingComponents 时会多一些方法，如 selectComponent 。
3. 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）
4. 如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。