• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序使用npm模块(引入第三方UI),报错的多种解决办法。

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言
引入第三方模块时,我遇到了很多坑。

首先是微信、第三方模块的文档描述不清楚。
其次。搜索到的博客,大部分是抄的文档 / 相互转载抄袭。作用有限。

于是,我自己做了各种条件下的测试。
解决各种情况的引入Npm模块的报错、失败。希望对你有帮助。

下面以引入Vant 小程序版 为例,开始测试。

1、小程序路径在中文目录下

在中文路径下新建项目,引入UI失败。

将中文改为英文,重启项目。

UI显示正确。


2、小程序目录下没有初始化package.json文件
微信的“引入npm模块”文档,第一条就是npm命令。
没有提示,让你初始化package文件。那我们来试下:

看到没有,报错了。提示你没有找到package.json。
我们再看下项目目录,发现多了两个文件。

"vant-weapp"文件夹已经被安装到了node_modules目录下。
但是package.json不存在,没有保存对vant-weapp的引用。


我们尝试在微信开发者工具构架npm。会提示你:

下面我们补上这条命令:

一路回车。再次运行:


终于成功了。请你记住,要在小程序项目刚初始化时。

npm i vant-weapp -S --production
1
在这条命令运行之前,先执行 npm init,初始化package.json。

3、引入npm模块时,使用了cnpm
执行cnpm。没有报错。
node_modules目录下生成了2个文件夹。一个带版本号,一个不带。

在微信开发工具“构建npm”。

我们再检查下小程序的miniprogram_npm目录。发现引入了带版本号的npm模块。

接下来。我们关闭微信开发者工具,把这个文件夹改名为“vant-weapp”。

再次运行:

成功!!

以后安装模块可以直接用npm命令。cnpm,也行,但记得手动重命名,删除文件夹的版本号。

4、其它
其它还有一些失败的原因。
比如:

1、json文件中引用模块时,路径写错。
会导致:

这个路径不要傻傻的按照Vant文档的写:

/path/to/vant-weapp/dist/button/index

应该这么写:

前面不用加“…/”。文件夹一定要对应。

2、使用npm模块未勾选


3、组件化引用文件时。(不用npm引入)
引入的组件依赖于其他的组件。引入不全,导致报错。
但npm安装,是把所有的包下载了。应该没这个问题。

结语
---------------------
作者:黑夜的风
来源:CSDN
原文:https://blog.csdn.net/chanlingmai5374/article/details/84922830
版权声明:本文为博主原创文章,转载请附上博文链接!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
关于小程序(含uniapp)中使用npm模块发布时间:2022-07-18
下一篇:
微信小程序 - 使用npm(第三方包)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap