介尘部落

文学|音乐|休闲娱乐|计算机技术|地球科学|社会学——知识成就命运


uni-app整合最新版vant-weapp,遇到的问题和解决办法

该方法只适合在h5端,也不建议微信小程序在uni-app中使用vant(BUG非常多,特别是每次更新HbuilderX的时候),如果你实在想小程序在uni-app中使用vant,可以用uni-app的插件市场的Vant UI Demo For Uni-app

1.前往github下载vant-weapp组件库,github地址

2.在HBuilderX中新建uni-app项目,并在新项目的根目录下新建个目录,用于存放vant-weapp组件,我新建的目录名为wxcomponents为例

3.将步骤1的dist文件复制粘贴到wxcomponents目录下,并改名为vant

4.使用uni-app提供的easycom组件模式,具体看uni-app文档

5.将自定义easycom配置示例复制粘贴到pages.json中,并修改

这一步可不看
解读: (.)代表任意字符,则”van-(.)”是对应组件名,而$1是获取(.)
例子: “van-button”,$1获取(.),则$1=button
而$1/后面的index.vue,打开vant下的button目录,发现并没看到index.vue,
别急,当你编译运行的时候,uni-app和HBuilderX会帮你自动生成的.
编译前:

编译后:

6.然后前往page/index/index.vue写一个vant-button的组件

7.点击运行到chrome,注意先运行到浏览器

8.发现报了一堆错,不要慌

9.复制url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff),在want下通过字符串搜索

10.原来是”,url”的,后面没有空格,即”, url”,需要添加上空格

11.停止运行,然后再次运行,因为需要重新编译,然后就成功了

另一个方法,在步骤9查找到目标文件时,右键执行重排代码,也能成功

一些网友遇到的问题:

1.编译不生成.vue

有可能是编译器的版本问题,我的是2.6.8.20200330版本.那么你可以用HBuilder X的内置浏览器编译下,就会生成.vue了

2.项目浏览器启动后提示”远程连接失败,请点击屏幕重试“

阅读全文
公众号-介尘阅读时光
赞赏支持
,发布于 2021-03-05 01:18

0 Responses to “uni-app整合最新版vant-weapp,遇到的问题和解决办法”

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

×