建站
咨詢
售后
建站咨詢
新聞中心
開(kāi)發(fā)第三方自定義組件
小程序從基礎(chǔ)庫(kù)版本 2.2.1 開(kāi)始支持使用 npm 安裝第三方包，因此也支持開(kāi)發(fā)和使用第三方自定義組件包。關(guān)于 npm 功能的詳情可先閱讀[相關(guān)文檔]((npm 支持))。
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新和,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
準(zhǔn)備
開(kāi)發(fā)一個(gè)開(kāi)源的自定義組件包給他人使用，首先需要明確他人是要如何使用這個(gè)包的，如果只是拷貝小程序目錄下直接使用的話，可以跳過(guò)此文檔。此文檔中后續(xù)內(nèi)容是以 npm 管理自定義組件包的前提下進(jìn)行說(shuō)明的。
在開(kāi)發(fā)之前，要求開(kāi)發(fā)者具有基礎(chǔ)的 node.js 和 npm 相關(guān)的知識(shí)，同時(shí)需要準(zhǔn)備好支持 npm 功能的開(kāi)發(fā)者工具，點(diǎn)此下載。
下載模板
為了方便開(kāi)發(fā)者能夠快速搭建好一個(gè)可用于開(kāi)發(fā)、調(diào)試、測(cè)試的自定義組件包項(xiàng)目，官方提供了一個(gè)項(xiàng)目模板，下載使用模板的方式有三種：
- 直接從 github 上下載 zip 文件并解壓。
- 直接將 github 上的倉(cāng)庫(kù) clone 下來(lái)。
- 使用官方提供的命令行工具初始化項(xiàng)目，下面會(huì)進(jìn)行介紹。
項(xiàng)目模板中的構(gòu)建是基于 gulp + webpack 來(lái)執(zhí)行的，支持開(kāi)發(fā)、構(gòu)建、測(cè)試等命令，詳情可參閱項(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)目，之后開(kāi)發(fā)者可直接在此之上進(jìn)行開(kāi)發(fā)修改。
命令行工具的更多用法可以查看 github 倉(cāng)庫(kù)上的 README.md 文件。
PS：第一次使用 miniprogram init 初始化項(xiàng)目會(huì)去 github 上拉取模板，因此需要保證網(wǎng)絡(luò)暢通。
測(cè)試工具
針對(duì)自定義組件的單元測(cè)試，可參閱文檔單元測(cè)試。
自定義組件示例
以下為官方提供的自定義組件，可以參考并使用：
- weui-miniprogram
- recycle-view
自定義組件擴(kuò)展示例
以下為官方提供的自定義組件擴(kuò)展，可以參考并使用：
- computed
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序開(kāi)發(fā)第三方自定義組件
文章起源：http://m.fisionsoft.com.cn/article/dphecso.html
