微信小程序开发【从0到1~入门篇完结】

谢谢您能够坚持看到最后的一篇文章，读完这篇文章后，您已经学会了微信小程序开发的基础知识，下一步可以正式找个项目连连手了~

如果您没有看上一篇文章的话，建议您返回上一篇 文章阅读：
微信小程序开发【从0到1~入门篇4】

通过对本篇文章的学习，您将掌握以下内容

① 能够知道如何安装和配置 vant-weapp 组件库
⚫ 参考 Vant 的官方文档

② 能够知道如何使用 MobX 实现全局数据共享
⚫ 安装包、创建 Store、参考官方文档进行使用

③ 能够知道如何对小程序的 API 进行 Promise 化
⚫ 安装包、在 app.js 中进行配置

④ 能够知道如何实现自定义 tabBar 的效果
⚫ Vant 组件库 + 自定义组件 + 全局数据共享

1.使用 npm 包

NPM（Node Package Manager）是Node.js的包管理器，它允许开发者轻松地共享、分发和安装JavaScript代码库。NPM包是包含JavaScript代码、配置文件、文档和其他资源的文件夹，它们被组织成一个可复用的单元，可以被其他开发者或项目所使用。

概念：

1. 包：NPM包通常是一个包含JavaScript代码、文档和其他相关资源的文件夹。
2. 包管理器：NPM是Node.js的包管理器，它允许开发者搜索、安装、更新和卸载包。
3. 版本控制：NPM包通常遵循SemVer（Semantic Versioning）版本控制规范，这意味着包的版本号遵循一定的规则，比如1.0.0、1.0.1等。
4. 依赖管理：NPM允许项目定义依赖关系，即项目中使用的其他包。这有助于确保项目的兼容性和稳定性。

作用：
5. 代码复用：开发者可以复用其他开发者创建的包，避免重复编写相同或类似的代码。
6. 组件化开发：通过将项目拆分为多个包，可以实现组件化开发，使得项目更加模块化和可维护。
7. 版本控制：NPM使用SemVer进行版本控制，确保依赖关系在更新时不会导致兼容性问题。
8. 依赖管理：NPM可以帮助管理项目的依赖关系，确保所有依赖的包都正确安装和更新。

目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm 包有如下 3 个限制：

① 不支持依赖于Node.js 内置库的包
② 不支持依赖于浏览器内置对象的包
③ 不支持依赖于 C++ 插件的包

总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。

1.1Vant Weapp

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

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

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

① 通过 npm 安装（建议指定版本为@1.3.3）
② 构建 npm 包
③ 修改 app.json

详细的操作步骤，大家可以参考 Vant 官方提供的快速上手教程：
https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件。示例代码如下：


Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法，请参考 MDN 文档：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

在 app.wxss 中，写入 CSS 变量，即可对全局生效：

1.2API Promise化

微信小程序的API Promise化是指将微信小程序的API调用从传统的回调函数风格转换为Promise风格。Promise是一种异步编程的解决方案，它可以解决回调地狱（Callback Hell）的问题，使得代码更加简洁和易于阅读。

传统回调函数风格

在微信小程序的早期版本中，API调用通常使用回调函数风格，例如：

wx.getUserInfo({
  success: function(res) {
    console.log(res.userInfo);
  },
  fail: function(error) {
    console.log(error);
  }
});

在这种风格中，API调用函数接受一个对象作为参数，其中包含success、fail和complete三个回调函数。当API调用成功时，执行success回调；当API调用失败时，执行fail回调；当API调用完成（无论是成功还是失败）时，执行complete回调。

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

Promise化

微信小程序在更新版本后，对部分API进行了Promise化，使得API调用更加符合现代异步编程的最佳实践。例如，wx.getUserInfo API的Promise化版本如下：

wx.getUserInfo()
  .then(res => {
    console.log(res.userInfo);
  })
  .catch(error => {
    console.log(error);
  });

在这个Promise化版本中，API调用返回一个Promise对象。当API调用成功时，Promise会解析为成功时返回的值；当API调用失败时，Promise会拒绝，并抛出一个错误。通过.then()和.catch()方法，可以更直观地处理成功和失败的情况。

优势

Promise化API具有以下优势：

1. 更简洁的代码：Promise化的API可以减少回调函数的使用，使得代码更加简洁和易于阅读。
2. 更好的错误处理：Promise的.catch()方法可以更方便地处理错误，避免了回调地狱中的错误处理代码。
3. 更灵活的异步操作：Promise支持链式调用，可以更灵活地组合异步操作。

