06 小程序

1 使用npm包

 2 vant weapp

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

官方文档地址 https://youzan.github.io/vant-weapp

扫描下方的小程序二维码，体验组件库示例：

2.1安装 Vant 组件库

在小程序项目中，安装 Vant 组件库主要分为如下 3 步：

① 通过 npm 安装（建议指定版本为 @1.3.3 ）

② 构建 npm 包

③ 修改 app.json

详细的操作步骤，大家可以参考 Vant 官方提供的快速上手教程：

https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

 1 通过 npm 安装（建议指定版本为@1.3.3）

2 构建 npm 包

不勾选，不能使用npm包

3 修改 app.json

2.2使用 Vant 组件

 

2.3定制全局主题样式

Vant Weapp 使用 CSS 变量 来实现定制主题。 关于 CSS 变量的基本用法，请参考 MDN 文档：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

 使用：

变量有作用域， 为了都能使用， 使用根节点 html 

 2.4定制全局主题样式

所有可用的 颜色变量 ，请参考 Vant 官方提供的配置文件：

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

 1为什么有page: 

变量有作用域， 为了都能使用， 使用根节点 page

2 怎么知道变量名是这个？

 2.5API Promise化

1 安装

1安装包以后，会放在node_moudles里边，但是小程序不能直接读取node_moudles包，需要我们进行构建.

2通过构建的方式，吧里边的包迁移到miniprogram_npm包里边，就可以使用这个目录下的包了

3为了防止有问题，每次先删除miniprogram_npm 目录，然后再进行构建

 2 使用：

3 全局数据共享

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

3.2MobX

3.2.1. 安装 MobX 相关的包

 3.2.2创建 MobX 的 Store 实例

 

3.2.3将 Store 中的成员绑定到页面中

3.2.4在页面上使用 Store 中的成员

3.2.5 将 Store 中的成员绑定到组件中

 3.2.6 在组件中使用 Store 中的成员

4分包

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

4.2. 分包的好处

对小程序进行分包的好处主要有以下两点：

⚫ 可以 优化小程序首次启动的下载时间

⚫ 在 多团队共同开发 时可以更好的 解耦协作4.2

 分包前项目的构成：

 分包后项目的构成 ：

4.3分包的加载规则

4.4 分包的体积限制

目前，小程序分包的大小有以下两个限制：

⚫ 整个小程序所有分包大小不超过 16M （主包 + 所有分包）

⚫ 单个分包/主包大小不能超过 2M

4.5 使用分包

4.5.1 配置方法 

查看分包的体积 ：

4.5.2 打包原则

① 小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中

② 主包也可以有自己的 pages（即最外层的 pages 字段）

③ tabBar 页面必须在主包内

④ 分包之间不能互相嵌套

4.5.3引用原则

4.6 独立分包

需要分包打开程序， 则需要独立分包来启动程序

4.6.2. 独立分包和普通分包的区别

4.6.3独立分包的应用场景

4.6.4独立分包的配置方法

4.6.5 引用原则

4.7 分包预下载

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

4.7.1 配置分包的预下载

 

 

 4.7.2分包预下载的限制

5 案例 

 5.2 实现步骤

自定义 tabBar 分为 3 大步骤，分别是：

① 配置信息

② 添加 tabBar 代码文件

③ 编写 tabBar 代码

详细步骤，可以参考小程序官方给出的文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

 1 配置信息

 

2 添加 tabBar 代码文件

 添加文件夹custom-tab-bar

 添加index文件

 3 编写 tabBar 代码