检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
以修改widgetVue3Template.js文件中，name变量值为“AstroZero Studio”为例，向您介绍如何在线编辑组件。 图5 在线编辑组件示例 修改完成后，单击页面右上角的，进入更新组件页面。 单击“更新”，返回组件详情页面。
表1 组件文件结构 文件名 文件说明 TabsWidget.js 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。
例如，MintUI库需要引入文件“js/index.js”和“css/index.css”，请在packageinfo.json中添加这两个文件的描述。其中，“js”和“css”用于定义文件类型，“name”用于定义文件路径及名称。
userLogin.editor.js、packageinfo.json：配置文件，请参考9和10修改。 修改userLogin.editor.js文件中的config代码，用于配置桥接器。
操作示例 将模板组件widgetEventTemplate（若widgetEventTemplate已上传，请不要重复上传）、widgetPageMacroTemplate上传至组件库，操作方法请参见在线开发高级组件中“上传自定义组件”。
页面间组件的交互 将模板组件widgetEventTemplate（如果widgetEventTemplate已上传，请不要重复上传）、widgetPageMacroTemplate上传至组件库，操作方法请参见在线开发AstroZero高级页面自定义组件中“上传自定义组件”。
在组件详情页面，单击“预览”，可在线预览组件模板。 下载组件模板 在AstroZero服务控制台，单击“进入首页”，进入应用开发页面。 在页面左上方单击，选择“环境管理 > 环境配置”，进入环境配置。 在顶部主菜单中，选择“维护”。
例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。
图1 事件、动作组件模板 组件模板中包含多种功能的示例组件，可以参考组件模板开发自定义组件，组件模板的下载及说明请参见在线开发高级组件。 在组件模板代码中，包含低代码平台定义的事件、动作的注册和触发API（应用程序接口），详细介绍如表1所示。
自定义校验：是否进行自定义校验，打开后需要设置校验JS代码。当输入框在表单组件中，该设置才会生效。 校验方法：输入JS代码定义校验规则，代码的返回值必须为布尔类型或者对象类型。
例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。
例如，MintUI库需要引入文件“js/index.js”和“css/index.css”，请在packageinfo.json中添加这两个文件的描述。其中，“js”和“css”用于定义文件类型，“name”用于定义文件路径及名称。
主要事件说明 事件编排器说明 如何通过JS代码，实现页面与后台接口间的交互 页面级常见操作 控制组件是否可见可用可编辑 BPM相关预置事件说明 父主题： 标准页面
图6 调试js代码 调试DOM及样式 在标准页面开发界面，单击，预览标准页面。 在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。 在“Elements”页签，单击左边选择器。
+[a-z]{2,}$"); return reg.test(value); 校验错误信息 当“自定义校验”中，JS代码返回值类型为布尔类型时，会取该参数的值为错误提示信息。 当“自定义校验”中，JS代码返回值类型为对象类型时，直接取返回值中的message值为错误提示信息。
自定义校验：是否进行自定义校验，打开后需要设置校验JS代码。当输入框在表单组件中，该设置才会生效。 校验方法：输入JS代码定义校验规则，代码的返回值必须为布尔类型或者对象类型。
如下图所示，给按钮组件设置了“重置表单”和“自定义JS代码”两个动作。在预览页面单击该按钮时，会按照设置的顺序先执行“重置表单”，再执行“自定义JS代码”。 父主题： 添加事件实现AstroZero组件间交互
图1 自定义JS代码 解决方法 “onOK”是系统预置事件，不提供阻止窗口关闭的能力。对于类似需求，可以通过将“footerHide”属性设为“true”，来屏蔽弹窗中的预置功能按钮，改为弹窗引用业务页面自己的相应功能按钮，并在按钮事件中实现所需校验、提示、关闭等处理逻辑。
启用js编译器：当打包的应用内有高级页面时，才会显示该参数。开启后，会将高级页面引用的插件和资源进行JS编译，使代码规范化。 高级设置 > 导航栏显示方式：导航栏配置，在小程序展示时是否显示导航栏。 单击“发布”，在“发布信息确认”页面检查发布参数，检查无误后单击“确定”。
在页面的组件js文件中，使用预置的“this.$mstore.dispatch（）”方法，修改状态数据。 系统还预置了onStateChanged(state) 方法，用于监听属性整个全局状态的变更。 父主题： 高级页面
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
