vant weapp官网（小程序的 iview Weapp 组件库的使用）

本文目录

• 小程序的 iview Weapp 组件库的使用
• 小程序使用 vant 快速创建页面
• 微信小程序使用 Vant Weapp 的步骤
• vant weapp的使用
• 微信小程序如何使用npm，使用vant组件
• 详解mpvue中使用vant时需要注意的onChange事件的坑
• 小程序安装第三方组件库 如：vant
• 微信小程序－vant-weapp日历组件的使用（年月日）

小程序的 iview Weapp 组件库的使用

iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。
商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果，总的来看还是不错的。

还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：
总的来讲 iview 还比较好看的。
***隐藏网址***

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

小程序使用 vant 快速创建页面

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。

官方地址： vant UI 组件库

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

工具 -》 构建 npm

效果：

***隐藏网址***

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。

微信小程序使用 Vant Weapp 的步骤

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

1、在根目录中，打开终端命令，cd到你的项目miniprogram目录下；

2、npm 初始化，如果你的小程序项目没有安装过npm包的话，你需要先初始化npm，

      npm init

3、# 通过 npm 安装

        npm i @vant/weapp -S --production

4、

5、修改该配置项
构建npm时，会在node_modules的同级目录中创建一个miniprogram_npm；miniprogram_npm包才是小程序真正使用的npm包；
原理介绍

为了帮助大家更好的理解发布 npm 包中提到的各种要求，这里简单介绍一下原理：

首先 node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。

构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中；其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（类似 webpack）。

寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况，构建之前的结构：

vant weapp的使用

***隐藏网址***

Vant 是 有赞前端团队 开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本 、 Vue 3 版本 和 微信小程序版本 ，并由社区团队维护 React 版本 和 支付宝小程序版本 。

在小程序根目录打开终端

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

在setting选项中，找到"packNpmManually" 和"packNpmRelationList",并修改为

以Picker选择器为例，找到官网相应组件的文档如下

微信小程序如何使用npm，使用vant组件

新建一个微信小程序，在小程序目录下 输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在小程序目录下，生成package.json文件

通过 npm 安装
npm i @vant/weapp -S --production
通过 yarn 安装
yarn add @vant/weapp --production

***隐藏网址***

详解mpvue中使用vant时需要注意的onChange事件的坑

最近用了一下Vant
Weapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的
1.在
app.json
或
index.json
中引入组件
"usingComponents":
{
"van-collapse":
"path/to/vant-weapp/dist/collapse/index",
"van-collapse-item":
"path/to/vant-weapp/dist/collapse-item/index"
}
2.通过value控制展开的面板列表，activeNames为数组格式
《van-collapse
value="{{
activeNames
}}"》
《van-collapse-item
title="有赞微商城"
name="1"》
提供多样店铺模板，快速搭建网上商城
《/van-collapse-item》
《van-collapse-item
title="有赞零售"
name="2"》
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
《/van-collapse-item》
《van-collapse-item
title="有赞美业"
name="3"
disabled》
线上拓客，随时预约，贴心顺手的开单收银
《/van-collapse-item》
《/van-collapse》
Page({
data:
{
activeNames:
},
onChange(event)
{
this.setData({
activeNames:
event.detail
});
}
});
但是在mpvue里面不能直接这样引入
下面是我的代码
《van-collapse
:value="activeNames"
@change="onChange($event)"》
《van-collapse-item
title="有赞微商城"
name="1"》
提供多样店铺模板，快速搭建网上商城
《/van-collapse-item》
《van-collapse-item
title="有赞零售"
name="2"》
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
《/van-collapse-item》
《van-collapse-item
title="有赞美业"
name="3"
disabled》
线上拓客，随时预约，贴心顺手的开单收银
《/van-collapse-item》
《/van-collapse》
export
default
{
data
()
{
return
{
activeName:
’1’
}
},
methods:
{
onChange
(event)
{
console.log(event)
this.activeName
=
event.mp.detail
}
}
}
得把原生小程序使用方式为改为mpvue
使用方式
首先是数据绑定方式
value="{{activeNames}}"
改为
v-bind:value="activeNames"
//或者
:value="activeNames"
然后是事件监听
在van-collapse组件里加个监听事件
@change="onChange($event)"
mpvue中获取event值也与原生小程序有所不同：
onChange(event){
//
获取表单组件filed的值
console.log(event.mp.detail)
//
注意加入mp
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解如何搭建mpvue框架搭配vant组件库的小程序项目mpvue+vant
app搭建微信小程序的方法步骤

小程序安装第三方组件库 如：vant

***隐藏网址***

vant 小程序组件库

第一步 先npm init 回车 初始化新建package.json文件包
如果微信开发者工具无法输入命令 打开cmd面板 cd d:/ 进入目录 cd users 知道进入小程序项目目录输入命令
第二步 ## 安装

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

开发者工具创建的项目， miniprogramRoot 默认为 miniprogram ， package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

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

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

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

使用时：

***隐藏网址***
vant小程序使用说明文档
在 app.json 或 index.json 中引入组件，详细介绍见 快速上手 。

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

微信小程序－vant-weapp日历组件的使用（年月日）

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp
***隐藏网址***
***隐藏网址***

1：打开微信开发者工具，填写自己的appid和项目名称，选择不使用云服务，新建一个项目。

2：右击在选择在终端打开

进入项目的根目录底下，注意，一定要进入根目录哦，使用cd ../返回上一级目录~

3：小程序已经支持使用 npm 安装第三方包，
这里通过 npm 安装

这里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的区别

使用npm i vant-weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径

使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径（推荐，因为这个可以直接抄文档，不需要改变引入路径的~）

4：在微信开发工具执行npm 构建，点击工具里面，构建npm

构建过程需要等待一会儿，不要捉急

构建完会生成一个miniprogram_npm文件夹
如果构建完如果编译报错，再构建一次就好了

日历文档参照一下

5：使用vant-weapp日历组件
我这里对日期的处理，是需要这样的格式YYYY-MM-dd
所以在对选中的日期做了一些处理和判断~

wxml

js

json