一、目标

image.png

二、目录

image.png

三、自定义组件

（一）组件的创建和引用
1、创建组件

image.png

2、引用组件

image.png

（1）局部引用组件

image.png

（2）全局引用组件

image.png

（3）全局引用 VS 局部引用

image.png

（4）组件和页面的区别

image.png

（二）样式
1、组件样式隔离

image.png

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

image.png

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

image.png

（1）styleIsolation的可选值

image.png

（三）数据、方法和属性
1、data数据

image.png

2、methods方法

image.png

3、properties属性

image.png

4、data 和 properties 的区别

image.png

5、使用setData 修改 properties 的值

image.png

（四）数据监听器
1、什么是数据监听器

image.png

2、数据监听器的基本用法

image.png

image.png

3、监听对象属性的变化

image.png

4、数据监听器 - 案例
（1）案例效果

image.png

（2）渲染UI结构

image.png

（3）定义button的事件处理函数

image.png

（4）监听对象中指定属性的变化

image.png

（5）监听对象中所有属性的变化

image.png

（五）纯数据字段
1、什么是纯数据字段

image.png

2、使用规则

image.png

3、使用纯数据字段改造数据监听器案例

image.png

（六）组件的生命周期
1、组件全部的生命周期函数

image.png

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

image.png

3、lifetimes节点

image.png

4、组件所在页面的生命周期
（1）什么是组件所在页面的生命周期

image.png

（2）pageLifetimes节点

image.png

（3）生成随机的RGB颜色值

image.png

image.png

（七）插槽
1、什么是插槽

image.png

2、单个插槽

image.png

3、启用多个插槽

image.png

4、定义多个插槽

定义多个插槽

使用多个插槽

（八）父子组件之间的通信
1、父子组件之间的通信的3种方式

image.png

1、属性绑定，用于父组件给子组件传值
2、事件绑定，用于子组件给父组件传值
3、获取组件实例，是父组件调用子组件中的属性和方法

2、属性绑定

image.png

image.png

3、事件绑定

image.png

步骤1

步骤2

步骤3

步骤4

4、获取组件实例

image.png

（九）behaviors
1、什么是behaviors？

image.png

2、behaviors的工作方式

image.png

3、创建behaviors

image.png

4、导入并使用behovers

image.png

5、behovers中所有可用的节点

image.png

6、同名字段的覆盖和组合规则

image.png

（十）组件总结

image.png

四、使用npm包

（一）小程序对npm的支持与限制

image.png

（二）Vant Weapp
1、什么是Vant Weapp

image.png

官方网址： https://youzan.github.io/vant-weapp/#/home

2、安装Vant组件库

image.png

官方手册：https://youzan.github.io/vant-weapp/#/quickstart

3、使用Vant组件

image.png

4、定制全局主题样式（原理分析）

image.png

使用css自定义属性（变量）
（1）原理是：定义和使用css的变量
定义：--名称： value
使用：var（--名称）

image.png

5、定制全局主题样式

image.png

less定义变量方式 @ 使用 @
css定义变量方式 -- 使用 var（--）

（三）API Promise化
1、基于回调函数的异步API的缺点

image.png

2、什么是 API Promise 化

image.png

3、实现 API Promise 化

image.png

4、调用 Promise 化之后的异步 API

image.png

分析：
1、异步回调，修改为 promise化
2、使用async await 获取后台返回的数据对象
3、再使用数据解构，重命名的方式 把res定义为返回数据里面的data数据

五、全局数据共享

（一）全局数据共享
1、什么是全局数据共享

image.png

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

image.png

（二）MobX
1、安装MobX相关的包

image.png

2、创建 MobX 的 Store 实例

image.png

3、将Store 中的成员绑定到页面中

image.png

4、在页面中使用Store中的成员

image.png

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

image.png

6、在组件中使用Store中的成员

image.png

六、分包

（一）基础概念
1、什么是分包

image.png

2、分包的好处

image.png

3、分包前项目的构成

image.png

4、分包后项目的构成

image.png

5、分包的加载规则

image.png

6、分包的体积限制

image.png

（二）使用分包
1、配置方法

image.png

image.png

2、打包原则

image.png

3、引用原则

image.png

（三）独立分包
1、什么是独立分包

image.png

2、独立分包和普通分包的区别

image.png

3、独立分包的应用场景

image.png

4、独立分包的配置方法

image.png

5、引用原则

image.png

（四）分包预下载
1、什么是分包预下载

image.png

2、配置分包的预下载

image.png

3、分包预下载的限制

image.png

七、案例 - 自定义tabBar

（一）案例效果

image.png

（二）实现步骤

image.png

官方文档地址：
自定义 tabBar | 微信开放文档 (qq.com)

参考官方文档：
使用有赞的tabbar参考地址：
Tabbar 标签栏 - Vant Weapp (youzan.github.io)

image.png

image.png

image.png

徽标数据插值语法判断

info={{item.info ? item.info : ''}}

把页面的数据渲染到tabbar的徽标上，使用store

参考文档地址： GitHub - wechat-miniprogram/mobx-miniprogram-bindings: 小程序的 MobX 绑定辅助库

image.png

image.png

路径跳转

image.png

八、总结

image.png