微信小程序——使用Vant Weapp 框架

本是古典何须时尚 2023-02-23 08:23 27阅读 0赞

vant在微信小程序中使用是vant weapp,安装使用的方法有两种，通过npm安装，也可以直接引入dist文件

### 一，通过 npm 安装 ###

### 步骤一 通过 npm 安装 ###

需要注意的是 **package.json** 和 **node\_modules** 必须在 **miniprogram** 目录下

# 通过 npm 安装
    npm i @vant/weapp -S --production
    
    # 通过 yarn 安装
    yarn add @vant/weapp --production
    
    # 安装 0.x 版本
    npm i vant-weapp -S --production

### 步骤二 构建 npm 包 ###

打开微信开发者工具，点击 **工具 -> 构建 npm**，并勾选 **使用 npm 模块** 选项，构建完成后，即可引入组件

![format_png][]

###  步骤三 修改 tsconfig.json ###

如果你使用 typescript 开发小程序，需要在 tsconfig.json 中增加如下配置，防止 npm 构建后 tsc 编译报错

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

{
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
        }
      }
    }

### 步骤四 修改 app.json ###

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

### 引入组件  ###

// app.json
    "usingComponents": {
      "van-button": "path/to/@vant/weapp/lib/button/index"
    }

### 使用组件 ###

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

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

##  二，通过文件引入 ##

到GitHub下载 vant Weapp 的代码，将 `dist` 目录拷贝到自己的项目中。

下面的vant为下载的dist文件

![2020070616170443.png][]

然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

### 1. 添加需要的组件。 ###

在页面的 json 中配置（路径根据自己项目位置配置）：

// index.json
    "usingComponents": {
      "van-button":"../../components/vant/button/index"
    }

### 2. 在 wxml 中使用组件： ###

index.wxml

<van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>

![20200706160630277.png][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcueXpjZG4uY24vcHVibGljX2ZpbGVzLzIwMTkvMDgvMTUvZmEwNTQ5MjEwMDU1OTc2Y2I2Mzc5ODUwMzYxMWNlM2QucG5n?x-oss-process=image/format,png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style
[2020070616170443.png]: https://img-blog.csdnimg.cn/2020070616170443.png
[20200706160630277.png]: https://img-blog.csdnimg.cn/20200706160630277.png