1. 程式人生 > >微信小程序使用npm安裝包

微信小程序使用npm安裝包

工具 ram spa 演示 tools mod html nts 接下來

小程序現在支持直接通過npm安裝包了,點擊這裏了解更多。

記錄一下我自己的安裝步驟及安裝過程中遇到的一些問題。希望能夠幫助到正在閱讀此篇文章的你~

我就直接通過在項目根目錄安裝miniprogram-datepicker做演示了。

1.在項目根目錄下面新建文件夾:node_modules。

技術分享圖片

2.終端進入到node_modules文件夾所在的目錄

(註意不是node_modules文件夾裏面),在此例中就是根目錄了。

執行:

cnpm i miniprogram-datepicker -S --production

我這裏做了淘寶鏡像映射,所以用的cnpm,如果沒有做該映射,你就用npm。

技術分享圖片

3.安裝好之後,勾選 “使用npm模塊”

技術分享圖片

4.點擊開發者工具中的菜單欄:工具 --> 構建 npm

技術分享圖片

這一步完成之後你會看到跟node_modules同級多了一個文件夾 miniporgram_npm

技術分享圖片

5.直接引用該模塊了

因為這個是自定義組件,所以我們在需要使用 datepicker 的頁面page.json中添加 datepicker 自定義組件配置:

{
  "usingComponents": {
    "datepicker": "miniprogram-datepicker"
  }
}

我們還可以通過js引入npm包

const myPackage = require(‘packageName‘) //
方法一 import { myPackage} from ‘packageName‘ //方法二

然而。。。。。

我發現我引用的時候報錯。。。。

技術分享圖片

這個問題我還未解決。。。如果有知道解決方案的,望告知。不甚感激~

官方有文檔如下:

技術分享圖片

所以我覺得它應該會自己找這個模塊,一直到根目錄。但是事實沒有,我不知道是不是我理解錯了。。。

接下來說下遇到的問題:

1.node_modules文件夾需要自己創建。

2.執行上面第4步,也就是 構建npm 的時候一直提示 找不到node_modules模塊。

原因:

沒有package.json文件。

解決方法:

在安裝npm包的時候,需要用到 -S

,完整的命令語句是 npm install 安裝包名字 -S --production。

經測試發現,如果沒有添加-S就不會生成package.json文件。官方有文檔如下:

技術分享圖片

微信小程序使用npm安裝包