微信小程序生成_Mpvue中使用Vant Weapp组件库的方法

发布时间:2021-01-07 13:47 作者:jianzhan

摘要: Mpvue中应用Vant Weapp部件库的方式流程 本文关键详细介绍了Mpvue中应用Vant Weapp部件库的方式流程,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看

Mpvue中使用Vant Weapp组件库的方法步骤       这篇文章主要介绍了Mpvue中使用Vant Weapp组件库的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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


二、使用方法

目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用。

克隆vant仓库

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone youzan/vant-weapp.git

// 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone Rychou/mpvue-vant.git

引入

在需要引入的页面目录下的main.json文件中

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

使用

 van-button 测试 /van-button 

三、注意事项

具体组件 api 文档参考

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 ,因此如果 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功能.

3. 其他组件库

目前比较好的组件库有三个,,,。

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 企业网站建设第一步:网

    模拟题目:公司企业网站建设第一步:域名的剖析和关系方法 购买了域名和房间内室内空间之后,要如何运用具体实际操作,对于域名,务必进行剖析,对于房间内室内空间,务必关系

  • 淘宝有哪些比较不错的模

    收费标准的还可以…

    产品淘宝主图、店面室内装修、产品

  • 建设网站,做提升,选对

    模拟题目:基本建设网站,做提高,选对专用型专用工具过重要 互联网阶段,企业都想建本身的网站,规定的提高也促进了市场销售销售市场,市场销售销售市场上的建设网站系统软件

  • amazon终止向维基解密出示

    【凡科IT信息内容】北京市市时间十一月2日信息内容,amazon早就停止可用维基解密(Wikileaks),随后求它将本身的网站移到欧州服务提供商手里。 维基解密依据Twitter发布信息内容说,

  • 阿里巴巴云全新升级发布

    模拟题目:阿里巴巴巴巴云全新升级升級公布轻量应用互联网网络服务器,致力于于提升顾客互联网网络服务器运用体会 技术性性解读 阿里巴巴巴巴云轻量应用互联网网络服务器运用依