小程序开发提效：npm支持、Vant Weapp组件库与API Promise化（八）

乔公子搬砖2025-08-27 17:43

一、小程序对npm的支持与限制

3个限制：

1、不支持依赖Node.js内置库的包

2、不支持依赖浏览器内置对象的包

3、不支持依赖C++插件的包

二、Vant WeAPP

2.1 安装及使用

定义：Vant Weapp是有赞前端团队开源的一套小程序UI组件库；

作用：助力开发者快速搭建小程序应用；

使用的协议：MIT开源许可协议；

官方文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库

搭建：Vant Weapp - 轻量、可靠的小程序 UI 组件库

2.2 定制全局主题样式

在app.wxss中定义page{}，在page中定义全局主题颜色

参考：Vant Weapp - 轻量、可靠的小程序 UI 组件库 -->样式变量

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

复制代码

page {
  --button-danger-background-color:#c00000;
  --button-danger-border-color:#D60000;
}

三、API Promise化

3.1 定义

API Promise化，指的是通过额外的配置，将官方提供、基于回调函数的异步API，升级改造为基于Promise的一步API，从而提高代码的可读性、维护性、避免回调地狱的问题。

3.2 实现API Promise化

回调地狱：存在异步任务的代码，不能保证能按照顺序执行，只能在异步函数中调用异步函数；

解决的问题：回调地狱的问题

3.2.1 安装promise

1、install --save miniprogram-api-promise

2、删除miniprogram_npm，重新构建

3、构建npm，工具-->构建npm

3.2.2 实现promise化步骤

复制代码

// 导入promise
import { promisifyAll } from 'miniprogram-api-promise'
// 定义变量
const wxp = wx.p = {}
// 将wx转存wxp
promisifyAll(wx,wxp)

3.2.3 调用promise化后的一步API

复制代码

// async/await 代替异步函数回调
async getInfo() {
      const {data:res} = await wx.p.request({
        method: 'GET',
        url: 'https://www.escook.cn/api/get',
        data:{
          name:'zs',
          age:20
        }
      })
      console.info(res)

  }