1. 小程序自定义组件新建文件时选择： 新建 Compnent
2. 一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{ "component": true, "usingComponents": {} }
注意：
在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
3. 组件模板：
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
4. 组件可以指定它所在节点的默认样式，使用 :host 选择器
注意：
默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：
app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
指定特殊的样式隔离选项 styleIsolation 。
5. 外部样式类：在 Component 中用 externalClasses 定义段定义若干个外部样式类
/* 组件 custom-component.js */ Component({ externalClasses: [‘my-class‘] }) <!-- 组件 custom-component.wxml --> <view class="my-class">这段文本的颜色由组件外的 class 决定</view> <!-- 页面的 WXML --> <my-component my-class="red-text" /> <!-- 页面的 WXSS --> .red-text { color: red; }
6. 组件的生命周期
生命周期方法可以直接定义在 Component 构造器的第一级参数中。
自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
Component({ lifetimes: { created: function() { //在组建实例刚刚被创建时执行 }, attached: function() { // 在组件实例进入页面节点树时执行 }, ready: function() { //在组件实例在视图层布局完成后执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, }, // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容 attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, // ... })
还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
Component({ pageLifetimes: { show: function() { // 页面被展示 }, hide: function() { // 页面被隐藏 }, resize: function(size) { // 页面尺寸变化 } } })