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模拟弹出效果代码修正版
Aug 07 Javascript
Javascript 函数对象的多重身份
Jun 28 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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操作excel文件 基于phpexcel
2010/07/02 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
一些mootools的学习资源
2010/02/07 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
浅谈python中set使用
2016/06/30 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python Kmeans算法原理深入解析
2019/08/23 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
优秀班干部事迹材料
2014/01/26 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
小班评语大全
2014/05/04 职场文书
师德师风建设方案
2014/05/08 职场文书
县级文明单位申报材料
2014/05/23 职场文书
银行授权委托书范本
2014/10/04 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python