Skip to content

mpvue中无缝接入Vant Weapp组件库,所有组件均可使用。

Notifications You must be signed in to change notification settings

Rychou/mpvue-vant

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

介绍

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

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

使用方法

安装组件库

以下两种方式没有本质区别,都是要将组件库复制到 static 目录下。

npm 安装

在根目录下,命令行执行:

npm i vant-weapp -S --production

安装完后,将 node_modules/vant-weapp/dist 目录下的所有文件,copy 至 static/vant 目录下。

克隆仓库

在本地找个位置(非项目目录),在命令行执行以下命令:

git clone https://github.com/youzan/vant-weapp.git

克隆到本地后,将 dist 目录下的所有文件复制到你项目的 /static/vant/ 目录下。

引入组件

在需要引入组件的页面目录下的 main.json 文件中,引入对应组件。

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

组件使用

直接在页面的 .vue 文件中使用即可。

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

注意事项

具体组件 api 文档参考Vant Weapp

使用方式

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

数据绑定

原生小程序使用方式为

<button value="{{value}}">按钮</button>

mpvue 使用方式

<button v-bind:value="value">按钮</button>
<button :value="value">按钮</button> //或者

事件监听

原生小程序使用方式

<button bind:click="onClick">按钮</button>

mpvue 使用方式

<button @click="onClick">按钮</button>

特殊的组件引入

vant 中像 notify 这种操作反馈类的组件,都需要引入两个东西。

  • 组件的引入,这个在main.json中引入。

  • 方法的引入,需要在 vue 文件中 import 引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

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

事件的回调参数

mpvue 中获取 event 值与原生小程序有所不同。举例:

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

BUG 及报错处理方法

监听事件名

mpvue 里面无法监听原生小程序组件中的 @click-icon 这类 kebab-case 事件名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。

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

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

// static/vant/field/index.js

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

// 修改为:

this.$emit('clickIcon');

启动报错

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

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

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

引入组件报错

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

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

其他组件库

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

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

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

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

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

分享两个小程序

猫叫助手

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

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

猫叫助手

在书云

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

该项目获得了微信小程序 U 计划的资助。目前项目正在开发中,欢迎大家体验反馈。

在书云

About

mpvue中无缝接入Vant Weapp组件库,所有组件均可使用。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published