检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在UI编辑页面添加插件 UI编辑插件介绍 如何使用物料插件 如何使用大纲树 如何使用国际化资源插件 如何使用状态管理插件 如何使用资源管理插件 父主题： 使用流程引擎编排流程元模板
中英文切换工具 单击可切换页面中英文显示。 插件栏详细介绍 图3 插件栏 UI编辑器中的左侧插件栏从上至下包括如下功能，单击插件之后会向右展开对应插件的设置面板。 表4 插件栏 图标 名称 物料插件 大纲树插件 国际化插件 页面JS插件 状态管理插件 资源管理插件 导航树栏详细介绍 图4 导航树栏
如何使用国际化资源插件 同一个流程，可能需要同时支持多个语言，流程元模板提供了中英文切换，能够一键切换语言，提升开发效率与开发体验。 国际化资源是应用级别的插件，在任何一个流程元模板的UI编辑页面都可以访问。 国际化只针对流程元模板中的UI编辑页面，不针对流程引擎本身。 新增国际化词条
如何使用物料插件 组件是低代码开发的构建块，就像积木一样。它们是可重复使用的小部件，可以轻松搭建和管理网页。例如，按钮、导航栏和表单都可以是组件。这有助于您快速搭建网站。 下面介绍如何在UI编辑页面使用组件，实现流程页面快速搭建。 物料插件介绍 物料插件分为模板和组件。 模板：由
如何使用资源管理插件 在常规代码开发中，通常会将一些高频率用到的一些代码片段抽离出来业务代码，使其成为一个公共函数，减少重复的代码，从而达到代码复用的目的。 同样，在编排流程元模板中，不可避免地需要编写一些高代码进行组合开发，这里同样存在存储一些公共函数以供各处调用需求。资源管理插件就是在
如何使用状态管理插件 状态管理插件，可添加页面变量（state变量）和添加全局变量（stores变量），供页面及应用使用。 添加页面变量 页面状态下的变量仅适用于当前页面。 登录流程引擎。 在左侧导航栏中，选择“流程编排服务 > 流程元模板”，进入“流程元模板”页面。 在流程元模
调试工具 Vue Devtools是一个专为Vue.js开发者设计的浏览器扩展。它提供了一系列强大的功能，帮助开发者更容易地调试和优化他们的Vue应用程序。 Vue Devtools 以下是Vue Devtools的主要特点和功能： 组件树查看：允许用户查看完整的Vue组件层次结
可以通过打断点，查看Chrome开发面板的sources的call stack，可以查看追溯到源代码的位置，这个特别适合console报错位置不明确的情况（比如报错指向vue.esm.js）。 图2 代码追溯 分析代码 分析代码最常用的就是断点，一步步调试查看结果，定位问题。 断点 直接在代码里Debugger。
在流程元模板所在行，单击，进入流程元模板的编辑模式。 单击“UI编辑”，切换至“UI编辑”页面。 在左侧插件栏中，单击，展开并查看流程元模板交互页面大纲树。 图1 查看大纲树 父主题： 在UI编辑页面添加插件
AUI为内部开源使用，外部无法访问，底层逻辑使用Vue组件暴露封装，因此在不使用AUI情况下，通过原生Vue CLI脚手架搭建组件库形式暴露卡片组件，也能够正常使用。 开发过程 准备工作中已经正常安装了Vue CLI脚手架，因此可以快速搭建Vue项目。 初始化Vue项目。 vue create my-app
使用流程引擎编排流程元模板 在流程编辑页面配置流程工具 设置流程编辑页面的流程工具属性 在数据编辑页面添加数据模型 在UI编辑页面添加插件 为流程元模板定义流程服务编排 父主题： 流程配置指南
布”，工序根据水平方向各工序距离相同重新摆放。 单击“美化”，根据工序顺序号和路由逻辑，工序重新摆放符合一般路线逻辑的位置，路由内容不变（横向和竖向均在同一直线）。 选择工序或路由，单击“删除”，进行删除。 单击“重置”会清空画布上的工序和路由数据。 编辑工艺路线，单击“还原”可恢复编辑前的工艺路线的工序和路由数据。
布”，工序根据水平方向各工序距离相同重新摆放。 单击“美化”，根据工序顺序号和路由逻辑，工序重新摆放符合一般路线逻辑的位置，路由内容不变（横向和竖向均在同一直线）。 选择工序或路由，单击“删除”，进行删除。 单击“重置”会清空画布上的工序和路由数据。 编辑工艺路线，单击“还原”可恢复编辑前的工艺路线的工序和路由数据。
开发流程 编写卡片的工作流程如下： 图1 开发流程 创建一个新的工程目录。 使用Vue CLI脚手架创建Demo前端工程，能够自动创建一个简单的样例工程，在此基础上开发能够减少很多繁琐的工作。 编写构建Vue前端组件。 可以把功能或者需求类似的有机体封装成一个业务组件，并对外暴露接口
为用户任务设置监听器 流程超时处理的核心逻辑是通过设置超时时间，当某个流程节点超过预设时间未完成时，触发超时处理机制，以确保流程的顺利进行和异常情况的及时处理。例如，在工业安灯系统中，如果异常信息在规定时间内未得到处理，系统会自动向上级反馈，确保问题及时解决；在机器人执行加工任务
尽量用最小的代码实现卡片功能，例如： 优先考虑使用公共资源。 使用构建工具对代码进行压缩混淆。 持续重构，改善代码质量。 打包时排除vue、axios。 卡片访问的集成应用服务需要开启https协议。 父主题： 外部无AUI依赖开发示例
轻量化模型卡片 添加轻量化模型卡片 进入IPDCenter基础服务登录页面，输入账号和密码，单击“登录”。 在角色桌面首页，单击自定义桌面页签上的，进入编辑状态。 单击“增加功能卡片”，在卡片列表的常用卡片区域选择“轻量化模型”卡片。 将“轻量化模型”卡片拖拽到角色桌面待添加区域。
如果安装成功，应该可以看到npm的版本号。 安装Vue CLI Vue CLI是Vue.js的脚手架工具，可以帮助我们快速创建Vue.js应用。要使用它，我们需要先安装它。 在命令行中输入以下命令来安装Vue CLI： npm install -g @vue/cli 这个命令会全局安装Vue CLI，所以安装
据，用户可以根据需要删减指标卡片，调整指标卡片位置；系统也可以根据User Profile动态推送内容。 工作原理 组件化开发思想 采用Vue.js的组件化开发思想，将整体功能模块包装成一个个独立且可复用的组件，独立维护自身的状态及样式，更好地隔离多方合作伙伴的不同诉求，提升代码的可维护性。
容器可能销毁，但webcomponent依然可以选择保留，这样等应用切换回来将webcomponent再挂载回容器上，子应用可以获得类似vue的“keep-alive”的能力。 通信机制 承载子应用的“iframe”和主应用是同域的，所以主、子应用天然就可以很好的进行通信，我们提供三种通信方式：
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
