详解如何在微信小程序开发中正确的使用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断点调试心得分享
Apr 23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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扩展函数
2006/10/09 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
JS实现留言板功能
2017/06/17 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
js实现无缝轮播图
2020/03/09 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python3跳出一个循环的实例操作
2020/08/18 Python
详解python的变量缓存机制
2021/01/24 Python
给老师的检讨书
2014/02/11 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年实习单位评语
2015/03/25 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书