检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。参考消费者业务网站（如图1所示），页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
图文展示 图文展示组件是系统提供的富文本呈现功能Web组件。 在表单开发页面，从“通用组件”中，拖拽“图文展示”组件至表单设计区域，如图1。 图1 图文展示 显示名称：页面标题内容，可以设置为中文，也可以设置为英文。 内容：单击“编辑”，可设置富文本内容。
场景描述 本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。标签切换效果如图1所示，页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
折线图 折线图组件实现折线图样式数据报表统计。在报表编辑页面，拖拽“折线图”组件到中间区域，右侧可设置组件属性。 图1 折线图 显示名称：该组件在页面呈现给用户的名称，可以设置为中文，也可以设置为英文。 数据 维度：选择字段作为维度字段。单击，可设置维度排序方式（如升序、倒序等）和维度名称相同时是否合并
这些公式可以使用Flow对变量或表达式进行转换，然后赋值给其他变量。
富文本 富文本组件为升级版的文本的输入，支持填写图文并茂的内容。 在表单开发页面，从“数据组件”中，拖拽“富文本”组件至表单设计区域，如图1。 图1 富文本 显示名称：该组件在页面呈现给用户的名称，可以设置为中文，也可以设置为英文。
图2 基本折线图效果图 参考配色模板：系统提供了三种可选基本折线图模板，单击即可切换样式。可选择某一模板重置，也可通过设置各配置项得到想要的效果。 数据系列：对每个数据系列（折线颜色、折线宽度、折线透明度、拐点颜色，区域颜色、最大值最小值标注和平均值标线等）进行一系列配置。
图3 基本折线图效果图 参考配色模板：系统提供了三种可选基本折线图模板，单击即可切换样式。可选择某一模板重置，也可通过设置各配置项得到想要的效果。 数据系列：对每个数据系列（折线颜色、折线宽度、折线透明度、拐点颜色，区域颜色、最大值最小值标注和平均值标线等）进行一系列配置。
扩展组件：存放用户自定义的组件，自定义组件由用户在线下开发完成并上传到AstroZero，用于丰富页面组件的功能。自定义组件开发过程及上传方法，请参考创建自定义标准组件。
切换版本。 代码编辑区域 在该区域开发代码，实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力，更多介绍请参见提供AI代码补全功能。
若为公共接口，支持查看接口参数并进行在线测试。若为私有接口，只可查看接口的入参和出参。 图2 公共接口 图3 私有接口 单击接口URL后的，可查看接口的参数。 若为公共接口，单击“测试一下”，填写输入参数，单击“执行”，可运行该接口。返回成功响应，表示接口调用成功。
模块在执行子流程时，会切换为子流程的类型和名称。 如果不符合预期，则重新返回工作流修改，重复执行4。 常见错误 变量赋值错误？ 请检查输入参数的类型与定义是否匹配，必要时进行类型转换。 变量结构错误？ 请检查输入参数的结构（属性名、取值类型）与目标结构是否一致。
在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。
若为公共接口，支持查看接口参数并进行在线测试。若为私有接口，只可查看接口的入参和出参。 单击接口URL后的，可查看接口的参数。 若为公共接口，单击“测试一下”，填写输入参数，单击“执行”，可运行该接口。返回成功响应，表示接口调用成功。
切换版本。 代码编辑器 在该区域开发代码，实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力，更多介绍请参见AI代码补全功能。
在版本操作列可切换脚本版本、运行或删除脚本。 父主题： 管理AstroZero中已安装应用的资源
模块在执行子流程时，会切换为子流程的类型和名称。 若不符合预期，则重新返回BPM修改，重复 2 。 常见错误 变量赋值错误？ 请检查输入参数的类型与定义是否匹配，必要时进行类型转换。 变量结构错误？ 请检查输入参数的结构（属性名、取值类型）与目标结构是否一致。
业务用户登录页前台开发实施步骤 业务用户在前台登录时，需要先在线下开发一个登录组件，上传到高级页面，并在高级页面中配置组件桥接器中的数据。最后在页面中，输入登录账号密码，通过调用“用户登录服务编排”，实现“业务用户”页面登录功能。
目前Rest服务支持配置P12和CRT格式的证书，其他格式需要通过keytool或openssl工具转换。 操作步骤 参考登录经典应用设计器中操作，登录经典版应用设计器。 在左侧列表中，单击，选择“HTTP > Rest服务”。 在新建或修改Rest服务时，设置鉴权信息。
请求参数 上传的文件应转换为流传入，无其他参数。 响应参数 表2 响应参数 参数 参数类型 描述 resCode String 参数解释： 返回码。 取值范围： 如果返回“0”代表请求成功，其他错误码说明请参考错误码。 resMsg String 参数解释： 返回消息。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
