微信小程序之引入使用Vant Weapp组件

Vant Weapp官网地址：https://youzan.github.io/vant-weapp/#/quickstart，自己可以去其官网详细了解。

这里主要总结下微信小程序中如何使用该组件。

【1】新建一个微信小程序工程

如下所示：

【2】引入并使用Vant Weapp组件的几种方式

① 第一种-直接引入dist

直接去该地址下载项目，https://github.com/youzan/vant-weapp，把dist文件进入你的小程序工程中。

在 json 文件中配置button组件,修改路径：

{"usingComponents": {"van-button": "/dist/button/index"}
}

然后wxml就可以使用该组件，实例如下：

② 第二种方式–npm引入组件

1.小程序工程目录下初始化组件库

 npm init //然后一直回车即可

2.通过npm进行安装

小程序已经支持使用 npm 安装第三方包，注意这个是在你小程序项目的目录下。

# 通过 npm 安装
npm i vant-weapp -S --production

3.微信开发者工具–构建npm

构建完成会多一个miniprogram_npm文件夹

4.详情–本地设置中勾选使用npm模块

5.index.json中引入后即可在index.wxml中使用

修改index.json文件：

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

修改index.wxml:

<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</view>

微信小程序之引入使用Vant Weapp组件相关推荐

PHP使用weui,微信小程序WeUI引入
引入组件通过 useExtendedLib 扩展库的方式引入 1.报错Component is not found in path "miniprogram_npm/weui-minip ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
微信小程序中引入ttf字体
微信小程序中引入ttf字体解决常规引入ttf不生效问题第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
Taro微信小程序字体引入
Taro微信小程序要引入新的字体可以全局引入,在app.jsx的componentDidMount中使用Taro.loadFontFace 注意: source的下载地址只能使用经过备份的域名运行时 ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
【微信小程序经验】各类图表相关组件+Demo源码（折线图，柱状图，K线，分时图）
各类图表功能,小程序自带API并没有提供,所以很多人就用了其他方法来实现,我将这些实现方法和教程聚合一下,以便能够迅速而方便的使用: 相关文章: 在微信小程序中绘制图表(part1) 在微信小程序中绘 ...

微信小程序之引入使用Vant Weapp组件

【1】新建一个微信小程序工程

【2】引入并使用Vant Weapp组件的几种方式

微信小程序之引入使用Vant Weapp组件相关推荐

最新文章

热门文章