检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
flt:组件DOM结构文件,需要在服务端提前渲染的部分可以写在此文件中,相当于HTML文件,负责样式展示。 {widget}.js:组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。 父主题: 代码结构介绍
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
桥接器模板 桥接器为连接前台页面和后台数据的连接器。在进行前台页面开发时,经常要调用后台数据,例如购物车中用户的ID,订单编号,商品信息等,这时需要通过桥接器动态调用后台接口获取后台数据。通过AstroCanvas预置的桥接器模板,您可以自定义桥接器。自定义桥接器时,需要先下载桥
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
HttpUtils.getCookie:用于获取某个cookie的值。 代码示例:HttpUtils.getCookie() HttpUtils.setCookie:用于设置cookie的值。 代码示例:HttpUtils.setCookie("key","value") HttpUtils
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件,相当于HTML文件,负责样式展示。 在AstroCanvas中自定义组件时,需要在服务端提前渲染的部分,可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
name:'zhangsan'}]。某些场景假如只需要一个简单值val,可以设置组件桩数据设置为简单二维对象数组[{val:123}]。 - 文件示例 通用的组件核心代码 var EchartsWidgetTemplate = StudioWidgetWrapper.extend({ /* * 组件初始化入口API
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件,负责组件编辑状态时需要渲染的界面和逻辑。其中,“{widget}”为自定义组件的名称,如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
classfication 字段介绍 classfication字段代表的是当前组件需要展示哪些大的配置项分类。AstroCanvas在设计前期对分类也进行了分组,因此这个字段被扩展为双数组形式。一般默认情况下,直接在数组对象的第一个数组中配置即可。如果无配置,则所有属性展示在一个大的分类下。
可以像示例这样获取到组件对象,然后编写js代码 * 示例中表示,触发当前事件后,会隐藏组件widget16 * 帮助文档:https://support.huaweicloud.com/usermanualcanvas-astrozero/astrozero_05_7025.html * 可以直接使用的参数
我是新用户 新用户购买AstroCanvas实例后,可从Astro轻应用控制台登录AstroCanvas界面。 使用华为账号,登录华为云网站,在顶部导航栏右侧单击“控制台”,进入华为云控制台。 单击管理控制台左上角的,展开服务列表,选择“开发与运维 > Astro轻应用(原Ap
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件,用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
i18n.json 文件介绍 i18n.json为组件的国际化资源文件,用于配置多语言,目前支持的多语言包含中英文两种,相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中,在packageinfo.json中的配置示例如下: "i18n":
SafeUtils安全工具类预置API一览表 API API说明 escapeHtml() 将HTML字符串进行转义。 getSafeUrl() 对外部链接进行xss安全过滤,获取安全的绝对URL地址。 escapeHtml() 对HTML字符串进行转义,获取转义后的字符串供页面显示用,使用方式参考如下: /*
初始化代码块、实例化代码块、自定义事件和自定义动作。 图4 代码设置 初始化代码块:初始化代码块输入框是一个javascript的执行环境,该执行环境的目的是调用echarts的init方法创建实例,此处可配置初始化相关的操作,包括echarts的主题等。 图5 初始化代码块 单
}); clickSeries对象中,“desc”是对事件selectItem的解释。“fields”为组件对外暴露的字段及相应描述。相应代码要在{widget}.js中实现如下: this.echartsInst.on('click', 'series', (event) =>
propertiesConfig 字段介绍 propertiesConfig是一个数组,用于保存组件配置项的相关字段,包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍,请参见组件数据接入。 组件配置项 配置示例如下
在AstroCanvas服务控制台,单击“Astro 低代码平台”,进入Astro低代码平台界面。 图3 进入Astro低代码平台界面 为IAM用户进行服务授权。 对IAM用户进行服务授权操作后,该用户即可拥有进入AstroCanvas平台的基础权限。 在Astro低代码平台的左侧导航栏中,选择“组织管理”,进入组织管理页面。