小程序--npm引入第三方组件

最新推荐文章于 2024-09-28 23:13:13 发布

天兰之珠

最新推荐文章于 2024-09-28 23:13:13 发布

阅读量5.3k

点赞数

分类专栏：微信小程序文章标签：小程序 npm安装第三方包 node_modules npm init

本文链接：https://blog.csdn.net/u012693479/article/details/100561666

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官方对npm的使用介绍

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

可能会出现错误，没有node_modules,导致无法引入第三方UI等

在这里插入图片描述

具体正确操作应该是：

一：先新建一个小程序项目

#  在小程序项目的根目录下，按住Shift键点击鼠标右键，选择在在此次打开命令窗口，弹出cmd操作窗口，然后输入下面指令安装组件
npm init

在这里插入图片描述
这样就初始化的npm项目。

二：生成package-lock.json，记录使用的第三方插件

# 接下来生成package-lock.json，记录使用的第三方插件
npm install --production

内容如下

{
  "name": "weixin_coder",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "vant-weapp": {
      "version": "0.4.8",
      "resolved": "http://registry.npm.taobao.org/vant-weapp/download/vant-weapp-0.4.8.tgz",
      "integrity": "sha1-CxF2lWnm8jrP8Qpl+9n4R5BJZS0="
    }
  }
}

三：接着引入第三方组件，如slide-view的引用

https://github.com/wechat-miniprogram/slide-view

安装 slide-view

npm install --save miniprogram-slide-view

执行完后，在项目的根目录下，会出现node_modules的包

四：开启“使用npm模块”

五：然后点击工具 => 构建npm

在这里插入图片描述

node_modules文件在小程序开发工具中是不显示里面具体的详细信息，只有在硬盘中才看的到。

六：引用组件

在需要使用 slide-view 的页面 page.json 中添加 slide-view 自定义组件配置

{
  "usingComponents": {
    "slide-view": "miniprogram-slide-view"
  }
}

对于我们的项目我们改成自己的目录

{
    "usingComponents": {
      "slide-view": "/miniprogram_npm/miniprogram-slide-view/index"
    }
}

然后在WXML 文件中引用 slide-view就可以了。

七：在应用过一次组件后，再应用其它组件的操作

从第三步开始，同样的方式引用其它组件，生成的目录结构如下