微信小程序 開發(fā)第三方自定義組件

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

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

準(zhǔn)備

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

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

下載模板

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

• 直接從 github 上下載 zip 文件并解壓。
• 直接將 github 上的倉庫 clone 下來。
• 使用官方提供的命令行工具初始化項(xiàng)目，下面會(huì)進(jìn)行介紹。

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

命令行工具

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

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

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

miniprogram init --type custom-component

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

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

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

測試工具

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

自定義組件示例

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

• weui-miniprogram
• recycle-view

自定義組件擴(kuò)展示例

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

• computed