网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
计算
弹性云服务器 ECS
Flexus云服务
裸金属服务器 BMS
云手机服务器 CPH
专属主机 DeH
弹性伸缩 AS
镜像服务 IMS
函数工作流 FunctionGraph
云耀云服务器(旧版)
VR云渲游平台 CVR
Huawei Cloud EulerOS
云化数据中心 CloudDC
网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
CDN与智能边缘
内容分发网络 CDN
智能边缘云 IEC
智能边缘平台 IEF
CloudPond云服务
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
大数据
MapReduce服务 MRS
数据湖探索 DLI
表格存储服务 CloudTable
可信智能计算服务 TICS
推荐系统 RES
云搜索服务 CSS
数据可视化 DLV
数据接入服务 DIS
数据仓库服务 GaussDB(DWS)
数据治理中心 DataArts Studio
湖仓构建 LakeFormation
智能数据洞察 DataArts Insight
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
开天aPaaS
应用平台 AppStage
开天企业工作台 MSSE
开天集成工作台 MSSI
API中心 API Hub
云消息服务 KooMessage
交换数据空间 EDS
云地图服务 KooMap
云手机服务 KooPhone
组织成员账号 OrgID
云空间服务 KooDrive
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
区块链
区块链服务 BCS
数字资产链 DAC
华为云区块链引擎服务 HBS
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
价格
成本优化最佳实践
专属云商业逻辑
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
其他
管理控制台
消息中心
产品价格详情
系统权限
客户关联华为云合作伙伴须知
公共问题
宽限期保留期
奖励推广计划
活动
云服务信任体系能力说明
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
存储
对象存储服务 OBS
云硬盘 EVS
云备份 CBR
高性能弹性文件服务 SFS Turbo
弹性文件服务 SFS
存储容灾服务 SDRS
云硬盘备份 VBS
云服务器备份 CSBS
数据快递服务 DES
云存储网关 CSG
专属分布式存储服务 DSS
数据工坊 DWR
地图数据 MapDS
键值存储服务 KVS
容器
云容器引擎 CCE
云容器实例 CCI
容器镜像服务 SWR
云原生服务中心 OSC
应用服务网格 ASM
华为云UCS
数据库
云数据库 RDS
数据复制服务 DRS
文档数据库服务 DDS
分布式数据库中间件 DDM
云数据库 GaussDB
云数据库 GeminiDB
数据管理服务 DAS
数据库和应用迁移 UGO
云数据库 TaurusDB
人工智能
AI开发平台ModelArts
华为HiLens
图引擎服务 GES
图像识别 Image
文字识别 OCR
自然语言处理 NLP
内容审核 Moderation
图像搜索 ImageSearch
医疗智能体 EIHealth
企业级AI应用开发专业套件 ModelArts Pro
人脸识别服务 FRS
对话机器人服务 CBS
语音交互服务 SIS
人证核身服务 IVS
视频智能分析服务 VIAS
城市智能体
自动驾驶云服务 Octopus
盘古大模型 PanguLargeModels
IoT物联网
设备接入 IoTDA
全球SIM联接 GSL
IoT数据分析 IoTA
路网数字化服务 DRIS
IoT边缘 IoTEdge
设备发放 IoTDP
企业应用
域名注册服务 Domains
云解析服务 DNS
企业门户 EWP
ICP备案
商标注册
华为云WeLink
华为云会议 Meeting
隐私保护通话 PrivateNumber
语音通话 VoiceCall
消息&短信 MSGSMS
云管理网络
SD-WAN 云服务
边缘数据中心管理 EDCM
云桌面 Workspace
应用与数据集成平台 ROMA Connect
ROMA资产中心 ROMA Exchange
API全生命周期管理 ROMA API
政企自服务管理 ESM
视频
实时音视频 SparkRTC
视频直播 Live
视频点播 VOD
媒体处理 MPC
视频接入服务 VIS
数字内容生产线 MetaStudio
迁移
主机迁移服务 SMS
对象存储迁移服务 OMS
云数据迁移 CDM
迁移中心 MGC
专属云
专属计算集群 DCC
开发者工具
SDK开发指南
API签名指南
DevStar
华为云命令行工具服务 KooCLI
Huawei Cloud Toolkit
CodeArts API
云化转型
云架构中心
云采用框架
用户服务
账号中心
费用中心
成本中心
资源中心
企业管理
工单管理
客户运营能力
国际站常见问题
支持计划
专业服务
合作伙伴支持计划
我的凭证
华为云公共事业服务云平台
工业软件
工业数字模型驱动引擎
硬件开发工具链平台云服务
工业数据转换引擎云服务

插件开发

