今天我在做项目的时候,正好用到了WeUI组件库的Half Screen Dialog功能,引入WeUI组件库时,突然发现无法引入,出现路径错误,废了好大工夫我才解决这个问题,正好写一篇文章将这个问题记录下来,分享出去。
引入WeUI组件库时,我是通过 useExtendedLib 扩展库 的方式引入的,这种引入方式的优点是:引入的组件将不会计入代码包大小。
第一步依然是在app.json中,引入useExtendedLib。
按照微信文档引入useExtendedLib。然后我按照微信文档的步骤,第二步在page.json中引入Half Screen Dialog的组件,如下图
引入完成后,我进行了编译,却突然发现出现了以下的错误
错误显示我引入的路径有问题,但是我明明是按照微信的文档操作的啊,为什么会引入失败呢?
我在冥思苦想外加尝试了许多遍以后,终于给我偶然间看到了这个:
在微信官方文档的WeUI组件库 快速上手这一页文档中,引入的路径并非是../../components,而是/miniprogram_npm/weui-miniprogram,于是我将路径改为了
"usingComponents": {
"mp-halfScreenDialog": "/miniprogram_npm/weui-miniprogram/half-screen-dialog/half-screen-dialog"
},
然后进行编译,这一遍果然成功了,并未报错,而且组件也正常可以调用了起来了。
至此问题就解决了,希望我的这篇文章能解决大家的一些问题,