本文包含的內容:
- 安裝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>標簽即可使用搜索控件