一篇文章,帶你從 0 到 1 開發小程序插件

知曉程序注:

有了微信小程序插件功能,小程序開發者就可以通過這個功能,強化自身小程序能力;小程序服務提供商也可以用它,爲開發者、用戶提供強大的小程序功能支持,進一步拓展小程序能力。

插件固然好,但如何從零開發一個插件呢?今天,知曉程序就來手把手,教你如何從零開發一款微信小程序插件。

需要注意的是,本推送爲全文節選。關注「知曉程序」微信公衆號,微信後臺回覆「微觀」,瞭解更多行業資訊。

新建插件

新建插件的操作非常簡單。只需要在微信開發者工具中新建小程序項目,並選擇「建立插件快速啓動模板」即可,開發者工具就會自動創建插件項目。

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

插件目錄結構

生成的項目結構主要分爲兩大塊,一個是 plugin,一個是 miniprogram。plugin中放置我們插件的邏輯代碼,主要分爲 api 和 components 兩個部分; miniprogram 中放置的是插件的使用示例或者測試示例。

插件 API 接口開發

以寫一個返回「hello world!」的接口爲例,我們可以在 plugin/api/data.js 中寫下如下代碼:

function sayHelloWorld() {
return 'hello world!'
}

module.exports = {
sayHelloWorld
}
在 plugin/index.js 中將我們需要暴露出需要給插件使用者使用的接口

var data = require('./api/data.js')

module.exports = {
sayHelloWorld: data.sayHelloWorld
}
然後在 plugin/plugin.json 的配置文件中,配置插件的入口,默認如下:

{
"main": "index.js"
}
然後在 miniprogram 中使用該接口。如在 miniprogram/pages/index/index.js 中使用:

var plugin = requirePlugin("myPlugin")
Page({
onLoad: function() {
console.log(plugin.sayHelloWorld())
}
})
其中 myPlugin 爲我們的插件名,微信默認配置。

插件組件開發

同樣,以寫一個顯示 「hello world!」的組件爲例,在 plugin/components 下新建一個 helloWorld 文件夾,點擊該文件夾,右鍵生成組件,與普通組件一樣,生成以下四個文件。

在 helloWorld.wxml 中編寫視圖代碼:

<view>hello world!</view>
同樣,在 pluginj/plugin.json 中配置需要暴露給插件使用者使用的組件:

{
"publicComponents": {

"hello-world": "components/helloWorld/helloWorld"

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

{
"usingComponents": {

"hello-world": "plugin://myPlugin/hello-world"

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

<hello-world/>
接下來,我們只需完整開發插件,然後選擇上傳,最後提交審覈、發佈,其他人就可以使用你的插件了。

「知曉雲」國內首家專注於小程序的後端雲服務,免服務器搭建、免域名備案、免接口開發、免線上運維,讓每一位開發者更快更好的開發小程序。

添加知曉雲官方微信號,瞭解更多內容(minsupport3)。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章