# 管理组件模板 #### 查看组件模板详情 1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。 2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。 3. 在顶部主菜单中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。 5. 在"全部"页签中，单击对应的组件模板。 - 租户：展示用户自定义的组件模板，华为云Astro轻应用支持增加、删除和修改自定义的组件模板。 - 全局：展示华为云Astro轻应用预置的组件模板，可查看预置的组件和下载组件，但不能删除。 - 全部：展示了华为云Astro轻应用中所有的组件模板，包括预置和自定义的。 6. 在组件详情页面，可查看组件的描述信息、变更历史和包信息。 #### 预览组件模板 1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。 2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。 3. 在顶部主菜单中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。 5. 在"全局"页签中，单击对应的组件模板。 6. 在组件详情页面，单击"预览"，可在线预览组件模板。 #### 下载组件模板 1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。 2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。 3. 在顶部主菜单中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。 5. 在"全局"页签中，单击对应的组件模板。 6. 在组件详情页面，单击"下载"。 7. 在下载组件模板页面，输入组件名称，单击"保存"。 若选择"下载原始模板"，下载到本地的包中，组件名称不会被修改。 #### 基于模板自定义组件 当系统预置的组件无法满足您的需求时，可根据自身需求自定义组件。 1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。 2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。 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 | 组件的元数据描述文件，定义了如下内容： - widgetApi 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：为华为云Astro轻应用预置的参数，用于获取当前站点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 | 华为云Astro轻应用平台内置了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. 返回华为云Astro轻应用环境配置中，选择"维护 \> 全局元素 \> 页面资产管理 \> 组件"，单击"提交新组件"。 9. 单击"请选择源文件(.zip)"，选择组件zip包，填写基本信息，单击"提交"。 提交后，可在高级页面中使用该组件。 图1提交新组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002138941105.png "点击放大") 表3上传组件参数说明 | 参数 | 说明 | |:---|:---| | 名字 | 组件名称，系统会根据组件包名称自动填充。 | | 上传图标 | 组件的显示图标。 | | 上传源文件 | 组件源文件包，单击"请选择源文件(.zip)"可选择源文件上传。 | | 组件ID | 资产ID，前缀不可编辑，上传组件包后会自动填写。 | | 分类 | 组件所属分类，上传组件后，该组件将会在页面的该分类下进行展示。 | | 领域 | 组件包应用的领域。 一般保持默认"通用"，在组件列表中可基于领域进行分类展示。 | | 场景 | 该组件包应用的场景，包含但不限于以下几种： - 高级页面：该组件适用于高级页面开发场景。 - 标准页面：该组件适用于标准页面开发场景。 - 业务大屏：该组件适用于华为云Astro大屏应用大屏页面开发场景。 - 业务小屏：该组件适用于华为云Astro大屏应用小屏页面开发场景。 可同时勾选多项，勾选后，在相应类型页面开发中，才可使用该组件。 | | 发行说明 | 组件的描述信息。必填项，需要配置不同语种下的描述信息。 发行说明会在组件详情页的"概况"页签下，进行展示。 |