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

官方对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文件在小程序开发工具中是不显示里面具体的详细信息，只有在硬盘中才看的到。

六：引用组件

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

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

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

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

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

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

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