Mpvue中使用Vant Weapp组件库的方法步骤


Posted in Javascript onMay 16, 2019

一、介绍

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。

此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue中使用

mpvue-vant Github地址

二、使用方法

目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用。

克隆vant仓库

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone https://github.com/youzan/vant-weapp.git
// 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git

引入

在需要引入的页面目录下的main.json文件中

{
 "usingComponents": {
  "van-button": "/static/vant/button/index",
 }
}

使用

<van-button>测试</van-button>

三、注意事项

具体组件 api 文档参考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

1.1 数据绑定

原生小程序使用方式为

value="{{value}}"

mpvue 使用方式

v-bind:value="value"
//或者
:value="value"

1.2 事件监听

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

1.3 vue 中组件引入

vant中像notify这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json中引入;另一个是方法的引入,需要在vue文件中import引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录

1.4 获取 event

值得注意的是,mpvue中获取event值与原生小程序有所不同。举例:

onChange(event){ // 获取表单组件filed的值
 console.log(event.mp.detail) // 注意加入mp
}

2. BUG 及报错处理方法

2.1 监听名

mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。

可以改成驼峰式的监听名。

eg: 我在field组件中就遇到这个问题,我的做法是:

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

2.2 报错

一般的报错报错都可以通过一下流程处理。

  • 是否打开了微信开发者工具中的ES6转ES5功能。
  • 仔细检查代码和比对文档,看看是否有使用不当的地方。
  • 重新编译npm run dev或删掉dist目录重新npm run dev
  • 重启或更新微信开发者工具。

若以上流程都走完了,还是无法解决报错,可以通过提交issues的方式,我来帮你解决。

2.2.1 引入组件报错

VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

3. 其他组件库

目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp。

这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。

比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。

使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/目录下的文件。因为这里是经过编译后的。

如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!

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

Javascript 相关文章推荐
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
JS左右无缝轮播功能完整实例
May 16 #Javascript
Node.js Windows Binary二进制文件安装方法
May 16 #Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 #Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
怎样在vue项目下添加ESLint的方法
May 16 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php动态生成函数示例
2014/03/21 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Django自定义分页与bootstrap分页结合
2021/02/22 Python
使用python实现链表操作
2018/01/26 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
化工操作工岗位职责
2014/04/29 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
个人工作表现评价材料
2014/09/21 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS