检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
如何通过JS代码，实现页面与后台接口间的交互 使用说明 如果您擅长编写JS代码，可以不使用事件编排器中的内置动作，直接通过手动编写JS代码实现事件的逻辑功能。低代码平台支持在手动编写JS代码时，进行代码联想提示，并封装了一些常用功能的接口，并将其中典型接口做成模板，供您直接使用。
在AstroZero中自定义高级页面组件（widget）时，修改了JS文件，修改部分不生效？ 问题描述 修改自定义组件widget的JS文件后，修改部分未生效。 解决方法 自定义组件（widget）上传新的版本后，需要在“页面设置”中，对插件进行升级更新。升级后，js文件才能生效。 参考登录经典应用设计器操作，进入应用经典版设计器。
文件说明 TabsWidget.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见高级页面和Astro大屏应用中预置的API。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时，需要渲染的界面和逻辑。“*
标准页面中预置的API 在开发标准页面时，可以通过编写JS代码，来实现页面组件与后台接口之间的交互。如图1所示，在编写JS代码时，可直接使用系统预置的API。 系统预置的API代码结构样例如下，提供事件上下文context，用于封装常用的对象及API。 context ├──$app
TypeScript执行引擎没有自带模块管理，嵌入引擎时，需要开发人员手动引用。 模块管理机制类似Node.js，但因为平台是基于数据库存放脚本，没有目录与路径的概念，所以下面的module管理只是一个简化版本的Node.js模块管理，也不支持npm的整套机制。 脚本文件和模块是一一对应的，每个脚本被视为一
”，即可进入添加动作页面。 从左侧“动作”区，设置“内置动作”或“自定义动作”，自定义动作需自定义JS代码逻辑，可单击代码区域右侧的，最大化自定义JS代码页面。 图1 页面自定义JS代码 在左侧模板代码中，单击服务编排或脚本左侧的，复制代码到右侧代码编辑区域，即可出现系统预置的经典接口。
API。 组件 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见表1。 表1 组件名.js中预置API说明 分类 API及说明 组件实例预置API
选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JS代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。 内置JS事件说明及使用方法，请参见如何通过JS代码，实现页面与后台接口间的交互。 图4 自定义JS代码 自定义JS代码示例如下： //获取当前组件 var _component
查看解压后的组件目录。 目录结构如图3所示，其中userLogin.js文件是写vue业务逻辑的代码，userLogin.ftl用于写html代码，userLogin.css用于写样式代码，userLogin.editor.js以及packageinfo.json是配置文件。 图3 目录结构
文件名 文件说明 TabsWidget.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见高级页面组件中预置的API。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时，需要渲染的界面和逻辑。“*
在“widget_demo_property.editor.js”的“propertiesConfig”中，定义Widget属性，包含属性的类型、名称和在界面展示的标签名。 如下加粗代码所示，“widget_demo_property.editor.js”中分别定义了text、 checkbox以及select类型的三个属性参数。
当组件中定义的桥接器属性设置的model值和桥接器中定义的model值相同时，桥接器实例选项可选到这些桥接器。 例如，查看组件editor.js文件中model值为“SingleRepireDataViewModel”，查看“折柱图数据桥接器”和“柱状图和折线图数据桥接器”的“packageinfo
pageMacro}。 其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。 在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties =
在应用设计器下方，选择“页面设置”。 获取锁后，在“属性”页签，去勾选“合并并压缩资源”。 若勾选“合并并压缩资源”，会对所有高级页面涉及的css和js文件进行合并及压缩，使用单页面性能检查功能时，不要勾选该选项。 图1 关闭“合并并压缩资源”属性 设置完成后，单击，并单击，释放锁。 打开
pageMacro}。 其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。 在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties =
在导航可见权限页签中，去勾选“使用说明”。 图2 去勾选使用说明 在单页面可见权限（表单/视图/统计等）页签中，去勾选“使用说明”、“全部”和“异常核酸检测”。 图3 去勾选使用说明、全部和异常核酸检测 单击“确认”，在角色权限中选中“查看本应用”，单击“保存”。 图4 保存设置 父主题： 零码课堂
返回组件详情页，可查到新上传的组件版本。 图3 新组件版本 方式二：在线编辑更新 单击“编辑”，进入组件在线编辑器。 在编辑器中，单击页面右上角的，获取锁。 图4 获取锁 锁定后，根据自身业务需求，在线修改组件文件。 以修改widgetVueTemplate.js文件中，name变量值为“AppCube
在“资源”页签，可查看并引用应用需要的Library。 在“属性”页签，可配置站点属性。 站点设置 合并并压缩资源：勾选后，在发布该应用时，对应用中所有高级页面涉及的css和js文件进行合并及压缩，这样可以有效降低运行时服务器压力，但从终端浏览器首次访问该站点页面时，访问时间会稍微增加。 资源延迟加载：勾选后，在body标签中加载资源。
添加库扩展AstroZero标准页面功能 如果您希望使用第三方库文件，而当前系统中不存在该库，您可以通过上传，新增该JS/CSS库，并在页面中设计并使用该库，实现引入第三方库的功能。 什么是库 库是指在设计页面时，需要依赖的库，如果缺少相应的依赖库，则页面中无法实现某些功能。例如
返回组件详情页，可查到新上传的组件版本。 图3 新组件版本 方式二：在线编辑更新 单击“编辑”，进入组件在线编辑器。 在编辑器中，单击页面右上角的，获取锁。 图4 获取锁 锁定后，根据自身业务需求，在线修改组件文件。 以修改widgetVue3Template.js文件中，name变量值为“AstroZero
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
