微信小程序 npm 找不到npm包 沒有找到可以構建的npm包 如何使用第三方npm組件


微信官方的npm文檔 太模糊了,而且感覺把最重要的東西寫在了最后面,我這里費了老大功夫才知道這個坑。

 

初次使用,首先要初始化  npm

初始化——>   找到 pages 這個文件夾,然后進入這個文件夾的上級目錄  也就是項目的根目錄  在這個根目錄

        使用  npm init -f   初始化命令    -f  表示全部輸入默認值,懶得一個個回車。


初始化之后——>  npm install -production docxtemplater 構建npm項目的配置文件,作用好像是按需加載 ——>這個命令生成了一個xxx.json文件

接着————>  在微信開發者工具中,設置 ——> 項目設置——> 使用npm模塊

再之后主題來了這個后面的步驟是,一次新npm一個第三方npm組件,會用到的

假如我要使用recycle-view長列表npm組件

 

  首先 打開 微信官方文檔 搜索   recycle-view

    從中我們找到了它的npm命令  

    npm install --save miniprogram-recycle-view

 

  找到 pages 這個文件夾,然后進入這個文件夾的上級目錄  也就是項目的目錄。

 

 

 

    在這個目錄右鍵——>在終端中打開,然后使用這個命令 npm install --save miniprogram-recycle-view 才行

 

    

 

    npm完了之后!!!

  在微信開發者工具中, 工具——>構建npm——>當當當當!在pages同級目錄中,你可以找到一個長得像  miniprogram_npm  的文件, 他的下面
  就有了官方文檔中說的 那個東西  miniprogram-recycle-view/recycle-view  和  miniprogram-recycle-view/recycle-item

 

  使用。

    假如我在index頁面使用,那

    index.json中 類似這樣寫:

       "usingComponents": {
        "recycle-view": "../../miniprogram_npm/miniprogram-recycle-view/recycle-view",
        "recycle-item": "../../miniprogram_npm/miniprogram-recycle-view/recycle-item"
      }
 
    index.wxml中
      <recycle-view  balabala的屬性查看官方文檔...... >
        <recycle-item>   盤它   </recycle-item>
      </recycle-view>
總結:——>勾選使用npm模塊
    ——>根目錄
    ——>npm install
     ——>工具  構建npm
    ——>usingComponents:{ /path }
    ——>wxml中使用
注意:這個是在wxml中使用第三方npm組件的大致步驟
  js中使用的步驟嗯,我還沒用到,用到了再寫
 
  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM