检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在AstroZero中自定义高级页面组件（widget）时，修改了JS文件，修改部分不生效？ 在AstroZero组件库中，部分组件在组件详情页看不到更新和编辑入口 在AstroZero高级页面中，如何进行统一的HTTP状态拦截？
如何编译发布应用 应用包类型 在应用开发完成后，应用还需要经过编译、打包和发布。AstroZero低代码平台支持编译资产包和源码包两种类型的应用包。应用编译的类型不同，发布方式也会有所差异。 源码包：该类型包中的所有组件都不受保护和限制。在其他开发环境安装后，可编辑包中组件，即在原有基础上可进行再开发
图2 事件、动作组件示例 其主要实现如下： widgetEventTemplate组件 在“widgetEventTemplate.js”文件中注册名称为“sendEvent”的事件，并在单击“trigger Event”按钮的时触发“sendEvent”事件，代码如下所示。
如下加粗代码所示，“widget_demo_property.editor.js”中分别定义了text、 checkbox以及select类型的三个属性参数。
该组件详细说明如下： 在BridgeTestWidget.editor.js文件中，配置桥接器实例。
解压已获取的组件包，在BridgeTestWidget.editor.js文件中，配置桥接器实例。
标准页面中的组件是基于Vue.js的通用基础组件，常用于管理端表格表单类的页面开发，如布局容器、数据容器、输入、显示、按钮等。
修改解压后的“Vue3Navigator_Widget.js”文件。 “Vue3Navigator_Widget.js”文件是Widget逻辑文件，整个Widget的渲染核心JS。
userLogin.editor.js、packageinfo.json：配置文件，请参考8和9修改。 修改userLogin.editor.js文件中的config代码，用于配置桥接器。
启用js编译器 当打包应用内有高级页面时，才会显示该参数。开启后，会将高级页面引用的插件和资源进行JS编译，使代码规范化。 高级设置 > 导航栏显示方式 在小程序中展示时，是否显示导航栏。 在OneMobile小程序容器管理后台，发布小程序。
如果勾选“压缩高级页面”，表示会对包中所有高级页面涉及的css和js文件进行合并及压缩，这样可以有效降低运行时服务器压力，但从终端浏览器首次访问该站点页面时，访问时间会稍微增加。 发布成功后，页面显示“程序包已经被成功上传到我的仓库。”
以修改widgetVueTemplate.js文件中，name变量值为“AppCube Studio”为例，向您介绍如何在线编辑组件。 图5 在线编辑组件示例 修改完成后，单击页面右上角的，进入更新组件页面。 单击“更新”，返回组件详情页面。
图6 事件、动作组件示例 其主要实现如下： widgetEventTemplate组件 在“widgetEventTemplate.js”文件中注册名称为“sendEvent”的事件，并在单击“trigger Event”按钮时触发“sendEvent”事件，代码如下所示。
op.submitInstance(variables)) 提交任务： $bpm(op => op.submitTask(variables)) 更改变量： $bpm(op => op.putVariables(variables)) 图3 在高级页面组件的事件中与BPM交互 另外，在高级页面的自定义组件的JS
自定义校验：是否进行自定义校验，打开后需要设置校验JS代码。当输入框在表单组件中，该设置才会生效。 校验方法：输入JS代码定义校验规则，代码的返回值必须为布尔类型或者对象类型。
以修改widgetVue3Template.js文件中，name变量值为“AstroZero Studio”为例，向您介绍如何在线编辑组件。 图5 在线编辑组件示例 修改完成后，单击页面右上角的，进入更新组件页面。 单击“更新”，返回组件详情页面。
图10 为列表视图添加事件 图11 输入自定义JS代码 const list = []; for (let i = 0; i < 5; i++) { list.push({ value: i + 1 }) } context.
还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。
图7 自定义JS代码 系统中已存在商品对象“命名空间__Product__CST”，并有“name”和“命名空间__status__CST”两个字段，分别是商品名和商品状态，且已有对象数据。
在“widget_demo_i18n.js”的render方法中，使用平台提供的“HttpUtils.getI18n”方法返回一个“i18n”变量，并新建Vue实例传入该“i18n”变量。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
