如何開發小程式插件?

青灯夜游
發布: 2021-05-11 09:58:57
轉載
3803 人瀏覽過

如何開發小程式外掛?以下這篇文章為大家介紹一下微信小程式的開發使用教學。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

如何開發小程式插件?

近期,微信小程式發布了重大功能更新,支援外掛程式的使用和開發。消息一出,小程式開發者蜂擁而至,開始專研插件開發,不久後會有一批優質服務的插件上線是可以預見的。從開發者的角度來看,最關心的問題是怎麼開發微信小程式外掛程式,首先需要對小程式外掛程式了解。

什麼是微信小程式外掛?

外掛一組由js和自訂元件封裝的程式碼庫,外掛程式無法單獨使用、也無法預覽,必須被其他小程式套用嵌入,才能使用。它和NPM的依賴、Maven的依賴函式庫是一個道理。

不過,外掛程式和NPM、Maven依賴管理不同的是:外掛程式擁有獨立的API介面和網域列表,不被小程式本身的網域列表限制。 (NPM依賴進來的庫不能進行第三方資料請求);插件必須由騰訊審核通過才能使用(NPM無需騰訊審核);使用第三方插件必須向第三方申請(透過NPM使用第三方庫無需向第三方申請)。所以在未來,插件或許會被第三方打包成為服務,而不只是一個程式碼庫。

如何開發微信小程式外掛?

下載最新的微信小程式開發者工具,開啟開發者工具,進入小程式專案。

如何開發小程式插件?

點擊,右下角的「建立」 按鈕,就可以建立外掛了,

如何開發小程式插件?

##外掛程式的AppId和之前的微信小程式的AppId是同一個道理,需要在微信開發者後台新建一個微信小程式外掛:

如何開發小程式插件?

如何開發小程式插件?

微信小程式插件的名稱也必須是獨一無二的,申請完畢後就可以獲得插件的AppId了。填寫名稱和外掛程式AppID後,就可以進入小程式專案。

在檔案 project.config.json 中,我們看到程式碼如下:

{
    miniprogramRoot:./miniprogram,
    pluginRoot:./plugin,
    compileType:plugin,
    setting: {
        newFeature: true
    },
    appid: .....,
    projectname:videoPlayer,
    condition: {}
}
登入後複製

miniprogramRoot:設定小程式的根目錄,可以使用小程式來測試編寫的外掛程式

pluginRoot:外掛程式相關程式碼所在的根目錄

compileType:專案的編譯類型,必須設定為 plugin,上傳程式碼的時候才會以外掛程式的方式上傳到騰訊伺服器。

在 plugin/plugin.json 檔案中,程式碼如下:

{
  publicComponents: {
    hgPlayer:components/player/player
  },
  main: index.js
}
登入後複製

publicComponents:設定的是外掛程式可以給使用的小程式提供哪些元件,一個外掛程式可以定義很多元件,元件和元件之間互相引用,但是小程式只能使用在publicComponents裡配置的元件。

main:定義入口文件,在入口文件 index.js 中定義小程式可以使用外掛程式的那些介面。

在 plugin/index.js 檔案中,程式碼如下:

var data =require(\'./api/data.js\')
module.exports= {
  getData: data.getData,
  setData: data.setData
}
登入後複製

在 plugin/index.js 定義了外部拋出介面為 getData 和 setData,小程式在使用此外掛程式的時候,只能使用到插件提供的這兩個接口,插件的其他接口(或方法)小程式無法使用。

做好以上設定後,就可以開始在 plugin/components 寫元件程式碼了。

程式碼寫完畢後,注意在 plugin/plugin.json 檔案設定。配置好後,我就可以上傳插件程式碼到騰訊伺服器,進入微信小程式開發者後台提交審核,騰訊審核通過後,第三方小程式就可以使用我們寫的這個插件了。

如何使用第三方外掛程式

使用第三方外掛程式之前,需要進入微信小程式開發者後台,在第三方服務中加入外掛程式:

如何開發小程式插件?

如何開發小程式插件?

填寫第三方外掛程式的AppId,點選新增按鈕,對方帳號的小程式外掛程式 > 申請管理會出現你的申請,

如何開發小程式插件?

需要第三方同意你的申請後,你就可以開始使用第三方外掛程式了。

使用第三方外掛程式的時候,需要在 我們自己的小程式的 app.json 做以下設定:

{
  pages: [
    pages/index/index
  ],
  plugins: {
    myPlugin: {
      version: dev,
      provider: 填写申请通过的插件AppId
    }
 }
}
登入後複製

plugins: 配置的要使用的第三方插件列表。

插件列表配置好后,由于每个插件可能会有多个组件,所以需要我们在每个页面定义要使用到的组件,例如,在 index.js 中要使用 hgPlayer 这个组件,需要在 index.json 配置。配置好 index.json 后,就可以在 index.wxml 直接使用了。

推荐:《小程序开发教程

以上是如何開發小程式插件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jisuapp.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!