微信小程序开发-04-进阶

一、自定义组件

创建组件

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

引用组件

局部引用

组件只能在当前被引用的页面内使用。
在页面的json配置文件中引用组件的方式，叫做“局部引用”。示例代码如下:

全局引用

组件可以在每个小程序页面中使用
在app.json全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下:

组件和页面的区别

从表面来看,组件和页面都是由.js、 json、 .wxml和.wxss这四个文件组成的。但是,组件和页面的js与
json文件有明显的不同:
	● 组件的 json文件中需要声明"component": true属性
	● 组件的 .js文件中调用的是Component()函数
	● 组件的事件处理函数需要定义到methods节点中,页面只需要与data平级即可

样式

数据,方法和属性

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中；事件处理函数和自定义方法需要定义到methods节点中；
properties属性：
在小程序组件中，properties 是组件的对外属性,用来接收外界传递到组件中的数据

数据监听器

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

数据监听器监听对象中单个或者多个属性的变化：

纯数据字段

概念:纯数据字段指的是那些不用于界面渲染的data字段。
应用场景:例如有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件,仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。
好处:纯数据字段有助于提升页面更新的性能。
使用规则：在Component构造器的options节点中，指定pureDataPattern为-一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:

生命周期函数

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

定义生命周期函数：在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中， 可以在lifetimes字段内进行声明(这是推荐的方式，其优先级最高)。示例代码如下:

组件所在页的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
在自定义组件中，组件所在页面的生命周期函数有如下3个,分别是：

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中，示例代码如下:

插槽

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

在小程序中，默认每个自定义组件中只允许使用一-个进行占位，这种个数.上的限制叫做单个插槽。

在小程序的自定义组件中，需要使用多 插槽时，可以在组件的.js 文件中，通过如下方式进行启用。示例代码如下:

可以在组件的.wxml中使用多个标签,以不同的name来区分不同的插槽。示例代码如下:

父子组件之间通信

三种方式

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

属性绑定

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

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

事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下:
①在父组件的js中，定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
②在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
③在子组件的js中，通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件
④在父组件的js中，通过e.detail获取到子组件传递过来的数据

获取组件实例

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

behaviors

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

每个behavior可以包含- -组属性、 数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior, behavior 也可以引用其它behavior。
调用Behavior(Object object)方法即可创建一个共享的behavior实例对象,供所有的组件使用:

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

behavior中所有可用的节点

同名字段的覆盖和组合规则:
	组件和它引用的behavior中可以包含同名的字段,此时可以参考如下3种同名时的处理规则:
		① 同名的数据字段(data)
		② 同名的属性(properties)或方法(methods)
		③ 同名的生命周期函数

二、使用npm包

小程序对npm的支持与限制

目前，小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。但是，在小程序中使用
npm包有如下3个限制:
	① 不支持依赖于Node.js内置库的包
	② 不支持依赖于浏览器内置对象的包
	③ 不支持依赖于C++插件的包

Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议,对商业使用比较友好。

安装Vant组件库

在小程序项目中，安装Vant组件库主要分为如下3步:
	① 通过npm安装( 建议指定版本为@1.3.3)
	② 构建npm包
	③ 修改app.json

使用vant组件

安装完Vant组件库之后，可以在app.json的usingComponents节点中引入需要的组件,即可在wxml中直接使用组件。示例代码如下:

API Promise化

默认情况下，小程序官方提供的异步API都是基于回调函数实现的，例如，网络请求的API需要按照如下的方式调用:

缺点：回调地狱问题

回调地狱：指在异步编程中，当存在多个回调函数需要被嵌套调用时，代码会变得复杂、难以阅读和维护的情况。这种情况通常发生在回调函数依赖于前一个回调函数的结果，导致需要进行多层嵌套的情况。

一种常见的场景是在JavaScript中使用回调函数处理异步任务。在回调地狱中，多个回调函数会被嵌套在一起，每个回调函数都会在前一个回调函数执行完毕后触发执行。这样的嵌套会导致代码缩进增加，逻辑变得复杂，可读性差，并且很容易出现错误。

为了避免回调地狱，可以采用一些异步编程的解决方案，例如使用Promise、async/await等。这些方案可以使异步代码看起来更加线性，减少了嵌套的层数，提高了代码的可读性和可维护性。

API Promise化，指的是通过额外的配置,将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步API,从而提高代码的可读性、维护性,避免回调地狱的问题。

在小程序中，实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包。

三、全局数据共享

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有: Vuex、Redux、 MobX等。

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。
	● mobx-miniprogram 用来创建Store实例对象
	● mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用

四、分包

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
好处：

可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作

分包前,小程序项目中所有的页面和资源都被打包到了- -起，导致整个项目体积过大,影响小程序首次启动的下载时间。

分包后，小程序项目由1个主包+多个分包组成:
● 主包: 一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一 些公共资源
● 分包:只包含和当前分包有关的页面和私有资源

加载规则

①在小程序启动时,默认会下载主包并启动主包内页面
	●t abBar页面需要放到主包中
②当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
	● 非 tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

配置方法

打包原则

①小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
②主包也可以有自己的pages (即最外层的pages字段)
③tabBar页面必须在主包内
④分包之间不能互相嵌套

引用原则

①主包无法引用分包内的私有资源
②分包之间不能相互引用私有资源
③分包可以引用主包内的公共资源

独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

应用场景
开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下:
	● 当小程序从普通的分包页面启动时，需要首先下载主包
	● 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
一个小程序可以有多个独立分包
PS：特别注意:独立分包中不能引用主包内的公共资源

分包预下载

分包预下载指的是:在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则，示例代码如下: