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