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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
详解JS ES6编码规范
May 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
自定义php类(查找/修改)xml文档
2013/03/26 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP代码加密的方法总结
2020/03/13 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
Python深入学习之装饰器
2014/08/31 Python
MySQL最常见的操作语句小结
2015/05/07 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python过滤序列元素的方法
2020/07/31 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
最新党员的自我评价分享
2013/11/04 职场文书
房屋买卖协议书
2014/04/10 职场文书
市场推广策划方案
2014/06/02 职场文书
公司委托书格式
2014/08/01 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
队名及霸气口号大全
2015/12/25 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python