小程序使用有赞 UI 库

引入有赞 UI 库

1、初始化 npm

在小程序 package.json 所在的目录（代码根目录）中执行下面命令，进行初始化：

npm init 

ps. 这里一路按 enter 键就可以了，命令窗口可以在目录下通过 shift + 鼠标右键选择 PowerShell 打开 。

2、安装 Vant 包

在上面的基础上，输入下面命令，安装有赞 UI 库：

npm i vant-weapp -S --production

如果这里报 rollbackFailedOptional 错误，可以试试修改 npm 的资源镜像链接，输入下面命令：

npm config set registry http://registry.npm.taobao.org

然后再执行上面安装命令，应该就可以了。

3、使用 npm 模块

点击微信开发者工具右上角详情，选择本地设置，勾选上下面的 “使用 npm 模块”

4、构建 npm

点击开发者工具中的菜单栏：工具 --> 构建 npm

5、修改 app.json

将 app.json 中的 "style": "v2" 去除

6、修改 project.config.json

在根目录下的 project.config.json 文件中，通过 ctrl + f 搜索 packNpmManually ，修改配置，使开发者工具可以正确索引到 npm 依赖的位置。

改成如下图

代码如下：

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

---

到这应该就完成安装了，下面看看使用。

使用有赞 UI 库

1、引入控件

在 app.json （或 Page 的 json）中引入控件

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

2、使用控件

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

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

示例

这里拿一个 Dialog 弹出框作为示例，因为官方文档有问题，在 Page 中引入错了，真的是把我坑到了。

1、引入 Dialog 控件

在app.json或index.json中引入组件

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

2、在 WXML 中设置 Dialog

这里有两种用法，一种是把 Dialog 当布局组件使用，一种是像 wx.showModel 一样弹出对话框，无论哪种都要在 WXML 中写 van-dialog。

这里以后一种用法为例，在 WXML 中随便找个地方，填入下面代码：

<van-dialog id="van-dialog" />

3、在 Page 中使用

先引入组件，就是这里把我坑了，主要就是没有 dist 这个目录了，有赞也不提示。

//import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
import Dialog from '../../../miniprogram_npm/@vant/weapp/dialog/dialog';

这里用的相对路径，后面路径是对的，需要直接改下！

在需要的时候像下面一样使用就可以，不过我是觉得还不如微信自带的好看哦！

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

4、在 Dialog 中有原生控件

这里提一下，如果 Dialog 中有原生控件，消失的时候原生控件回后消失，很奇怪。例如对话框里面放了一个 canvas 来显示二维码，关闭对话框时，对话框消失了，二维码延迟一会才消失，这时候可以通过变量，先隐藏二维码，再隐藏对话框，有这个思路，就能解决了。

结语

如果不想自己设计各种控件的话，用有赞的 UI 库还是很方便的，但是如果给了设计图，要改这些控件还是有点麻烦。