在微信小程序中使用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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
AJAX学习笔记
May 18 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和ACCESS写聊天室(三)
2006/10/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python数据结构树和二叉树简介
2014/04/29 Python
python求列表交集的方法汇总
2014/11/10 Python
python简单猜数游戏实例
2015/07/09 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python清除函数占用的内存方法
2018/06/25 Python
python解析yaml文件过程详解
2019/08/30 Python
Python高级property属性用法实例分析
2019/11/19 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
酒店个人求职信范文
2014/01/25 职场文书
3的组成教学反思
2014/04/30 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python