vant-weapp 快速上手

背景知识
使用 Vant Weapp 前，请确保你已经学习过微信官方的小程序简易教程和自定义组件介绍。

安装
1、用小程序工具初始化项目

2、在项目根目录下添加npm能力，否则报错微信小程序没有找到可以构建的npm包

npm init
# 一路默认回车
# 然后执行，通过 npm 安装
npm i @vant/weapp -S --production

3、用小程序工具进行npm编译测试

如果执行成功，会看到如下界面

4、引入组件测试，我们用van-button组件测试
为引入之前

引入步骤：
1）在app.json中引入组件（全局引入）

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

2）在index.wxml中，改写代码
将

<button  wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

改写成

<van-button type="info" wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </van-button>

最终编译按钮效果为：

组件引入成功了！
参考文档
1、Vant Weapp官网
2、小程序简易教程
3、自定义组件

vant-weapp 快速上手相关推荐

微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
Vant Weapp的使用——微信小程序
1. Vant Weapp:是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用.它所使用的是 MIT 开源许可协议,对商业使用比较友好. 官方文档地址 Vant Weapp - ...
微信小程序使用@vant/weapp组件
打开微信小程序项目终端,如果根目录没有package.json文件,就先执行命令npm init -y 之后安装@vant/weapp组件,执行命令npm i @vant/weapp -S --pro ...
上传文件微信小程序input_快速上手微信小程序UI框架
本课程属于微信小程序 A计划,不单独售卖,加入 A 计划可免费观看本课程及所有微信小程序收费课程~ 微信小程序 A计划永久有效期购买链接: http://www.sikiedu.com/clas ...
分享一个Vant Weapp小程序UI组件库
Vant Weapp官方地址:https://youzan.github.io/vant-weapp/#/ Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提 ...
Vant Weapp小程序蹲坑之事件名称问题及解决方案
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用.值得褒奖的是,Vant Weapp 组件库更新非常迅速 ...
vant Webapp 快速使用
** vant Webapp 快速使用 ** Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用.( ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
小程序动端组件库Vant Weapp教程
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用两大参考神兽: 文档:https://youzan.g ...
微信小程序中vant/weapp安装，初始化，及使用
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用. Vant Weapp官网:https://yo ...

vant-weapp 快速上手

vant-weapp 快速上手相关推荐

最新文章

热门文章