在微信小程序中使用vant的方法


Posted in Javascript onJune 07, 2019

在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ????

在微信小程序中使用vant的方法

你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧!

首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令

npm init  初始化
npm install --production
npm i vant-weapp -S --production

第二步之前,你需要保证你的微信开发者工具版本比较新,否则没有是构建npm工具的

第二步就是,打开微信开发者工具,电击左上方 工具,找到 构建npm

在微信小程序中使用vant的方法

在微信小程序中使用vant的方法

构建完成,会生成miniprogram_npm 文件夹

在微信小程序中使用vant的方法

最后, 就是需要在页面中使用 vant 组件了,打开刚刚生成的miniprogram_npm 文件夹 下面的 vant-weapp ,里面的就是vant 的所有组件配置文件,例如,button,

在微信小程序中使用vant的方法

当在一个页面中调用vant的组件时,需要在对应的页面json中添加如下配置:

在微信小程序中使用vant的方法

代码为:

"usingComponents": {
   "van-button": "/miniprogram_npm/vant-weapp/button/index",  //引入button组件
   "van-rate":"/miniprogram_npm/vant-weapp/rate/index"     //引入rate组件
 }

在对应的wxml中加入组件标签就可以了

<van-button type="default">默认按钮</van-button>
<van-rate v-model="value" />

千万不要忘记在JS中声明对应的变量!!!

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
使用Vue构建可重用的分页组件
Mar 26 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
微信小程序实现折线图的示例代码
Jun 07 #Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 #Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 #Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 #Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 #Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 #Javascript
ES6小技巧之代替lodash
Jun 07 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
小程序实现多个选项卡切换
2020/06/19 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
详解Python中is和==的区别
2019/03/21 Python
python global关键字的用法详解
2019/09/05 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
Django多个app urls配置代码实例
2020/11/26 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
大学生两会精神学习心得体会
2014/03/10 职场文书
批评与自我批评总结
2014/10/17 职场文书
杜甫草堂导游词
2015/02/03 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
python标准库ElementTree处理xml
2022/05/20 Python