详解如何在微信小程序开发中正确的使用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 立即调用的函数表达式如何写
Jan 12 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
ES6的解构赋值实例详解
May 06 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
详解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
php 获取远程网页内容的函数
2009/09/08 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP 微信支付类 demo
2015/11/30 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
AngularJS入门之动画
2016/07/27 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
解析Python中的异常处理
2015/04/28 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
商务专员岗位职责
2013/11/23 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
汽车转让协议书
2015/01/29 职场文书
2015年服务员工作总结
2015/04/08 职场文书
针对吵架老公保证书
2015/05/08 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python