检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', { zh_CN:
propertiesConfig：负责组件配置页面中，右侧的属性配置逻辑。 create（必须配置）：组件内置的扩展，仅在组件首次被创建时调用一次。 registerWidget（必须配置）：注册组件的逻辑实现。 父主题： {widget}.editor.js
{ name: 'tooltip' } ] ], 图1 设置后效果 父主题： {widget}.editor.js
config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}.editor.js
定义桥接器。 registerEvents 注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。 registerAction 用来注册动作，只有通过此API注册后的事件才会在组件的动作列表中展现。 inReader 判断当前页面状态是开发态或预览态。 registerWidget
使用页面模板文件新建页面 使用页面模板文件，构建开发页面，减少重复开发，提高交付效率。创建移动端页面操作和大屏&PC端页面相同，本章节以创建大屏&PC端页面为例进行介绍。 前提条件 已获取对应的页面模板文件，详情请参见下载当前页面。 通过页面模板文件新建页面 参考登录AstroC
发布页面 通过发布功能，无需进入开发页面，即可获取页面的访问地址。 发布页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在待发布的页面上，单击，进行页面发布设置。 发布链接：单击发布链接后的图
复制页面 AstroCanvas支持复制页面，减少重复开发，提高交付效率。 复制页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在待复制的页面上，单击。 在弹出的提示框中，单击“确定”。 输入页面标题，单击“新建”。
页面设置 页面创建后，支持修改页面的标题和描述信息。 设置页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在待修改的页面上，单击。 修改页面标题，单击“更新”。 图1 编辑页面设置 页面标题：
设置全局变量 图4 查看全局变量作用的域 页面开发流程 在AstroCanvas可视化开发页面，通过拖拽组件、设置页面布局、对接业务数据等，即可构建AstroCanvas大屏&PC端/移动端页面，具体流程如图5所示。 图5 页面开发流程 页面设置 配置页面屏幕大小、适应方式、背景颜色或背景
您可以直接使用该页面，也可以根据自身业务的需求进行二次开发。 单击页面上方的，保存页面。 单击页面上方的，预览应用页面。 如果页面预览效果和预期效果不一致，可再次返回开发页面进行调整。 单击页面上方的，进行页面发布设置。 发布链接：单击发布链接后的图标，将显示页面地址，单击该地址进入发布页。
移动页面 通过移动页面，将页面移动到其他文件夹中，便于页面集中管理。 移动页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在对应的页面上，单击，选择“移动”。 选择目标文件夹，单击“确定”。 图1
删除页面 页面删除后，不可恢复，请谨慎操作。 删除页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在待删除的页面上，单击。 在弹出的提示框中，单击“确定”，即可删除该页面。 页面删除后，不可恢复，删除前请确认无需再使用该页面。
的项目页面。 在项目页面，单击“新建页面”。 在新建页面中，单击“新建空白页面”。 输入页面标题，单击“新建”。 页面标题的长度范围为1~100个字符。 拖入组件，根据业务需求开发页面。 页面创建完成后，单击页面上方的，保存页面。 单击页面上方的，预览应用页面。 如果页面预览效果
轮播页面 轮播页面是指通过页面轮播的方式，来实现页面广告的展示。 在大屏设计页面，从“全部组件 > 媒体”中，拖拽“轮播页面”组件至画布空白区域，如图1。 图1 轮播页面 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
在项目列表中，单击页面所在的项目，进入项目。 在所有页面中，单击待下载的页面。 单击“编辑页面”，进入大屏开发页面。 在页面上方工具栏中，单击，即可将当前页面下载到本地。 下载到本地的页面模板文件命名为“当前页面的名称”.page。 图1 将大屏页面保存为页面模板文件 父主题： 页面管理
即可配置组件在页面呈现数据的来源。 图1 配置组件数据 非数据源 桥接器预置 通过桥接器动态调用后台的接口，来获取后台数据展示在页面上，相关配置请参见桥接器预置。 静态数据 选择该方式时，页面会获取“输入数据”中的静态数据展示在页面上，详情请参见静态数据。 AstroCanva
e”）绑定页面级的全局变量（如“status”）。 图1 事件输出参数绑定全局变量 实现逻辑 自定义组件开发过程如下，也可以直接单击下载链接，获取自定义组件示例包“SelectWidget.zip”。 在组件的“global_SelectWidget.editor.js”文件中，新增eventConfig配置。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
