微信小程序进阶实战：从 UI 组件库到全局状态管理全解DAY05

前面我们已经掌握了小程序自定义组件、基础交互与生命周期，现在来攻克更进阶的技能 ------UI 组件库引入、全局状态管理、API 优化与自定义 tabBar。这些技能是开发中大型、高性能小程序的必备基础，直接帮你提升开发效率与项目体验。

一、安装与配置 Vant Weapp 组件库

Vant Weapp 是轻量、高性能的移动端 UI 组件库，提供几十种高质量组件，不用自己造轮子，极大提升开发效率。

1. 安装依赖

确保项目根目录有 package.json，没有则执行初始化：

bash 复制代码

npm init -y

安装 Vant Weapp：

bash 复制代码

npm i @vant/weapp -S --production

2. 构建 npm

打开微信开发者工具 → 点击菜单栏工具 → 构建 npm，构建完成后项目会生成 miniprogram_npm 目录。

3. 全局 / 局部引用组件

全局引用（推荐，项目所有页面可用）

在 app.json 中配置：

json 复制代码

"usingComponents": {
  "van-button": "@vant/weapp/button/index",
  "van-cell": "@vant/weapp/cell/index",
  "van-popup": "@vant/weapp/popup/index"
}

局部引用（仅当前页面使用）

在页面 .json 中配置：

json 复制代码

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

4. 基础使用示例

在页面 .wxml 中直接使用 Vant 组件：

wxml 复制代码

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>

<van-cell title="单元格" value="内容" />

提示：所有组件的详细用法，直接参考 Vant 官方文档，文档覆盖完整的 API、示例和常见问题。

二、使用 MobX 实现全局数据共享

中大型小程序中，不同页面、组件之间经常需要共享数据（比如用户信息、购物车、全局状态），MobX 是极佳的选择，它简洁、响应式，实现全局数据共享非常方便。

1. 安装 MobX

bash 复制代码

npm i mobx miniprogram-mobx -S

然后构建 npm（同 Vant 步骤）

2. 创建 Store（全局状态管理中心）

在项目根目录新建 store 文件夹，创建 index.js：

js 复制代码

// store/index.js
import { observable, action } from 'mobx-miniprogram'

export const store = observable({
  // 全局数据
  userInfo: null,
  token: '',
  count: 0,

  // 动作：修改数据
  updateUserInfo: action(function(newInfo) {
    this.userInfo = newInfo
  }),

  updateToken: action(function(newToken) {
    this.token = newToken
  }),

  addCount: action(function() {
    this.count++
  })
})

3. 在页面 / 组件中使用 Store

在需要使用全局数据的页面或组件中，导入并使用：

js 复制代码

// pages/index/index.js
import { store } from '../../store/index'
import { observer } from 'mobx-miniprogram-bindings'

Page(observer({
  store,
  data: {
    // 可以直接绑定 store 中的数据
  },
  onLoad() {
    console.log(store.userInfo) // 获取全局数据
    this.add()
  },
  add() {
    store.addCount() // 修改全局数据
  }
}))

在 .wxml 中直接使用：

wxml 复制代码

<view>计数：{{store.count}}</view>
<button bind:tap="add">+1</button>

提示：详细的 MobX 配置、绑定技巧，直接参考 MobX 官方文档，文档有完整的小程序示例。

三、小程序 API Promise 化：告别回调地狱

小程序原生 API 大多基于回调函数（success/fail），嵌套多层回调会导致代码难以维护，Promise 化后可以使用 async/await，让代码更优雅。

1. 安装转换包

bash 复制代码

npm i miniprogram-api-promise -S

构建 npm。

2. 在 app.js 中配置

js 复制代码

// app.js
import { promisifyAll } from 'miniprogram-api-promise'

const wxp = {}
promisifyAll(wx, wxp)

App({
  onLaunch() {
    // 将 Promise 化的 API 挂载到全局
    this.wxp = wxp
  }
})

3. 页面中使用

js 复制代码

// pages/index/index.js
Page({
 async onLoad() {
   try {
     // 异步获取用户信息
     const res = await getApp().wxp.getUserProfile({
       desc: '用于完善会员资料'
     })
     console.log('用户信息：', res.userInfo)
   } catch (err) {
     console.error('获取失败：', err)
   }
 }
})

优势：代码从嵌套回调变为扁平结构，逻辑更清晰，错误处理更简单。

四、实现自定义 tabBar 效果

小程序默认 tabBar 样式固定，无法满足复杂 UI 需求，自定义 tabBar 是常见需求。实现思路是：隐藏默认 tabBar → 用 Vant 组件 + 自定义组件模拟 tabBar → 结合 MobX 管理状态。

1. 隐藏默认 tabBar

在 app.json 中移除 tabBar 配置，或设置为 custom：

json 复制代码

"tabBar": {
  "custom": true
}

2. 创建自定义 tabBar 组件

在 components 文件夹下创建 custom-tab-bar 组件，包含 .wxml/.wxss/.js：

wxml 复制代码

<!-- components/custom-tab-bar/custom-tab-bar.wxml -->
<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="search-o">发现</van-tabbar-item>
  <van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>

js 复制代码

// components/custom-tab-bar/custom-tab-bar.js
import { store } from '../../store/index'
import { observer } from 'mobx-miniprogram-bindings'

Component(observer({
  store,
  properties: {},
  data: {
    active: 0
  },
  methods: {
    onChange(e) {
      const index = e.detail
      this.setData({ active: index })
      // 结合 MobX 管理选中状态，或直接跳转页面
      wx.switchTab({ url: `/pages/${index === 0 ? 'index' : index === 1 ? 'find' : 'mine'}/index` })
    }
  }
}))

3. 全局引用自定义 tabBar

在 app.json 中配置 usingComponents，全局引用自定义 tabBar 组件：

json 复制代码

"usingComponents": {
  "custom-tab-bar": "/components/custom-tab-bar/custom-tab-bar"
}

4. 在页面中使用自定义 tabBar

在需要显示 tabBar 的页面（如首页、发现页、我的页）的 .wxml 底部添加：

wxml 复制代码

<custom-tab-bar />

完整实现思路：Vant 组件库提供美观的 tabBar 组件，自定义组件封装 tabBar 结构，MobX 管理全局选中状态或跳转逻辑，三者结合即可实现高度定制的 tabBar。