微信小程序中通過npm引用第三方插件


本文包含的內容:

  • 安裝npm環境
  • 以weui的搜索插件為例,如何在小程序中使用第三方插件

 

首先附上幾個比較有用的鏈接:

小程序擴展組件使用文檔:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/

weui的 npm的地址:https://www.npmjs.com/package/weui-miniprogram

小程序demo的GitHub鏈接:https://github.com/wechat-miniprogram/miniprogram-demo

 

1、安裝npm環境

npm的全稱是node package manager,主要的作用可以理解為方便使用node js的用戶管理node包,

方便在什么地方呢?主要方便在:安裝、卸載、更新、查看、搜索、發布

我們在下載的時候可以選擇包含npm的node js 包,下載地址:https://nodejs.org/en/download/

下載后依次執行安裝步驟即可,安裝結束后,打開控制台(win+R 輸入cmd 回車)

在控制台中輸入【npm -v】看是否可以顯示出相關信息,如果可以看到說明安裝成功

 

2、在小程序中通過npm使用第三方插件

本次我們使用【weui-miniprogram】中的搜索功能

1、首先創建一個名字叫【package.json】的文件,里面寫的內容是我們要用插件的信息,

然后將這個文件放到根目錄下

 2、打開控制台,將路徑選擇到項目的根路徑(其它位置也可以),執行命令【npm i weui-miniprogram

將文件下載到本地,可以看到多出了一個文件夾【node_modules】

 3、構建npm

在【工具】下選擇構建npm,運行結束后就可以看到多出來的【miniprogram_npm】文件夾

 

 

 4、在想要使用的頁面添加引用

比如我想在index頁面中使用這個搜索框,那么我就需要在index.json中配置如下內容

 

 5、使用這個標簽

在前台頁面直接使用<weui-search>標簽即可使用搜索控件

 


免責聲明!

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



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