微信小程序使用npm

通过 npm 安装 npm i

@vant/weapp -S --production

### 修改 app.json

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

### 构建 npm 包

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

简单运用

Button 按钮

在app.json（全局）或index.json（要使用的页面）中引入组件

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

代码演示

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

Cell 单元格

在app.json（全局）或index.json（要使用的页面）中引入组件

"usingComponents": { "van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index" }

代码演示

<van-cell-group> 
<van-cell title="单元格" value="内容" /> 
<van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" /> 
</van-cell-group>

Calendar 日历

在app.json（全局）或index.json（要使用的页面）中引入组件

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

代码演示

wxml中：

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" /> 
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />

js中：

Page({
  data: {
    date: '',
    show: false,
  },

  onDisplay() {
    this.setData({ show: true });
  },
  onClose() {
    this.setData({ show: false });
  },
  formatDate(date) {
    date = new Date(date);
    return `${date.getMonth() + 1}/${date.getDate()}`;
  },
  onConfirm(event) {
    this.setData({
      show: false,
      date: this.formatDate(event.detail),
    });
  },
});