检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用JS面板 在常规代码开发中，您需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。 很多时候您需要自定义一些方法去复用一些逻辑，也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。
初始值类型：可选择“JSON类型”和“JS表达式类型” 初始值：数据写法和JS写法一致。 字符串: "string" 数字: 123 布尔值: true/false 对象: {"name": "xxx"} 数组: ["1", "2"] 空值: null JS表达式: （“初始值类型”需要选择“JS表达式类型”）
输入工具类的名称，并编写函数代码。 function isNil(value) { return value == null } 图1 添加function工具类 单击“保存”，完成function工具类添加。 在JS面板的函数中使用function utils 您可以在JS面板或者页面生命周期函数中通过this
后将在JS面板中创建一个该名称的新方法。 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后如: onClickNew(eventArgs, extParam1, extParam2, ...)。 图1 设置绑定事件 单击“确定”，弹出JS面板。 在JS面板中进行绑定方法的具体逻辑实现。
选择页面类型：可选“静态页面”或“公共页面”。 页面名称：只允许包含英文字母，且以大写开头驼峰格式，如DemoPage。 选择文件夹：下拉框中选择文件夹名称。 路由：输入路由信息，只允许包含英文字母、数字、下划线、中划线和正斜杠组成， 且以英文字母开头。 单击“选择模板”，在右侧展开面板中选择模板。
“欢迎登录”的文字，未登录的时候，显示“请登录”的文字。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 拖拽组件至画布，分别输入希望展示的文字。 添加变量，例如state
在事件列表中，单击OnClick事件。 在弹框中输入方法名称，例如handleOnClick。 图1 事件绑定 单击“确定”，弹出JS面板。 在JS面板中编写代码。 代码示例： function handleOnClick(event) { this.loadingInstance
在应用服务列表中选择待操作的应用服务，单击“操作”列的“编辑”。 重新配置应用服务的基本信息。 应用服务名称：输入应用服务名称，名称仅允许以英文字母开头，包含英文字母和数字，一般采用驼峰格式或“-”连接，长度最低为两位。 描述：输入应用服务补充说明信息。 单击“确定”，完成应用服务编辑。 父主题：
如需更多可复制添加。 图1 默认组件 components都包含三个文件，一个index.js，一个*.vue文件和一个componentBundle.json文件，其中index.js和componentBundle.json这两个文件名字不可更改。 图2 components文件夹
一些npm包引用到工具类中，供后续调用，具体操作请参考使用工具类方法。 ：国际化插件，可添加国际化词条，实现中英文切换。 ：JS方法插件，您可以通过使用JS面板编写自己的代码，从而实现较为复杂的业务场景。 ：状态管理插件，可添加页面变量和添加全局变量，供页面及应用使用。 单击插件
前端开发视频指导 创建前端应用 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
创建子域 使用说明 子域有助于将复杂的业务领域分解为更小、更易于管理和理解的部分。通过识别和创建子域，组织可以更有效地开发和维护应用，同时确保每个子域都能满足其特定的业务需求。 应用管理为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro Pro实例版本。 创建子域
在下拉框中，分别选择应用服务所属的项目、应用和子域，单击“新增应用服务”。 配置应用服务基本信息。 应用服务名称：输入应用服务名称，名称仅允许以英文字母开头，包含英文字母和数字，一般采用驼峰格式或“-”连接，长度最低为两位。 描述：输入应用服务补充说明信息。 图1 新建应用服务 单击“确定”，完成应用服务创建。
客户端流控策略 必选参数，由英文字母和数字及连字符（-）组成，且只能以英文字母开头，采用驼峰格式。例如，Custom。 长度范围为2~63位。 规则名称 可选参数，仅当勾选了重试、熔断或超时选项后为必填。 规则名称由英文字母和数字及连字符（-）组成，且只能以英文字母开头，采用驼峰格式。 长度范围为2~63位。
可单击“下载自定义组件开发模板”，获取模板，并完成自定义组件开发，具体操作可参考自定义组件开发指南。 单击“点击上传”，上传本地已打包好的物料包。 上传的物料包名称不能与已有的物料包名称重复。 配置物料包基本信息。 表1 基本信息参数说明 参数 说明 物料包名称 自动识别物料包带入信息，无须手动填写。
选择页面类型：可选“静态页面”或“公共页面”。 页面名称：只允许包含英文字母，且以大写开头驼峰格式，如DemoPage。 选择文件夹：下拉框中选择文件夹名称。 路由：输入路由信息，只允许包含英文字母、数字、下划线、中划线和正斜杠组成， 且以英文字母开头。 图4 创建页面 单击“保存”。 在弹框中输入历史备份信息，单击“确定”。
选择业务对象模板 单击“下一步”。 添加服务依赖后，单击“创建”。 输入变更日志描述信息，单击“创建”。 系统开始创建服务，并生成该服务的代码。 图8 创建服务并生成代码包 父主题： 服务管理
设置服务的基本信息，单击“确定”。 图2 设置服务基本信息 服务名称：设置待添加服务的名称，生成的服务代码压缩包和解压后的文件会以此命名。服务名称由英文字母、数字或“-”组成，且必须以字母开头，一般采用驼峰格式，长度最低为两位。 图3 代码压缩包名称 服务类型：当前仅支持创建原子服务。原子服
选择项目和服务组，单击“新建服务”。 图2 新增一个服务 设置服务的基本信息。 图3 设置服务基本信息 服务名称：设置待添加服务的名称，由英文字母、数字或“-”组成，且必须以字母开头，一般采用驼峰格式，长度最低为两位。 服务类型：当前仅支持创建原子服务。原子服务是指对外提供业务对象
直接编写样式代码 使用状态选择器 行内绑定状态变量 高级配置管理 条件渲染 循环渲染 绑定事件 使用数据源 添加工具类 国际化资源管理 使用JS面板 添加变量 物料中心 自定义组件开发指南 上传自定义组件物料包 更新自定义组件物料包 下载自定义组件物料包 应用管理 创建应用 创建子域
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
