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

管理组件模板

查看组件模板详情

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 组件模板”。
  5. “全部”页签中,单击对应的组件模板。

    • 租户:展示用户自定义的组件模板,AstroZero支持增加、删除和修改自定义的组件模板。
    • 全局:展示AstroZero预置的组件模板,可查看预置的组件和下载组件,但不能删除。
    • 全部:展示了AstroZero中所有的组件模板,包括预置和自定义的。

  6. 在组件详情页面,可查看组件的描述信息、变更历史和包信息。

预览组件模板

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 组件模板”。
  5. “全局”页签中,单击对应的组件模板。
  6. 在组件详情页面,单击“预览”,可在线预览组件模板。

下载组件模板

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 组件模板”。
  5. “全局”页签中,单击对应的组件模板。
  6. 在组件详情页面,单击“下载”
  7. 在下载组件模板页面,输入组件名称,单击“保存”

    若选择“下载原始模板”,下载到本地的包中,组件名称不会被修改。

基于模板自定义组件

当系统预置的组件无法满足您的需求时,可根据自身需求自定义组件。

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 组件模板”。
  5. 参考下载组件模板中操作,下载组件模板。

    例如,下载widgetVue3Template组件模板,并将组件名称设置为TabsWidget。

  6. 将下载到本地的Widget包进行解压,认识组件结构。

    表1 组件文件结构

    文件名

    文件说明

    TabsWidget.js

    在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明

    TabsWidget.editor.js

    组件属性定义文件,负责组件在编辑状态时需要渲染的界面和逻辑。“.editor.js”只在Widget编辑状态被加载,主要包含如下两个方法:

    • propertiesConfig方法:主要负责组件配置页面中右侧的属性配置逻辑。
    • create方法:仅在组件首次被创建时调用一次。

    TabsWidget.css

    组件的样式文件,在该文件中编写组件的css样式。

    TabsWidget.ftl

    组件DOM结构文件,需要在服务端提前渲染的部分可以写在此文件中,相当于HTML文件,负责样式展示。

    packageinfo.json

    组件的元数据描述文件,定义了如下内容:

    • widegtApi name:组件的名称。
    • widgetDescription:组件的描述信息。
    • authorName:组件的作者信息。
    • localFileBasePath:组件本地调测路径。
    • i18n:指定组件的国际化资源文件。本例模板中未体现。
    • requires:依赖的库名称和版本号。
    • width:在绝对布局高级页面中添加该组件时的默认宽度,单位为px,不填写默认为200px。本例模板中未体现。
    • height:在绝对布局高级页面中添加该组件时的默认高度,单位为px,不填写默认为200px。本例模板中未体现。
    表2 组件名.js中预置API说明

    分类

    API及说明

    组件实例预置API

    • init方法:主要包含组件渲染需要初始化数据的入口函数。
    • render方法:负责整个组件渲染的业务逻辑方法。
    • getConnectorProperties:获取桥接器属性的配置值。
    • getConnectorInstanceByName:通过桥接器的变量名称获取桥接器实例,其中“APIConnector”类型为String,表示桥接器的变量名称。
    • ConnectorIns.process(renderCbk, errCbk):通过桥接器实例调用process函数,主要作用为发起调用服务的请求和处理返回结果信息。
      • 在通过process函数发起请求前,需设置桥接器实例的requestParams属性为请求的参数,例如:ConnectorIns.requestParams = param;
      • 参数renderCbk,类型为Function,当返回结果信息后调用该函数,用于处理返回信息。
      • 参数errCbk,类型为Function,调用该函数来处理错误。
    • ConnectorIns.query(param):通过桥接器实例调用process函数,主要作用为发起调用服务的请求和处理返回结果信息,参数说明如下:
      • param:请求参数。
      • 其返回结果为Promise对象。
    • getProperties:用于返回该组件的自定义属性值。

      开发Widget时,可以给组件自定义属性,在开发界面可对这些属性进行配置,通过getProperties方法可返回自定义属性值。例如,var properties = thisObj.getProperties()。

    • getContainer:用于返回渲染该组件的容器dom节点。

      代码示例:var elem = thisObj.getContainer (),然后通过jquery去查询组件中某个dom节点时,可通过$("#id", elem)的方式来获取。

    • getWidgetBasePath:用于返回该组件静态资源的根路径。

      例如某个组件的静态资源路径为“https://10.10.10.1:12900/default/0000000000NABzEjpNIH/assets/bundle/widget/172a6056501-a6f8ce1f-2ed9-4a9a-b883-251aaac14e0a/v1591923270914/test0609.js”,执行thisObj.getWidgetBasePath()返回“https://10.10.10.1:12900/default/0000000000NABzEjpNIH/assets/bundle/widget/172a6056501-a6f8ce1f-2ed9-4a9a-b883-251aaac14e0a/v1591923270914” 。

    • getMessages:返回该组件国际化配置文件中定义的国际化文件内容。需要配置vue和vueI18n使用。

      例如开发组件时定义了messages-en.json和messages-zh.json国际化文件。thisObj.getMessages()返回的就是这两个文件中定义的国际化内容。

    • hideWidget:隐藏该组件的dom结构。在预览态调用该方法可以隐藏Widget。

      例如,执行thisObj.hideWidget()方法隐藏该组件的dom结构。

    • showWidget:显示该组件的dom结构。在预览态调用该方法可以展示Widget。

      例如,执行thisObj.showWidget()方法显示该组件的dom结构。

    • SITE_ROOT_PATH:为AstroZero预置的参数,用于获取当前站点URL地址的根路径。站点和应用是一对一的关系,当创建应用时,系统默认会创建并分配一个站点。

      假如,某个页面的URL地址为“https://10.10.10.1:12900/magno/render/cool__app_0000000000NABzEjpNIH/page1”,则使用SITE_ROOT_PATH获取的根路径为“/magno/render/cool__app_0000000000NABzEjpNIH”。

    • triggerEvent:用于触发事件,参数说明如下:
      • eventName:指定触发的事件名称。
      • {}:为事件触发时传递的参数赋值,例如{param: value}。

    Studio对象预置API

    • Studio.registerWidget:用来定义组件。
    • Studio.registerConnector:用来定义桥接器。
    • Studio.registerEvents:用于注册事件,只有通过此API注册后的事件才会在组件的事件列表中展现。参数说明如下:
      • thisObj:当前组件实例对象,指为该组件注册事件。
      • eventName:事件名称,应该与触发事件API中的第一个参数保持一致。
      • Event Label:事件标签名,在事件列表中展示的事件标题。
      • []:定义该事件触发时传递的参数模型,例如[{"name": "param"}] 。
    • Studio.registerAction:用来注册动作。只有通过此API注册后的事件才会在组件的动作列表中展现。参数说明如下:
      • thisObj:当前组件实例对象,指为该组件注册动作。
      • actionName:动作名称。
      • Action Label:动作标签名,在动作列表中展示的动作标题。
      • []:事件触发时传入的参数。
      • $.proxy(this.receiveActionCbk, this):该动作的回调函数,在回调函数中定义该动作的执行逻辑。
    • Studio.registerRouter:用来定义路由。
    • Studio.inReader:判断当前高级页面状态是开发态或预览态。“true”表示在预览态(即运行态),“false”表示在开发态。
    • StudioToolkit.getCatalogProperties():用于获取当前站点的元数据。

    HttpUtils工具类预置API

    AstroZero平台内置了HttpUtils工具类,预置API如下:

    • HttpUtils.getCookie:用于获取某个cookie的值。

      代码示例:HttpUtils.getCookie()

    • HttpUtils.setCookie:用于设置cookie的值。

      代码示例:HttpUtils.setCookie("key","value")

    • HttpUtils.getI18n:返回一个Vue18n的实例,配合Vue和VueI18n使用。该Vue18n实例可以在new一个Vue实例时赋值为i18n参数。

      代码示例:HttpUtils.getI18n({locale: HttpUtils.getLocale(), messages: thisObj.getMessages()})

    • HttpUtils.getCsrfToken:通过ajax的方式去调用平台的接口时使用。如果使用平台桥接器的方式,平台会自动在请求header中添加csfr-token头。
      HttpUtils.getCsrfToken(function(csrfToken) {
        $.ajax({
          ….
          headers: {
            CSRF-Token: csrfToken
          },
        })
      })
    • HttpUtils.refreshToken:用于手动刷新页面的accesstoken,通常用在执行退出逻辑时,执行该方法刷新页面的accesstoken。
    • HttpUtils.getUrlParam:用于获取查询字符串中的参数。

      例如某个页面的URL为“https://10.10.10.1:12900/magno/render/cool__app_0000000000NABzEjpNIH/page1?param=1”, 通过执行HttpUtils.getUrlParam("param")返回该参数的值“1”。

    • HttpUtils.getLocalStorage:用于获取某个localStorage的值。

      代码示例:HttpUtils.getLocalStorage("key")

    • HttpUtils.setLocalStorage:用于设置某个localStorage的值。

      代码示例:HttpUtils.setLocalStorage("key","value")

  7. 在本地开发组件,组件开发完成后,将组件的全部文件重新打成zip包。
  8. 返回AstroZero环境配置中,选择“维护 > 全局元素 > 页面资产管理 > 组件”,单击“提交新组件”。
  9. 单击“请选择源文件(.zip)”,选择组件zip包,填写基本信息,单击“提交”。

    提交后,可在高级页面中使用该组件。

    图1 提交新组件
    表3 上传组件参数说明

    参数

    说明

    名字

    组件名称,系统会根据组件包名称自动填充。

    上传图标

    组件的显示图标。

    上传源文件

    组件源文件包,单击“请选择源文件(.zip)”可选择源文件上传。

    组件ID

    资产ID,前缀不可编辑,上传组件包后会自动填写。

    分类

    组件所属分类,上传组件后,该组件将会在页面的该分类下进行展示。

    领域

    组件包应用的领域。

    一般保持默认“通用”,在组件列表中可基于领域进行分类展示。

    场景

    该组件包应用的场景,包含但不限于以下几种:

    • 高级页面:该组件适用于高级页面开发场景。
    • 标准页面:该组件适用于标准页面开发场景。
    • 业务大屏:该组件适用于AstroCanvas大屏页面开发场景。
    • 业务小屏:该组件适用于AstroCanvas小屏页面开发场景。

    可同时勾选多项,勾选后,在相应类型页面开发中,才可使用该组件。

    发行说明

    组件的描述信息。必填项,需要配置不同语种下的描述信息。

    发行说明会在组件详情页的“概况”页签下,进行展示。

相关文档