微信小程序学习

微信小程序

一、自定义组件-组件的创建与引用

1.组件和页面的区别
2.创建组件

3.引用组件

（1）局部引用组件

（2）全局引用组件

二、自定义组件-样式

1.组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组建之外的。
好处：1.防止外界的样式影响组建内部的样式。2.防止组件的样式破坏外界的样式。

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

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

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

在外界能够控制组件内部的样式，可以通过styleIsolation修改组件的样式隔离选项。

styleIsolation的可选值：

3.样式隔离

（1）在页面中使用Vant Weapp组件时，可直接在页面的样式文件中覆盖样式。

（2）在自定义组件中使用Vant Wepp组件时，需开启styleIsolation：‘shared’选项。

三、自定义组件-数据、方法和属性

1.事件处理函数和自定义方法需要定义到methods方法中
ps:自定义方法建议以 _ 开头

2.properties属性
在小程序组件中，properties是组件的对外属性，用来接受外界传递到组件中的数据。
ps:简化方式无法指定默认值。

3.data和properties的区别：
4.使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别，因此properties属性的值也可以用于页面渲染，或使用setData为properties中的属性重新赋值

三、自定义组件-数据监听器

1.监听对象中指定属性的变化：observers:{}

2.监听对象中所有属性的变化

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符**来监听对象中所有属性的变化

四、自定义组件-组件的生命周期

1.组件全部的生命周期函数

2.组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、detached。它们各自的特点：

3.lifetimes节点

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

五、自定义组件-组件所在页面的生命周期

1.什么是组件所在页面的生命周期？

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
例如：每当出发页面的show生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值。
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是：

2.pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中。

六、自定义组件-插槽

1.什么是插槽

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

2.单个插槽

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

3.多个插槽
（1）启用多个插槽
在小程序的自定义组件中，需要使用多插槽时，可以在组件的.js文件中，通过如下方式进行启用。

（2）定义多个插槽
可以在组件的 .wxml中使用多个标签，以不同的name来区分不同的插槽。
（3）使用多个插槽
在使用带有多个插槽的自定义组件时，需要用slot属性来将节点插入不同的中。

七、自定义组件-父子组件之间的通信

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

2.属性绑定

子组件在properties节点中声明对应的属性并使用。
(1)

(2)

3.事件绑定



4.获取组件实例

八、自定义组件-behaviors

1.什么是behaviord

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

2.behaviors的工作方式

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

3.创建behavior

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

4.导入并使用behavior

在组件中，使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据或方法。

九、使用npm包

1.小程序对npm的支持与限制：npm包很多，但供小程序使用却很少。

2.安装Vant组件库

3.使用Vant组件库

安装完Vant组件库之后，可以在app.json的usingComponents节点引入需要的组件。

十、使用css变量定制Vant主题样式

1.提高css的可维护性！

2.定制全局主题样式
在app.wxss中，写入CSS变量，即可对全局生效

·怎么知道变量名字？
1.Vant Weapp官方文档–定制主题–样式变量中的配置文件。

十一、使用npm包-API Promise化

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

缺点：容易造成回调地狱的问题，代码的可读性、维护性差！

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

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

npm install --save miniprogram-api-promise@1.0.4

注意：
在小程序中，安装完包之后，不能马上去使用这个包。因为小程序比较特殊，所以买安装一个新包，都要对这个包进行构建。
（默认情况下，会把包装在node_modules目录中，小程序无法直接读取node_modules里面的包。所以要构建！通过构建，将里面这些包迁移到miniprogram_npm目录下中）
在构建的时候，为了防止出现一系列的问题，每次重新构建都要先删除miniprogram_npm目录。

promisifyAll(wx,wxp) —> 最终会把wx身上所有基于回调函数的异步API进行promise化，当promise完以后会把它们挂载到wxp这个空对象上,今后在微信小程序的每个页面中就可以基于wx这个顶级对象的自定义属性,即通过wx.p去调用那些promise化之后的API。

4.调用promise化之后的异步API

ps：👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻

十二、全局数据共享-MobX

1.什么是全局数据共享

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

2.小程序中的全局数据共享方案

3.安装MobX相关的包

npm install – save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意：Mobx相关的包安装完毕之后，记得删除miniprogram_npm目录后，重新构建npm。

4.创建MobX的Store实例

先导入这个‘mobx-miniprogram’包的成员observable，然后调用observable()方法得到store实例对象，并且把它给按需导出出去，外界在需要的时候就导入这个store实例，然后去使用里面的数据或方法。
![在这里插入图片描述](https://img-blog.csdnimg.cn/c4a6518dec104e56bad14e53b011f9b8.png

5.将Store中的成员绑定到页面中

分三步：👇🏻

creareStoreBindings()第一个参数this代表当前页面的实例，第二个参数是page对象；page对象包含三个属性：store代表数据源，fields代表将需要的字段或计算属性绑定到页面上，actions存的是页面需要的方法。
creareStoreBindings()最终会有一个返回值，然后把这个返回值挂载到this页面身上，作为一个自定义属性存在，叫做storeBindings。
在onLoad里面为this挂载了自定义属性storeBindings，所以在onUnload里面，就可以同this来访问自定义属性storeBindings提供的方法destroyStoreBindings()做清理性工作。

6.在页面上使用Store中的成员

注意：data-*={{X}} 可以在事件处理函数e拿到值

5.将Store中的成员绑定到组件中

(1).导入两个成员
(2).将storeBindingsBehavior在behaviors做一个使用
(3).提供一个storeBindings配置对象，里面提供数据源，通过fields来映射字段或计算属性，通过actions来映射方法。

十三、分包

1.什么是分包

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

2.分包的好处

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

3.分包前的项目构成

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

4.分包后项目的构成

分包后，小程序项目由1个主包+多个分包构成：
主包：一般只包含项目的启动页面或TaBar页面、以及所有分包都需要用到的一些公共资源。
分包：只包含和当前分包有关的页面和私有资源(只允许当前包使用)

5.分包的加载规则

6.分包的体积限制

7.使用分包

（1）配置方法

（2）打包原则

（3）引用原则

8.独立分包

（1）什么是独立分包

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

（2）独立分包和普通分包

（3）独立分包的应用场景

注：一个小程序可以有多个独立分包。

（4）独立分包的配置方法

与“name”、“page” 平级 加 “independent”:true

(5)引用原则

9.分包预下载

（1）什么是分包预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

（2）配置分包的预下载

预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则。

（3）分包预下载的限制

同一个分包中的页面享有共同的预下载大小限额2M

十五、例子知识点

实现tabBar切换效果：
1.当选中项发生变化，就会触发change绑定的事件处理函数

2.在onChange事件处理函数里面，可以通过event.detail拿到当前选中项的索引

3.拿到索引之后，就可以获取当前选中的tabBar对应页面的路径。

4.将选中项的索引定义到store里进行公共的存储
（1）在store里定义activeTabBarIndex,默认值为0。
（2）定义一个action函数专门来修改选中项的索引。

updateActiveTabBarIndex:action(function(index){
	this.activeTabBarIndex = index
})

（3）回到js组件–>把store的activeTabBarIndex和updateActiveTabBarIndex映射过来。
注意：
activeTabBarIndex是映射到storestoreBindings节点里的fields里面；updateActiveTabBarIndex是映射到storestoreBindings节点里的actions里面；

（4）在页面使用active和updataActive