實戰(zhàn)CloudIDE插件開發(fā)-前后端方法互相調(diào)用

通過實戰(zhàn)CloudIDE插件開發(fā)-調(diào)試代碼我們詳細介紹了插件代碼的調(diào)試方法，今天我們將用一個簡單的功能示例繼續(xù)深入到插件開發(fā)的細節(jié)。本次插件代碼項目是通過CloudIDE的新建項目創(chuàng)建的Generic類型插件，就是具備前端獨立頁面和IDE后端運行時的插件，具體的創(chuàng)建步驟可以參考實戰(zhàn)CloudIDE插件開發(fā)-快速上手，對于Backend類型的純后端插件，可以使用CloudIDE已有的界面擴展點來實現(xiàn)前端功能，具體可以參考我們的API文檔，由于Generic類型的插件本身包含后端能力，后續(xù)的教程中將不再對純后端的插件進行過多介紹。

準備工作

已經(jīng)創(chuàng)建并處于運行狀態(tài)的CloudIDE實例，CloudIDE創(chuàng)建方法可以參考《5分鐘創(chuàng)建并啟動IDE實例》

本次插件示例代碼：https://github.com/HuaweiIDE/cloudide-example-expose-api.git，可以通過文件->導入項目將代碼導入到CloudIDE中。

新建終端并執(zhí)行npm i安裝依賴。

后端調(diào)用前端

插件目錄的詳細介紹可以參考? 《Directory Structures of Plugin Project》

在前端定義暴露給后端的的方法。

打開src/browser/frontend.ts文件，我們可以看到Frontend類繼承自AbstractFrontend，默認需要實現(xiàn)init(), run(), stop()這三個方法，另外我們自定義了一個myApi(message: string)方法，如果我們想把這個運行在瀏覽器中的myApi方法暴露給后端去調(diào)用，我們只需要在函數(shù)上添加@expose('function_id')修飾器，注意多個expose修飾器中的function_id不要重復使用

import { LogLevel, WebviewOptions } from '@cloudide/core/lib/common/plugin-common'; import { PluginPage, AbstractFrontend } from '@cloudide/core/lib/browser/plugin-api'; import { exposable, expose } from '@cloudide/messaging'; /** * Adding your fronted api in this class * Using '@expose' to expose your function to backend */ @exposable class Frontend extends AbstractFrontend { /** * function call to the frontend will wait until init() to be resolved */ async init(): Promise { } /** * Entry of your plugin frontend * In this function your can call function exposed by backend */ run(): void { const myViewOptions: WebviewOptions = { viewType: 'my-webview', title: '%plugin.dynamicview.title%', targetArea: 'main', iconPath: 'resources/icons/plugin.svg', viewUrl: 'local:resources/page/dynamic-webview.ejs', preserveFocus: true, templateEngine: 'ejs' }; this.plugin.createDynamicWebview(myViewOptions, true); document.getElementById('call-print-on-dynamic-webview')?.addEventListener('click', evt => { //call function exposed on dynamic webview this.plugin.call('my-webview::myplugin.dynamic.page.print', 'param of function call from plugin main page'); }); document.getElementById('call-createNewFile-on-backend')?.addEventListener('click', evt => { //call function exposed on backend this.plugin.call('backend::createNewFile', 'untitled.txt').then((filePath) => { this.plugin.call('cloudide.window.showInformationMessage', `${filePath} created.`); }); }); } stop(): void { } /** * this function can be called from plugin backend as below: * @example * ``` * plugin.call('myplugin.page.myApi', 'this is a function call from backend').then(ret => { * console.log(ret); * }); * * ``` */ @expose('myplugin.page.myApi') public myApi(message: string) { const messageDom = document.createElement('div'); messageDom.append(document.createTextNode(`myApi called, param: ${message}`)); document.body.appendChild(messageDom); } } document.addEventListener('DOMContentLoaded', function() { PluginPage.create([Frontend]); });

在后端調(diào)用前端暴露的方法

打開src/node目錄下的backend.ts，我們可以看到Backend類繼承自AbstractBacend，默認需要實現(xiàn)init(), run(), stop()這三個方法，我們可以在run()方法中通過this.plugin.call()調(diào)用在前端定義的myAPI方法并獲取到返回值。

import * as cloudide from '@cloudide/plugin'; import { exposable, expose } from '@cloudide/messaging'; import { LogLevel } from '@cloudide/core/lib/common/plugin-common'; import { AbstractBackend } from '@cloudide/core/lib/node/plugin-api'; /** * Add your backend api in this class * Using '@expose' to expose your function to frontend */ @exposable export class Backend extends AbstractBackend { /** * function call to the backend will wait until init() to be resolved */ async init(): Promise { } /** * Entry of your plugin backend * In this function you can call function exposed by frontend */ public async run(): Promise { const retValue = await this.plugin.call('myplugin.page.myApi', 'this is a function call from backend'); this.plugin.log(LogLevel.INFO, retValue); } public stop(): void { } /** * this function can be called from plugin frontend as below: * @example * ``` * plugin.call('your_backend_function_identifier', 'world').then(ret => { * console.log(ret); * }); * * ``` */ @expose('createNewFile') public async createNewFile(name: string) { const edit = new cloudide.WorkspaceEdit(); let absPath = name; if (cloudide.workspace.workspaceFolders) { const filePath = cloudide.Uri.file(`${cloudide.workspace.workspaceFolders[0].uri.fsPath}/${name}`); edit.createFile(filePath); cloudide.workspace.applyEdit(edit); absPath = filePath.path; } return absPath; } }

同樣，我們可以在后端定義自己的方法并將方法暴露給前端調(diào)用，大家可以運行樣例插件的代碼測試下效果，也可以嘗試自己添加想要的方法實現(xiàn)前后端的調(diào)用。插件調(diào)試運行可以參考《實戰(zhàn)CloudIDE插件開發(fā)-調(diào)試代碼》

CloudIDE TypeScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。