（十五）npm包使用、小程序API的promise化

小程序使用npm包

小程序中使用npm包有三个限制

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

Vant Weapp

Vant Weapp是有赞团队开源的一套小程序UI组件库，所使用的是MIT开源许可协议

官方网址：youzan.github.io/vant-weapp

安装vant组件库主要分为如下三步：

• npm安装

# 初始化包管理文件
npm init -y

# 通过 npm 安装
npm i vant-weapp -S --production

# 通过 yarn 安装
yarn add vant-weapp --production

• 构建npm包(官方步骤)
• 修改app.json

# app.json
"usingComponents": {
  "van-button": "vant-weapp/button"
}

详情查看官方步骤：vant-contrib.gitee.io/vant-weapp/… vant组件使用：

<van-button type="primary">按钮</van-button>

定制全局主题样式

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

/* page是根节点 */
page{
    --button-danger-background-color: #c00000;
    --button-danger-border-color:#d6000;
}

api promise化

小程序中实现api promise化主要依赖于miniprogram-api-promise这个第三方包

npm install --save miniprogram-api-promise

注意： 每次安装一个包，都要重新构建npm，删除miniprogram_npm这个文件，重新【工具】【构建npm】

// 在入口文件app.js中只需要调用一次 promisifyAll() 方法，即可实现异步api的promise化
import { promisifyAll } from 'miniprogram-api-promise'
// 创建 wxp 空对象， 自定义对象 wx.p
const wxp = wx.p = {}
promisifyAll(wx, wxp)
// 通过wx.p调用promise化后的api

调用promise化之后的异步api：

<!-- 页面结构 -->
<van-button type="primary" bidtap="getInfo">按钮</van-button>

// 页面js文件
async getInfo() {
    const {data: res} = await wx.p.request({
        method: 'GET',
        url: '',
        data: {}
    })
    console.log(res)
}