小程序--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就可以了。

七：在應用過一次組件後，再應用其它組件的操作

     從第三步開始，同樣的方式引用其它組件，生成的目錄結構如下