一、安装和配置 vant-weapp 组件库
接下来就来对这些所学内容的进行一个总结吧。正所谓温故而知新嘛，话不多说，让我们原文再续，书接上回吧。
能够知道如何安装和配置 vant-weapp 组件库，可以参考 Vant 的 官方文档，可分为 4 步：
- Step 1、 通过 npm 安装（建议指定版本为@1.3.3，以防出现不必要的问题）。
通过 npm 安装
npm i @vant/weapp -S --production
通过 yarn 安装
yarn add @vant/weapp --production
安装 0.x 版本
npm i vant-weapp -S --production
- Step 2、 修改 app.json。
将 app.json 中的
"style": "v2"去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
- Step 3、 修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
- Step 4、 构建 npm 包。
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
二、全局数据共享
安装包、创建 Store、参考官方文档进行使用，具体可分为这六步：
- Step 1、安装 MobX 相关的包
在项目中运行如下的命令，安装 MobX 相关的包：
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
- Step 2、创建 MobX 的 Store 实例
接下来就在这个 store.js 文件中创建 Store 的实时对象，定义 action 方法来修改 store 中的值，在实际开发过程中，是不允许外界直接修改 store 里的值，只能通过 store 定义的函数进行修改。
- Step 3、将 Store 中的成员绑定到页面中
- 在页面
js文件导入需要的成员。 - 在
onLoad开始生命周期进行绑定。 - 在
onUnload生命周期取消监听。
- Step 4、在页面上使用
Store中的成员 - Step 5、将
Store中的成员绑定到组件中
- 在页面
js文件导入需要的成员。 - 在
Component提供behaviors节点来存储前面导入的Behaviors数组。 - 在
behaviors节点平级的位置声明page对象接收store、fields和actions这三个属性。
- Step 6、在组件中使用 Store 中的成员
三、API Promise 化
API Promise 化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于 Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。
- 安装
npm install --save miniprogram-api-promise@1.0.4
这里指定的安装版本是1.0.4，建议安装环境都要一致，不然版本不同可能会出现一些错误。
- 使用
在小程序 app.js 中，只需调用一次 promisifyAll() 方法，promisifyAll(wx, wxp)将 wx 上所有基于回调函数的 API promisi 化并挂载到 wxp 上。
app.js
import {promisifyAll} from 'miniprogram-api-promise' const wxp = wx.p = {} promisifyAll(wx, wxp)
四、自定义 tabBar
整个案例用的有：Vant 组件库 + 自定义组件 + 全局数据共享。首先来实现 tabBar 标签栏，自定义 tabBar 可分为 3 大步骤，分别是：
- Step 1、配置信息
在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
- Step 2、添加 tabBar 代码文件
在代码根目录下添加入口文件，这里的文件夹名一定是 custom-tab-bar，然后在创建 index 组件（index命名也不能随便改，就用 index，否则无法识别）。
当 custom 参数为 true 时，小程序就会自动识别 custom-tab-bar 里面的文件，并将其渲染出来。
- Step 3、编写 tabBar 代码
用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。这里使用 Vant Weapp 底部导航栏，用于在不同页面之间进行切换。
总结
感谢观看，这里就是npm包的总结，也是基础篇总结，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
