详解如何在微信小程序开发中正确的使用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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
使用webpack构建应用的方法步骤
2019/03/04 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python中functools模块函数解析
2017/03/12 Python
python对excel文档去重及求和的实例
2018/04/18 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python命令行click参数用法解析
2019/12/19 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
化妆品活动策划方案
2014/05/23 职场文书
2014年社区工作总结
2014/11/18 职场文书
单位实习鉴定评语
2015/01/04 职场文书
销售助理岗位职责
2015/02/11 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript