前端开发-微信小程序UI框架Vant Weapp

Vant Weapp是有赞前端团队开源的移动端微信小程序组件库,组件丰富,生态活跃,应该是目前最火的微信小程序UI组件库

一、安装

1、npm安装

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 模块 选项,构建完成后,即可引入组件。

前端开发-微信小程序UI框架Vant Weapp

npm构建

二、使用

以 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>

三、常用组件事例

1、按钮

引入

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

按钮类型

// 支持default、primary、info、warning、danger五种类型,默认为default
<van-button type="default">默认按钮van-button>
<van-button type="primary">主要按钮van-button>
<van-button type="info">信息按钮van-button>
<van-button type="warning">警告按钮van-button>
<van-button type="danger">危险按钮van-button>

朴素按钮

// 通过plain属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色
<van-button plain type="primary">朴素按钮van-button>
<van-button plain type="info">朴素按钮van-button>
前端开发-微信小程序UI框架Vant Weapp

按钮事例

2、Icon图标

组件引入

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

基本使用

<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
前端开发-微信小程序UI框架Vant Weapp

3、时间选择器

组件引入

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

基本使用

type="datetime"
  value="{{ currentDate }}"
  min-date="{{ minDate }}"
  max-date="{{ maxDate }}"
  bind:input="onInput"
/>
Page({
  data: {
    minHour: 10,
    maxHour: 20,
    minDate: new Date().getTime(),
    maxDate: new Date(2019, 10, 1).getTime(),
    currentDate: new Date().getTime(),
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail,
    });
  },
});
前端开发-微信小程序UI框架Vant Weapp

时间选择组件

4、Field组件

组件引入

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

基本使用

<van-cell-group>
  value="{{ value }}"
    placeholder="请输入用户名"
    border="{{ false }}"
    bind:change="onChange"
  />
group>
Page({
  data: {
    value: \'\',
  },

  onChange(event) {
    // event.detail 为当前输入的值
    console.log(event.detail);
  },
});
前端开发-微信小程序UI框架Vant Weapp

Field组件

还有很多实用的组件,细节上大家可以去官网查看,我平时项目的业务开发基本上都能满足

觉得效果不错的请帮忙加个关注点个赞,每天分享前端实用开发技巧

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/surface/21357.html

发表评论

登录后才能评论