微信小程序Vant组件库

引言

经过web前端开发的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。

npm包

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

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

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

不支持依赖于 C++插件的包

Vant Weapp

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

安装 Vant 组件库

通过 npm 安装：

(注意一点：npm需要node.js环境配置，可百度教程，这里不在赘述)

安装组件库之前先要对 npm 进行初始化一个包管理配置文件：

# 通过 npm 安装
npm i @vant/weapp -S --production
# 通过 yarn 安装
yarn add @vant/weapp --production
# 安装 0.x 版本
npm i vant-weapp -S --production
选择一种命名方式进行安装即可，这里我选择第一种

​注意：如果安装报错的话可以是权限不够，需要调用管理员权限：（安装成功如下图）

​修改 app.json：

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

​修改 project.config.json：

开发者工具创建的项目，miniprogrmRoot 默认为 miniprogrm，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引 npm依赖的位置。

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

​PS：这个地方有点奇怪，本来project.config.json是有这两个文件的只是 packageJsonPath 里面需要我们配置数据而已，但是我配置数据之后就报错了，老是提示我 解析 project.comfig.json 失败，请检查内容或删除文件。就很奇怪，查阅了好多文档资料没有解决，最后我把原来文件里的两个文件先删除在添加，最后解决了，算是人生中配置文件的一个小小 Bug 吧。

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

构建 npm 包：

在根目录下新建 miniprogram 文件夹。

​然后再点击【工具 -> 构建 npm】

​新的开发版本中，详情——本地设置中是没有【使用 npm 模块勾选框选项】，所以我们不需要理会，如果低版本开发者用户有这个选项的话，则需勾选。

这边也是有一个很神奇的地方，构建文件夹完成后，控制台红了一大片，出现如下报错

自动热重载错误 WXML 文件编译错误] miniprogram/miniprogram_npm/@vant/weapp/等一系列问题，然后我就查找了相关文件将如下 注释掉，在进行编译，红色消失，把注释的代码还原在编译，红色没出现，问题解决。

​typescript支持：

如果是使用typescript进行小程序开发的话可以进行这个步骤的配置，一般使用js进行小程序开发的话可以直接跳过这个步骤就可以了。

安装 miniprogram-api-typings：

# 通过 npm 进行安装
npm i -D miniprogram-api-typings
# 通过 yarn 进行安装
yarn add -D miniprogram-api-typings

在tsconfig.json中增加如下配置，以防止 tsc 编译报错。

请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp所在的目录。

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

引入组件：

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

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

当我们引入组件时，没有把具体的根目录写上时，控制台便会报错，如下：

​加上具体的路径后，报错解决，如下：

​使用组件：

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

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

​如果想使用其它类型的样式，比如按钮啥的，在vant官方里面找到button按钮，根据需求引入即可

​Vant Weapp 定制全局主题样式

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

page{
  /* 定制primary按钮的背景颜色和边框颜色 */
  --button-primary-background-color:#f00;
  --button-primary-border-color:#0f0;
}

​如果想设置更多的 CSS 样式，可以查看 Vant Weapp 官方文档查看：

​配置文件打开是github网站内容，网站有可能被墙，多点几次就可以了。

​API的Promise化

API Promise化：指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于

默认情况下，小程序官方提供的异步API都是基于回调函数实现的，比如网络请求的 API 需要安装如下的方式调用：(缺点：容易造成回调地狱的问题，代码可读性、维护性差！)

wx.request({
    method:'';
    url:'';
    data:'';
    success:() => {}, //请求成功的回调函数
    fail:() => {},    //请求失败的回调函数
    complete:() =>{}, //请求完成的回调函数
})

实现 API Promise 化

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

npm i -S miniprogram-api-promise@1.0.4

安装完成后，所安装的包需要再一次进行 构建 npm ，才能出现在miniprogram文件夹下：

小程序入口文件中(app.js)，只需调用一次 promisifyAll()方法，即可实现异步 API 的Promise化 ：

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

调用Promise化异步API：

//页面 .wxml结构
<van-button type="primary" bindtap="getInfo">按钮</van-button>
//页面.js文件中，定义对应的 tap 事件处理函数
syssc getInfo(){
  const res = await wx.p.request({
    method: 'GET',
    url: 'https://www.baidu,com', //举例而已，百度实际不能使用
    data: {
      name:'张三',
      age:18
    },
  })
  console,log(res)
},

总结