# 開發(fā)第三方自定義組件

小程序從基礎(chǔ)庫版本 2.2.1 開始支持使用 npm 安裝第三方包，因此也支持開發(fā)和使用第三方自定義組件包。關(guān)于 npm 功能的詳情可先閱讀相關(guān)文檔。

# 準(zhǔn)備

開發(fā)一個開源的自定義組件包給他人使用，首先需要明確他人是要如何使用這個包的，如果只是拷貝小程序目錄下直接使用的話，可以跳過此文檔。此文檔中后續(xù)內(nèi)容是以 npm 管理自定義組件包的前提下進(jìn)行說明的。

在開發(fā)之前，要求開發(fā)者具有基礎(chǔ)的 node.js 和 npm 相關(guān)的知識，同時需要準(zhǔn)備好支持 npm 功能的開發(fā)者工具，點此下載。

為了方便開發(fā)者能夠快速搭建好一個可用于開發(fā)、調(diào)試、測試的自定義組件包項目，官方提供了一個項目模板，下載使用模板的方式有三種：

項目模板中的構(gòu)建是基于 gulp + webpack 來執(zhí)行的，支持開發(fā)、構(gòu)建、測試等命令，詳情可參閱項目模板的 README.md 文件。

官方提供了命令行工具，用于快速初始化一個項目。執(zhí)行如下命令安裝命令行工具：

npm install -g @wechat-miniprogram/miniprogram-cli

然后新建一個空目錄作為項目根目錄，在此根目錄下執(zhí)行：

miniprogram init --type custom-component

命令執(zhí)行完畢后會發(fā)現(xiàn)項目根目錄下生成了許多文件，這是根據(jù)官方的項目模板生成的完整項目，之后開發(fā)者可直接在此之上進(jìn)行開發(fā)修改。

命令行工具的更多用法可以查看 github 倉庫上的 README.md 文件。

PS：第一次使用 miniprogram init 初始化項目會去 github 上拉取模板，因此需要保證網(wǎng)絡(luò)暢通。

針對自定義組件的單元測試，可參閱文檔單元測試。

以下為官方提供的自定義組件，可以參考并使用：

以下為官方提供的自定義組件擴(kuò)展，可以參考并使用：