在微信小程序中使用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 相关文章推荐
javascript中比较字符串是否相等的方法
Jul 23 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
实例分析js事件循环机制
Dec 13 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php实现的RSS生成类实例
2015/04/23 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
javascript cookies操作集合
2010/04/12 Javascript
AngularJS语法详解
2015/01/23 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
js date 格式化
2017/02/15 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python实现购物车程序
2018/04/16 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python相对企业语言优势在哪
2020/06/12 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
DJI全球:DJI Global
2021/03/15 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
会务接待方案
2014/02/27 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python