更新时间:2024-04-12 GMT+08:00
分享

安装环境

在开始插件开发之前,请检查是否已安装 Node.js 16.10.0 或以上版本 (https://nodejs.org/en/)。若已安装,可在本地CMD或CodeArts IDE终端使用命令行 node -v 以及 npm -v 查看相应的安装版本。

插件创建

  1. 打开 CodeArts IDE,单击菜单“文件 ->新建 ->工程...”,选择“扩展”。

    • 类型:“简单扩展”不包含后端模板,“支持可展示的Webview以及弹窗的扩展”以及“支持注册创建项目向导的扩展”包含前端和后端的模板。
    • 发布商:发布商必须为插件市场中已创建的发布商,否则将无法在插件市场上发布插件,也可在发布前在已创建扩展工程中的 package.json 文件中修改"publisher"字段。

  2. 单击“创建”,等待插件工程创建完成,选择是否在当前窗口打开新建的插件工程。

插件调试与运行

后端调试

在插件的 src/node/ 目录下存放的是插件的后端代码,后端代码运行在 nodejs 环境中,插件工程在创建的时候已经默认生成了一个后端文件 backend.ts,对于轻量级的插件,只需要在该文件中添加自己想要实现的业务功能即可,该文件包含了三个默认的方法 init()、run()、stop()。另外还默认添加了一个 doSomething 方法,这个方法仅仅是作为示例使用,开发者可以根据需要进行修改或删除。

这里我们简单介绍下init,run和stop方法:

  • init 函数:作为该后端实例的初始化方法,可以在插件启动的时候进行一些初始化操作,写在该函数中的代码一定会先于 run 和其他函数被调用,这里需要注意的是,对于前端暴露给后端的函数不能在 init 函数中进行调用,也就是不能在 init 方法中执行 this.plugin.call 调用。
  • run 函数:作为后端实例的主逻辑函数,承担着业务功能入口的作用,在该函数中可以方便地调用 CodeArts IDE 的 API,比如 codearts.window.showInformationMessage(`hello world!`); 也可以调用前端暴露出来的函数,也就是可以在该方法中执行 this.plugin.call 调用。
  • stop 函数:将会在插件被停止前被调用,如有需要可以进行一些资源清理的操作。
  1. 添加断点:在backend.ts 的 run() 函数中添加一个断点。

  2. 打开调试窗口:按 F5 或者单击右上角调试工具栏中的开始调试按钮,打开【扩展开发宿主】窗口。

  3. 进入断点,进行调试。

前端调试

与插件的后端不同,前端的代码最终将被编译并运行于浏览器环境中,前端的代码存放于 src/browser 目录中,插件工程在创建的时候会默认生成两个前端源码文件 frontend.ts 和 dynamic-webview.ts。这两个文件的内容与后端 backend.ts 的结构非常相似,只不过运行的环境不同而已,这里就不再重复对这两个文件中 init()、run()、stop() 方法进行介绍。由于前端运行在浏览器环境中,代码调试将借助于浏览器自带的调试功能。如果需要自动重新编译前端代码,可以在终端中执行命令 npm run watch-browser,然后再运行调试。在启动调试后如果修改了代码,只需在调试窗口按 Ctrl+R 重新加载窗口即可看到修改后的效果。

  1. 前端调试前,需要先把 webpack.config.js 文件中的 devtool 配置为 'inline-source-map',然后在命令行执行 npm run prepare。

  2. 添加断点:在 frontend.ts 的 run() 函数中添加一个断点。
  3. 打开调试窗口:按 F5 或者单击右上角调试工具栏中的开始调试按钮,打开【扩展开发宿主】窗口。

  4. 打开插件注册的视图,进入断点,进行前端的调试,若无法进入断点,可以使用“Ctrl + Shift + I”打开“开发人员工具”,再“Ctrl + R”重新加载当前窗口。

前后端方法相互调用

后端调用前端

  1. 在前端定义暴露给后端的方法

    打开 src/browser/frontend.ts 文件,其中 Frontend 类继承自 AbstractFrontend,除了需要实现的 init()、run()、stop() 这三个方法,我们自定义了一个 myApi(message: string) 方法,如果想要把 myApi 方法暴露给后端去调用,只需要在函数上添加 @expose('function_id') 修饰器。

    注意:多个expose修饰器中的function_id不能重复

    @expose('myplugin.page.myApi')public myApi(message: string): string {
        console.log(message);
        return 'this is a return value from frontend function';
    }
  2. 在后端调用前端暴露的方法

    打开 src/node/backend.ts 文件,其中 Backend 类继承自 AbstractBacend,需要实现 init(), run(), stop() 这三个方法,我们可以在 run() 方法中通过 this.plugin.call() 调用在前端定义的 myApi 方法并获取到返回值。

    public async run(): Promise<void> {
        const retValue = await this.plugin.call('view_type_of_your_plugin_view::myplugin.page.myApi', 'this is a function call from backend');
        this.plugin.log(LogLevel.INFO, retValue);
    }

前端调用后端

类似的,我们可以在后端定义自己的方法并将方法暴露给前端调用。

  1. 在后端定义暴露给前端的方法

    打开 src/node/backend.ts 文件,自定义一个 doSomething(name: string) 方法。

    @expose('your_backend_function_identifier')public doSomething(name: string): boolean {
        codearts.window.showInformationMessage(`hello ${name}!`);
        return true;
    }
  2. 在前端调用后端暴露的方法

    打开 src/browser/frontend.ts 文件,在 run() 方法中通过 this.plugin.call() 调用在后端定义的 doSomething 方法。

    run(): void {
        this.plugin.call('your_backend_function_identifier', 'world');
    }

事件订阅:发布和监听事件

  1. 在插件后端监听事件
    打开 src/node 目录下的 backend.ts 文件,在 Backend 类的 run() 方法中我们添加如下代码注册监听一个文件删除的事件。
    const registeredEvent = codearts.workspace.onDidDeleteFiles((event) => {
         codearts.window.showInformationMessage(`${event.files.join(',')} deleted.`);
    });
    this.plugin.context.subscriptions.push(registeredEvent);

    如果想要删除这个事件的监听可以直接调用 registeredEvent 的 dispose() 方法即可。

    大家可以尝试注册一些其他的事件并测试效果。

  2. 在插件前端监听事件

    打开 src/browser 下的 fronted.ts 文件,我们通过在 Frontend 类的 run() 方法中添加如下代码注册监听一个改变当前活动的编辑器的事件。

    const eventHandler = (eventType: any, evt: any) => {
        // do something
    };
    this.plugin.subscribeEvent(EventType.WINDOW_ONDIDCHANGEACTIVETEXTEDITOR, eventHandler);

    前端取消事件注册的方式和后端并不相同,我们需要使用 plugin 对象的 unsubscribeEvent 方法取消注册的事件处理句柄。

    this.plugin.unsubscribeEvent(EventType.WINDOW_ONDIDCHANGEACTIVETEXTEDITOR, eventHandler);

国际化

插件创建完后,在根目录下默认生成了 package.nls.json 和 package.nls.zh-cn.json 文件,package.nls.json 文件用来记录默认情况下的翻译词条,比如没有找到对应语言的翻译文件插件框架将默认采用该文件中的词条。package.nls.zh-cn.json 则是中文简体的翻译词条文件,如果插件需要支持其他语言也可以自行添加翻译文件。

localize 方法需要提供了一个 key 参数来指定使用国际化文件中的词条索引键值,后续的不定参数用来对翻译词条中的占位符进行替换,词条中支持使用"{0} {1} {2}"这样的格式进行占位,localize 方法的第二个参数开始会被依次替换到占位符中。

localize(key: string, ...args: any[]): string;

示例如下:

{
    "plugin.welcome": "Welcome!",
    "plugin.hello": "Hello {0}!"
}
  1. 内置成员plugin的localize方法
    我们还在前后端内置的 plugin 成员变量中实现了 localize 方法。Frontend类 (src/browser/fronted.ts) 和 Backend类 (src/browser/backend.ts) 分别继承了 AbstractFrontend 前端类和 AbstractBackend 后端类,可以直接使用 this.plugin.localize 方法进行本地化翻译。
    // 不带参数
    this.plugin.localize('plugin.welcome');
    // 带参数
    this.plugin.localize('plugin.hello', 'world');
  2. 直接引入localize方法
    import { localize } from '@cloudide/nls';

    使用如下代码就可以将词条填充为: Hello World!

    localize('plugin.hello', 'World');
  3. 页面文件中的国际化方法

    通用插件可以使用 ejs 和 pug 引擎来渲染界面,无论是 ejs 还是 pug 引擎插件框架都为开发者提供了一个 l10n 内置对象,里面存储了当前所选语言的翻译词条列表。

    对于选择 ejs 引擎来做界面渲染的开发者可以在 ejs 文件中使用如下方式来对需要本地化的文案进行翻译:

    <%= l10n['plugin.hello'] %>

    对于使用 pug 引擎的开发者可以使用如下方式:

    #{l10n['plugin.hello']}
提示

您即将访问非华为云网站,请注意账号财产安全

文档反馈

文档反馈

意见反馈

0/500

标记内容

同时提交标记内容