微信小程序开发整理-mp4

一、自定义组件

（一）创建组件

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

（二）引用组件

组件的引用方式分为“局部引用”（组件只能在当前被引用的页面内使用）和“全局引用”（组件可以在每个小程序页面中使用）。

局部引用：在页面的.json文件中，引入组件

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

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

全局引用:在app.json中，引入组件

//在app.json文件中，引入组件
{
    "pages":[   ],
    "windows":{   },
    "usingComponents": {
        "my-test": "/components/test/test"
    }
}

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

（三）自定义组件样式

1、样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构。

2、组件样式隔离的注意点

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
• 在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器

3、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项，用法如下:

//在组件的.js文件中新增如下配置
Component({
    options: {
        stylelsolation: 'isolated'  //一共三个属性：isolated、apply-shared、shared
    },
})

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

（四）自定义组件的data和methods

1、data数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中，示例如下:

Component({
    //组件初始数据
    data: {
        count: 0
    }
})

2、methods方法

小程序组件中，事件处理函数和自定义方法需要定义到methods节点中，示例代码如下:

Component({
    methods: {  //组件的方法列表【包含事件处理函数和自定义方法】
    addCount() { //事件处理函数

        //自定义组件的properties
        if (this.data.count >= this.properties.max) return 

        this.setData({ count: this.data.count + 1 })
        this._showCount() //通过this直接调用自定义方法
    }，
    _showCount() { //自定义方法建议以_开头
        wx.showToast({
            title: 'count值为: ' + this.data.count,
            icon: 'none'
        })
      }
    }
})

（五）自定义组件的properties

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下:

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


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

data 和properties的区别:在小程序的组件中，properties属性和data 数据的用法相同，它们都是可读可写的，只不过

• data更倾向于存储组件的私有数据
• properties更倾向于存储外界传递到组件中的数据

（六）自定义组件的数据监听器

1、定义

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于vue 中的watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下:

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

2、 案例

<view>{{n1}}+ {{n2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini" bindtap="addN2">n2自增</button>

Component({
    data: { n1: 0,n2: o,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的值
        }
    }
})

3、 监听属性变化

Component({
    observers: {     
        '对象.属性A，对象.属性B' : function(属性A的新值,属性B的新值){
    //触发此监听器的3种情况:
        //为属性A赋值:使用setData设置 this.data.对象.属性A时触发
        //为属性B赋值:使用setData设置 this.data.对象.属性B时触发
        //直接为对象赋值:使用setData设置this.data.对象时触发
        }
//RGB案例监听
// 'rgb.r，rgb.g，rgb.b': function (r，g，b) {
    //this.setData({
    //fullColor: `${r},${g},${b}`
    //})
 //},

 'rgb.**':function(obj){
        this.setData({
            fullColor:`${obj.r},${obj.g},${obj.b}`
        })
     }
   
  }
})

（七）自定义组件的纯数据字段

1、定义

纯数据字段指的是那些不用于界面渲染的data字段。

2、应用场景

某些data中的字段既不会展示在界面上，也不会传递给基他组件，仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。

3、好处

纯数据字段有助于提升页面更新的性能。

4、使用规则

在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:

Component({
    options: {
    //指定所有_开头的数据字段为纯数据字段
    pureDataPattern:/^_/
    },
    data: {
    a: true,   //普通数据字段
    _b: true，  //纯数据字段
  }
})

（八）自定义组件的生命周期函数

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	object Error	每当组件方法抛出错误时执行

 lifetimes节点声明并使用。

（九）组件所在页面的生命周期函数

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	object Size	组件所在的页面尺寸变化时执行

pageLifetimes节点声明并使用。

（十）自定义组件的插槽

1、定义

在自定义组件的wxml结构中，可以提供一个<slot>节点（插槽)，用于承载组件使用者提供的 wxml结构。

2、js启用多插槽

options: {
    multipleSlots: true 
},

以不同的name来区分不同的插槽。

