详解如何在微信小程序开发中正确的使用vant ui组件


Posted in Javascript onSeptember 13, 2018

微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用。今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源。

第一步:

在小程序工程的根目录下执行:

npm i vant-weapp -S --production

第二步:

保证当前你的微信开发者工具是最新版本,然后点击执行“构建npm“

详解如何在微信小程序开发中正确的使用vant ui组件

构建成功后会提示:

详解如何在微信小程序开发中正确的使用vant ui组件

同时项目根目录中会多出一个目录“miniprogram_npm”,这个就是小程序可以识别的npm第三方库。

详解如何在微信小程序开发中正确的使用vant ui组件

第三步:

这时候当我们需要在一个页面中调用vant组件,那么就要在对应的页面json中添加类似如下配置:

详解如何在微信小程序开发中正确的使用vant ui组件

{
"usingComponents":{

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

接着你就可以在wxml中直接调用这个ui组件了。

详解如何在微信小程序开发中正确的使用vant ui组件

注意,对于vant库来说其实你并不需要在页面对应的js中require vant-weapp组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
layui的select联动实现代码
Sep 28 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
详解JavaScript修改注册表的方法
Jan 05 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 #Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 #Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 #Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 #Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 #Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 #Javascript
JavaScript数组方法的错误使用例子
Sep 13 #Javascript
You might like
制作美丽的拉花
2021/03/03 冲泡冲煮
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
简单理解Python中的装饰器
2015/07/31 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python正则表达式面试题解答
2020/04/28 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
基于Python函数和变量名解析
2019/07/19 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python中logger日志模块详解
2020/08/04 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
汽车运用工程专业求职信
2014/06/18 职场文书
服务明星事迹材料
2014/12/29 职场文书
运动会新闻报道稿
2015/07/22 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python