在项目的根目录中，鼠标右键，创建components->test 文件夹
在新建的 components ->test 文件夹上，鼠标右键，点击“新建 Component” 
键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为 .js，.json，.wxml和.wxss

组件的引用方式分为“局部引用”和“全局引用”，顾名思义:
局部引用:组件只能在当前被引用的页面内使用
全局引用:组件可以在每个小程序页面中使用

// 在页面的.json 文件中，引入组件
{
    "usingComponents": {
        "my-test": "/components/test/test"
    }
}

// 在页面的 .wxml 文件中，使用组件
<my-test></my-test>

// 在 app.json 文件夹中，引入组件
{
    "pages": [ /* 省略不必要的代码 */ ],
    "window": [ /* 省略不必要的代码 */ ],
    "usingComponents": {
        "my-test2": "/components/test2/test2"
    } 
}

// 在页面的 .wxml 文件中，使用组件
<my-test2></mytest2>

根据组件的使用频率和范围，来选择合适的引用方式:
    如果某组件在多个页面中经常被用到，建议进行“全局引用”
    如果某组件只在特定的页面中被用到，建议进行“局部引用”

// 在组件的.js 文件中新增如下配置
Component({
    options: {
        stylelsolation: 'isolated'
    }
})

// 或在组件的 .json 文件中新增如下配置
{
    "stylelsolation": "isolated"
}

Component({
    /**
     * 组件的初始数据
     */

    data: {
        count: 0
    }
})

Component({
    methods: {  // 组件的方法列表【包含事件处理函数和自定义方法】
        addCount(){ // 事件处理函数
            this.setData({ count: this.data.count + 1})
            this._showCount() // 通过 this 直接调用自定义方法
        }，
        _showCount(){   // 自定义的方法建议以 _ 开头
            wx.showToast({
                title: 'count值为: ' + this.data.count,
                icon: 'none'
            })
        }
    }
})

Component({
    // 属性方法
    properties: {
        max: {              // 完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
            type: Number,   // 属性值的数据类型
            value: 10       // 属性默认值
        },
        max: Number         //简化定义属性的方式【不需要指定属性默认值时，可以使用简化方式】
    }
    
})

<my-test1 max="10"></my-test>

// 在组件的 .wxml 文件中使用 properties 属性的值
<view>max属性的值: {{max}}</view>

Component({
    properties: { max: Number }, //定义属性
    methods: {
        addCount(){
            this.setData({
                max: this,properties.max + 1
            })  //使用 setData 修改属性的值
        }
    }
})

Component({
    observers: {
        '字段A，字段B': function(字段A的新值，字段B的新值){
            // do something
        }
    }
})

Component({
    data: { n1: 0, n2: 0, sum: 0},  // 数据节点
    methods: {  //方法列表
        addN1(){ this.setData({ n1: this.data.n1 + 1 })},
        addN2(){ this.setData({ n2: this.data.n2 + 1 })}
    },
    observers: {    //数据监听节点
        'n1, n2': function(n1, n2){ //  监听 n1 和 n2 数据的变化
            this.setData({ sum: n1 + n2})   //  通过监听器，自动计算 sum 的值
        }
    }
})

Component({
    observers:{
        "对象.属性A，对象.属性B': function(属性A的新值，属性B的新值){
            // 触发此监听器的 3 种情况:
            //【为属性A赋值】使用 setData 设置 this.data.对象.属性A 时触发
            //【为属性B赋值】使用 setData 设置 this.data.对象.属性B 时触发
            //【直接为对象赋值】使用 setData 设置 this.data.对象 时触发
            // do something...
        }
    }
})

组件实例刚被创建好的时候，created 生命周期函数会被触发
    此时还不能调用 setData
    通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
    此时，this.data 已被初始化完毕
    这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
在组件离开页面节点树后，detached生命周期函数会被触发
    退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
    此时适合做一些清理性质的工作

Component({
    //  推荐用法
    lifetime: {
        attached(){ },  // 在组件实例进入页面节点树时执行
        detached(){ },  // 在组件实例被从页面节点树移除时执行
    },
    //  以下是旧式的定义方式
    attach(){ },    // 在组件实例进入页面节点树时执行
    detach(){ },    // 在组件实例被从页面节点树移除时执行
})

Component({
    pageLifetimes: {
        show: function(){ },    // 页面被展示
        hide: function(){ },    // 页面被隐藏
        resize: function(size){ }   //页面尺寸变化
    }
})

Component({
    methods: {
        // 生成随机 RGB 颜色的办法。非事件处理函数建议以 _ 开头
        _randomColor(){
            this.setData({  // 为 data 里面的 _rgb 纯数据字段重新赋值
                _rgb: {
                    r: Math.floor(Math.random() * 256),
                    g: Math.floor(Math.random() * 256),
                    b: Math.floor(Math.random() * 256)
                }
            })
        }
    }
})

Component({
    pageLifetimes: {
        //  组件所在的页面被展示时，立即调用 _randomColor 生成随机颜色值
        show: function(){
            this._randomColor()
        }
    }
})