1. 程式人生 > >如何零基礎開發一款微信小程式外掛?

如何零基礎開發一款微信小程式外掛?

  前不久,微信釋放了一個重磅新能力:微信小程式外掛功能。有了它,小程式開發者就可以通過這個功能,強化自身小程式能力;小程式服務提供商也可以用它,為開發者、使用者提供強大的小程式功能支援,進一步拓展小程式能力。如何從零開發一個外掛呢?今天,小豬CMS就來手把手,教你如何從零開發一款微信小程式外掛。

小程式22.jpeg

  一、新建小程式外掛:

  新建外掛的操作非常簡單。只需要在微信開發者工具中新建小程式專案,並選擇「建立外掛快速啟動模板」即可,開發者工具就會自動建立外掛專案。

  需要注意的是,新建專案時,需要確保選擇的專案目錄是空目錄,否則不會顯示「建立外掛快速啟動模板」選項。

  二、小程式外掛目錄結構:

  生成的專案結構主要分為兩大塊,一個是 plugin,一個是 miniprogram。plugin 中放置我們外掛的邏輯程式碼,主要分為 api 和 components 兩個部分; miniprogram 中放置的是外掛的使用示例或者測試示例。

  三、小程式外掛 API 介面開發

  以寫一個返回「hello world!」的介面為例,我們可以在 plugin/api/data.js 中寫下如下程式碼:

開發小程式外掛3.jpg

  在 plugin/index.js 中將我們需要暴露出需要給外掛使用者使用的介面:

開發小程式外掛4.jpg

  然後在 plugin/plugin.json 的配置檔案中,配置外掛的入口,預設如下:

  {

  "main": "index.js"

  }

  然後在 miniprogram 中使用該介面。如在 miniprogram/pages/index/index.js 中使用:

開發小程式外掛5.jpg

  其中 myPlugin 為我們的外掛名,微信預設配置。

  四、小程式外掛元件開發:

  同樣,以寫一個顯示 「hello world!」的元件為例,在 plugin/components 下新建一個 helloWorld 資料夾,點選該資料夾,右鍵生成元件,與普通元件一樣,生成以下四個檔案。

  在 helloWorld.wxml 中編寫檢視程式碼:

  hello world!

  同樣,在 pluginj/plugin.json 中配置需要暴露給外掛使用者使用的元件:

開發小程式外掛7.jpg

  在需要引用到該元件的頁面的配置檔案中,做好配置即可,加入我們要在 index 頁面使用,則需要在 miniprogram/pages/index/index.json 中進行如下配置:

開發小程式外掛8.jpg

  然後再在 miniprogram/pages/index/index.wxml 中使用:

  接下來,我們只需完整開發外掛,然後選擇上傳,最後提交稽核、釋出,其他人就可以使用你的外掛了。