检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在华为云Astro轻应用中自定义高级页面组件（widget）时，修改了JS文件，修改部分不生效？ 问题描述 修改自定义组件widget的JS文件后，修改部分未生效。 解决方法 自定义组件（widget）上传新的版本后，需要在“页面设置”中，对插件进行升级更新。升级后，js文件才能生效。 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。
（可选）当使用命令行进行组件创建时，需要使用vue cli 2的模板功能（magno ui可视化操作不需要该步骤），需要在cmd命令窗口，任意本地目录下执行如下加粗字体命令安装“vue/cli”和“vue/cli-init”。 yarn global add @vue/cli yarn global
json中必选要包含待引入的文件。例如，MintUI库需要引入文件“js/index.js”和“css/index.css”，请在packageinfo.json中添加这两个文件的描述。其中，“js”和“css”用于定义文件类型，“name”用于定义文件路径及名称。 { "js": [
API。 组件 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见表1。 表1 组件名.js中预置API说明 分类 API及说明 组件实例预置API
开发自定义组件 初识组件文件结构。 将下载到本地的组件包进行解压，使用您熟悉的开发工具进行开发。本章节以下载组件模板中下载的TabsWidget组件为例，介绍组件包的文件结构以及各文件的功能。 表2 组件文件结构 文件名 文件说明 TabsWidget.js 组件逻辑文件，整个Widge
目录结构如图3所示，其中userLogin.js文件是写vue业务逻辑的代码，userLogin.ftl用于写html代码，userLogin.css用于写样式代码，userLogin.editor.js以及packageinfo.json是配置文件。 图3 目录结构 在解压后的文件夹中，创建一个imgs文件夹，并放入一个登录页面的背景图片。
上传文件 功能介绍 将本地文件上传到存储中。使用该API上传文件，默认只会上传到连接器下配置的第一个桶中。待上传的文件可以是文本文件、图片、视频等任何类型。 URI POST AstroZero域名/u-route/baas/sys/v1.1/connectors/{connec
Range 否 String 参数解释： 查看文件内容的范围。 示例：取值“bytes=0-”，表示返回全部字节文件内容。 约束限制： 不涉及。 取值范围： 不涉及。 默认取值： 不填写，表示返回全部文件内容。 响应参数 只返回文件内容。 请求示例 已创建好OBS类型连接器，连接
删除文件 功能介绍 从存储中删除无用的文件。 URI DELETE AstroZero域名/u-route/baas/sys/v1.1/connectors/{connector_type}/{connector_name}/delobject?object=X 表1 路径参数 参数
页面。 在应用开发页面，选择左侧某一表单页面。 单击导出后的，选择“导出文件 > 全部文件”。 图5 选择全部文件 在导出文件页面，选择待导出的附件，单击“确定”。 导出的文件会以zip包格式呈现，且导出文件最大支持500M，若超出请分批执行。 父主题： 表单管理
会被修改。 初识组件文件结构。 将下载到本地的组件包进行解压，使用您熟悉的开发工具进行开发。本章节以1中下载的TabsWidget组件为例，介绍组件包的文件结构以及各文件的功能。 表2 组件文件结构 文件名 文件说明 TabsWidget.js 组件逻辑文件，整个Widget的渲
widgetdemoproperty 上传源文件 组件源文件包。 选择2中的widget_demo_property.zip 场景 组件包的应用场景，可同时选择多个。 高级页面 发行说明 组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。
json中必选要包含待引入的文件。例如，MintUI库需要引入文件“js/index.js”和“css/index.css”，请在packageinfo.json中添加这两个文件的描述。其中，“js”和“css”用于定义文件类型，“name”用于定义文件路径及名称。 { "js": [
在“requires”里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如“global_VueI18n”是基于“global_Vue”的，需要写在“global_Vue”之后。 在“widget_demo_i18n.js”的render方法中，使用平台提供的“HttpUtils
// 组件包说明文件 组件zip包的目录及文件的名称不能是中文，且编译后的组件包大小应在1M以内。 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。 表1 组件包文件说明 目录/文件
本章节以下载的TabsWidget组件为例，说明组件包的文件结构及各文件的功能。 表1 组件文件结构 文件名 文件说明 TabsWidget.js 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3
表1 组件文件结构 文件名 文件说明 TabsWidget.js 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。
包含的js和css文件名，并打成Zip包，如图1。您也可以直接单击MintUI.zip，下载MintUI.zip包。 图1 MintUI库文件结构 packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index
包含的js和css文件名，并打成Zip包。该场景中Zip包为“MintUI.zip”，单击链接获取该包。 图1 MintUI库文件结构 packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo
在“兼容性设置”页签中，开启“页面组件的渲染框架由Vue2升级为Vue3”开关。 图1 高级设置 当前版本的高级页面中，提供了Vue2和Vue3两种框架的组件，如果需要使用Vue2框架的组件，需要关闭“页面组件的渲染框架由Vue2升级为Vue3”，否则会提示图2中信息。 图2 界面报错
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
