Mpvue中使用Vant Weapp组件库

1、介绍

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

此教程是在dov-yih一同协助下完成。通过测试，Vant Weapp下全部组件都可以在mpvue中使用

• mpvue-vant Github地址
• demo 地址
• 更新日志

2、使用方法

目前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>

3、注意事项

具体组件 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的方式让我知道，你们一块儿踩坑吧！

分享两个小程序

1、猫叫助手

基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue中使用云开发的注意事项，mpvue-cloud

收录各类猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。

2、在书云

这是我近期使用Taro开发框架开发的一款小程序，主要功能是提供可靠的书架管理功能，只须要扫一扫书籍背后的条形码便可添加书籍入库，你能够方便的在线上管理你的书架，查看书籍的基本信息，亦能够添加书评。

该项目得到了微信小程序 U 计划的资助。目前项目正在开发中，欢迎你们体验反馈。