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工具_Form 封装
Aug 21 Javascript
javascript动画浅析
Aug 30 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
js实现产品缩略图效果
Mar 10 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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加Nginx实现动态裁剪图片方案
2014/03/10 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JavaScript DOM基础
2015/04/13 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Django自定义用户认证示例详解
2018/03/14 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python 同时读取多个文件的例子
2019/07/16 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
python 实现Harris角点检测算法
2020/12/11 Python
红旗团支部事迹材料
2014/01/27 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2014年话务员工作总结
2014/11/19 职场文书
考博导师推荐信范文
2015/03/27 职场文书
对学校的意见和建议
2015/06/04 职场文书
陪护人员误工证明
2015/06/24 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
python分分钟绘制精美地图海报
2022/02/15 Python
Python中的 Set 与 dict
2022/03/13 Python