注意事项

虽然很多微信小程序API已经Promise化，但并非所有API都支持Promise。在实际开发中，你可能需要同时使用Promise和传统的回调函数风格。因此，了解两种风格的使用场景和优缺点对于高效开发微信小程序非常重要。

实现API Promise化

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下：

//只需调用一次即可实现异步API的promise化
//app.js
import { promisifyAll } from 'miniprogram-api-promise'
//wxp是定义的空对象，用于存储Promisified的API。
const wxp = wx.p = {}
//promisify all wx's api
promisifyAll(wx, wxp)

//promisifyAll函数会将wx对象中的所有API转换为Promise风格，并将这些Promise风格的API存储在wxp对象中

调用 Promise 化之后的异步 API

<van-button type="danger" bindtap="getInfo">按钮</van-button>

//在页面的JS文件里，定义对应的tap事件处理函数
//异步函数返回一个Promise
  async getInfo() {
  //await等待一个Promise的解析。wx.p.request将微信小程序的wx.requestAPI转换为Promise。
  //data:res将wx.p.request的返回值中的data属性解构出来，并赋值给变量res
    const {data: res} = await wx.p.request({
      method: 'GET',
      url: 'https://applet-base-api-t.itheima.net/api/get',
      data: {
        name: 'zs',
        age: 20
      }
    })
    console.log(res)
  },

2.全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等

在小程序中，可使用mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：
⚫ mobx-miniprogram 用来创建 Store 实例对象
⚫ mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

安装Mobx包

在项目中运行如下的命令，安装 MobX 相关的包：

2. 创建 MobX 的 Store 实例

3.分包

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

对小程序进行分包的好处主要有以下两点：
⚫ 可以优化小程序首次启动的下载时间
⚫ 在多团队共同开发时可以更好的解耦协作

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

分包后，小程序项目由 1 个主包 + 多个分包组成：

⚫ 主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
⚫ 分包：只包含和当前分包有关的页面和私有资源

分包的加载规则

① 在小程序启动时，默认会下载主包并启动主包内页面
⚫ tabBar 页面需要放到主包中

② 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
⚫ 非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

目前，小程序分包的大小有以下两个限制：
⚫ 整个小程序所有分包大小不超过 16M（主包 + 所有分包）
⚫ 单个分包/主包大小不能超过 2M

打包原则

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

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

③ tabBar 页面必须在主包内

④ 分包之间不能互相嵌套

引用原则

① 主包无法引用分包内的私有资源
② 分包之间不能相互引用私有资源
③ 分包可以引用主包内的公共资源

独立分包

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

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

最主要的区别：是否依赖于主包才能运行
⚫ 普通分包必须依赖于主包才能运行
⚫ 独立分包可以在不下载主包的情况下，独立运行

独立分包的应用场景

开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：

⚫ 当小程序从普通的分包页面启动时，需要首先下载主包
⚫ 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

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

引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：

① 主包无法引用独立分包内的私有资源
② 独立分包之间，不能相互引用私有资源
③ 独立分包和普通分包之间，不能相互引用私有资源
④ 特别注意：独立分包中不能引用主包内的公共资源

分包预下载

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

配置分包的预下载

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

分包预下载的限制

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

4.案例–自定义tabBar

实现步骤

自定义 tabBar 分为 3 大步骤，分别是：
① 配置信息
② 添加 tabBar 代码文件
③ 编写 tabBar 代码

详细步骤，可以参考小程序官方给出的文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

总结：
① 能够知道如何安装和配置 vant-weapp 组件库
⚫ 参考 Vant 的官方文档

② 能够知道如何使用 MobX 实现全局数据共享
⚫ 安装包、创建 Store、参考官方文档进行使用

③ 能够知道如何对小程序的 API 进行 Promise 化
⚫ 安装包、在 app.js 中进行配置

④ 能够知道如何实现自定义 tabBar 的效果
⚫ Vant 组件库 + 自定义组件 + 全局数据共享

小程序开发基础知识到这里就已经完结了，后续我写一篇小程序开发实战，项目也是参考黑马程序员官方课程，谢谢您的支持~

课件及源码获取方式：

关注公粽号：小猿搜码

后台发送：csdn小程序

即可免费领取