二、组件通信

（一）共享数据

1、使用属性绑定实现父向子共享数据

父子组件之间通信的3种方式：

• 属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
• 事件绑定：用于子组件向父组件传递数据，可以传递任意数据
• 获取组件实例：父组件还可以通过 this.selectComponent()获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。

（1）属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下:

//父组件的 data节点
data: {
    count: 0
}

//父组件的 wxml结构
<my-test3 count="{{count}}"></my-test3>
<view>------</view>
<view>父组件中，count值为:{{count}}</view>

子组件在properties节点中声明对应的属性并使用。示例代码如下:

//子组件的properties节点
properties :{
    count: Number
}


//子组件的 wxml结构
<text>子组件中，count值为:{{icount}}</text>

2、使用自定义事件实现子向父共享数据

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下:

• 在父组件的js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。
• 在父组件的wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件。
• 在子组件的js 中，通过调用this.triggerEvent('自定义事件名称'，{/*参数对象*/})，将数据发送到父组件。
• 在父组件的js 中，通过e.detail获取到子组件传递过来的数据。

//在父组件中定义syncCount方法
//将来，这个方法会被传递给子组件，供子组件进行调用
syncCounto() {
    console.log( " syncCount")
},

<!--使用bind:自定义事件名称（推荐。结构清晰)-->
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>

<!--或在bind后面直接写上自定义事件名称-->
<my-test3 count="{{count}}" bindsync="syncCount">/my-test3>

//子组件的 wxml结构
<text>子组件中，count值为:{{count}}</text>
<button type=""primary" bindtap="addCount">+1</button>


//子组件的js代码
methods: {
    addCount() {
        this.sgtData({
            count: this.properties.count + 1
        })
        this.triggerEvent( 'sync', {value: this.properties.count})
    }
}

syncCount(e) {
// console.log(e.detail.value)
    this.setData({
        count: e.detail.value
    })
},

（二）使用selectComponent获取组件实例

可在父组件里调用this.selectComponent("id或class选择器")，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(".my-component")。

//wxml 结构
<my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3>
<button bindtap="getChild">获取子组件实例</button>

getChild() {    //按钮的tap事件处理函数
//切记下面参数不能传递标签选择器'my-test3 '，不然返回的是null
const child = this.selectComponent( '.customA')   //也可以传递id 选择器#CA
child.setData({count:child.properties.count + 1 })   //调用子组件的 setData方法child.addCount()   //调用子组件的 addCount方法

（三）自定义组件的behaviors

1、定义

behaviors（用来实现代码共享） 是小程序中，用于实现组件间代码共享的特性，类似于Vue.js 中的“mixins”。

2、工作方式

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。（每个组件可以引用多个behavior,behavior也可以引用其它behavior）

3、创建

调用Behavior(Object object)方法即可创建一个共享的 behavior实例对象，供所有的组件使用:

//调用 Behavior(）方法，创建实例对象
//并使用module.exports 将 behavior实例对象共享出去

module.exports = Behavior({
    //属性节点
    properties:{},
    //私有数据节点
    data: { username: 'zhang' }，
    //事件处理函数和自定义方法节点
    methods: {},
    //其它节点...
})

4、导入与使用

在组件中，使用require()方法导入需要的 behavior，挂载后即可访问behavior中的数据或方法，示例代码如下:

//使用require(导入篙要的自定义 bchavior模块
const myBchavior = require("../../bchaviors/my-bchavior")


Component({
    //将导入的 behavior实例对象，挂载到 bchaviors数组节点中，即可生效
    behaviors: [myBchavior],
    //组件的其它节点...
})

5、behavior中所有可用的节点

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

6、同名字段的覆盖和组合规则（ behavior​​​s官方文档）

组件和它引用的behavior中可以包含同名的字段，此时可以参考如下3种同名时的处理规则：

• 同名的数据字段(data)
• 同名的属性(properties)或方法(methods)
• 同名的生命周期函数