【微信小程序】-- npm包总结 --- 基础篇完结（四十七）

• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

---

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第47篇文章;
  今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  🎉🎉🎉不知不觉已经学习小程序 28 天了，每天下完班之后都要接着看视频学习并写博客记录，说实话感觉还挺充实的，可能游戏玩多了想学习绷紧一下大脑。正所谓不进则退嘛，这句话真的触动我个人内心，加上学习新的技术这个过程也挺快乐的，加油吧，准备进击进阶篇–项目。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

---

一、安装和配置 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包的总结，也是基础篇总结，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

• 😀 【LeetCode题解（持续更新中）】
• 🚝 【Java Web项目构建过程】
• 💛 【微信小程序开发教程】
• ⚽ 【JavaScript随手笔记】
• 🤩 【大数据学习笔记（华为云）】
• 🦄 【程序错误解决方法（建议收藏）】
• 🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！