检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
进入经典版开发环境首页,在“项目 > 我的应用”中,单击“设备维修管理系统”,进入应用。 单击,进入工作目录。 在“User”目录下,将鼠标放在“Page”上,单击界面上出现的“+”,在弹出菜单中选择“高级页面”。
图1 编辑设备页面预览 页面上包含输入框(设备编码、设备名称、设备型号和地址)、选择框(设备品牌)和级联选择框(省市区)。其中,“省/市/区”级联框不仅要值绑定,还需要做属性绑定: 级联框的选项:以属性绑定的方式,与cascaderOptions关联。
组装“设备管理”页面 通过组装设备管理的标准页面,实现对设备对象的增、删、改、查处理。 页面分析 管理设备页面需要实现以下功能,如图1所示: 工具栏保留“新增设备”按钮,单击“新增设备”按钮,跳转到设备详情页面。 查询结果增加操作列,包含编辑和删除图标。
在移动端开发零码应用 登录华为云Astro轻应用移动端零代码工作台 在移动端创建空白应用 在移动端使用模板创建应用 应用管理(移动端) 表单管理(移动端)
图2 应用登录页面开发流程 业务用户登录页面即是设备维修管理系统的应用登录界面,大致设想如图3所示。 图3 应用登录页面 父主题: 创建“业务用户登录”页面
图1 学习地图 脚本 公共接口 标准页面 父主题: 开发“编辑设备”功能
创建“编辑设备”脚本 “编辑设备”脚本实现的功能是向设备对象中插入1条新记录,或者更新1条记录。 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中,将鼠标放在“Script”上,单击界面上出现的“+”,在弹出菜单中选择“脚本”。
创建“查询设备”脚本 管理设备页面中,实现输入设备的信息,查询出对应设备的全部信息功能,需要开发“查询设备”脚本和服务编排。 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。
图1 消费者业务网站示例 本章节主要在高级页面中,通过两个组件(标签页组件、信息展示组件)复现上述场景。其中,标签页组件包含产品类别(手机、笔记本、平板等),信息展示组件用于展示不同产品类别的图片信息。
开发“编辑设备”功能 背景和原理 创建业务逻辑 组装“编辑设备”页面 父主题: 设备管理开发
创建业务逻辑 创建“查询设备”脚本 创建“查询设备”服务编排 创建“删除设备”脚本 创建“查询设备列表”脚本 创建公共接口 父主题: 开发“管理设备”功能
创建业务逻辑 “编辑设备”功能主要通过调用并执行一个具有“编辑设备”功能的脚本,实现编辑设备信息功能,并在修改设备信息时,能够根据设备id号,直接修改设备信息,因此需要在开发页面前,先创建一个“编辑设备”和“按ID查询设备详情”脚本。
公共接口 公共接口是对脚本、服务编排和对象进行再包装的一种方式。将创建的脚本、服务编排、对象包装成一个新公共服务,可以使得接口的URL地址的表达形式更规范,方便让前端页面或第三方系统进行调用。 因此,在创建完后台逻辑后(服务编排、脚本、对象),就需要先将此接口包装成标准的公共接口,
创建“查询设备列表”脚本 查询设备列表脚本是为了实现将查询的所有设备并以选项列表的形式返回,并通过页面调用将查询结果展示到页面上,此脚本将会在开发“生成工单”功能章节被调用。 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。
创建“删除设备”脚本 当用户操作“删除”图标删除某条设备记录时,需要根据Id在设备对象中删除设备,因此需要创建一个根据Id“删除设备”的脚本。 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。
创建“按ID查询设备详情”脚本 修改已存在的设备信息,则需要创建可以根据设备ID查询出设备详情的脚本。 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”中,将鼠标放在“Script”目录上,单击界面上出现的“+”,选择“脚本”。
脚本 对应相对复杂的业务逻辑,华为云Astro轻应用提供了脚本、服务编排等后台逻辑形式。本章节主要带您了解脚本的基础知识。 华为云Astro轻应用的脚本引擎采用TypeScript语言。脚本执行时,TypeScript语言会被翻译成JavaScript语言,由JavaScript引擎执行
前提条件 已安装移动端WeLink,绑定WeLink时需要使用移动端WeLink进行扫码登录。 绑定WeLink 华为云Astro轻应用系统管理员登录华为云官网。 在“产品”中,选择“开发与运维 > 低代码平台 Astro > 华为云Astro轻应用(原AppCube)”。
图2 公共接口创建 创建“编辑设备”脚本“HW__editEquipment”的公共接口。
标准页面主要是通过对前端页面组件的组合编排,以及为组件配置属性、关联事件实现业务功能的,在组装“编辑设备”页面章节,则会详细介绍组件、组件属性以及事件之间的调用及相关配置。 标准页面的编辑环境也称为UI Builder,UI Builder是图形化、无码化的前端页面在线开发工具。