小程序 | 使用 npm 包 + 小程序对 npm 的支持与限制 + Vant Weapp + API Promise化

小程序对 npm 的支持与限制

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

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

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

Vant Weapp

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

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

安装 Vant 组件库

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

1. 通过 npm 安装（建议指定版本为@1.3.3）
2. 构建 npm 包
3. 修改 app.json

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

前提是安装node.js 后，npm init -y初始化管理配置文件 package.json

1. 通过 npm 进行安装 Vant Weapp npm i @vant/weapp -S --production
   

2. 修改 app.json
   将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3. 修改 project.config.json

   开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

   需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

   {
         
         
     ...
     "setting": {
         
         
       ...
       "packNpmManually": true,
       "packNpmRelationList": [
         {
         
         
           "packageJsonPath": "./package.json",
           "miniprogramNpmDistDir": "./miniprogram/"
         }
       ]
     }
   }
   

   注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

   

4. 构建 npm 包
   打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项（注意！现在新版本不需要勾选 npm 模块了，使用了npm init -y就可以了），构建完成后，即可引入组件。
   

使用 Vant 组件

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

// 通过 npm 安装
// app.json
"usingComponents": {
    
    
  "van-button": "@vant/weapp/button/index"
}

引入组件后，可以在 wxml 中直接使用组件

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

定制全局主题样式

Vant Weapp 使用CSS 变量来实现定制主题。

关于 CSS 变量的基本用法，请参考 MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

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

对于小程序来说，他的根节点就是<page>

以--为开头就是使用了CSS变量，使用的时候可以用 var(xxx)

如果在使用了vant-weapp组件的时候来使用CSS变量，修改的就是vant-weapp里面的样式

/**app.wxss**/
page{
    
    
  --button-danger-background-color:#c9838c;
  --button-danger-border-color:#4b0404b0;
}

！！！所有可用的颜色变量，请参考 Vant 官方提供的配置文件：
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

API Promise化

基于回调函数的异步 API 的缺点

默认情况下，小程序官方提供的异步 API 都是基于回调函数实现的

例如，网络请求的 API 需要按照如下的方式调用

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

什么是 API Promise 化

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

实现 API Promise 化

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。

1. 进行安装：npm i --save [email protected]
   

2. 安装后重新构建 npm 就会出现这个目录 miniprogram-api-promise

   

把wx promise化

promisifyAll()把 wx 对象上异步函数的方法进行 promise 化，然后挂载到 wxp 上面
wxp是一个空对象

// app.js
import {
    
     promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {
    
    };
promisifyAll(wx, wxp)

调用 Promise 化之后的异步 API

  async getInfo() {
    
    
    const res = await wx.p.request({
    
    
      method: 'GET',
      url: 'https://www.escook.cn/api/get',
      data: {
    
    
        name: 'fly',
        age: 22
      }
    })
    console.log(res.data);
  },