微信小程序之引入使用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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流烟默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值