检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
本章节以开发网站中常用的标签切换页面为例,向您介绍如何基于组件模板在线开发组件。标签切换效果如图1所示,页面中主要包含标签栏和详情展示模块两部分,可以通过切换标签来控制详情展示模块中的展示内容。 图1 标签切换效果 本章节主要在高级页面中,通过两个组件(标签页组件、信息展示组件)复
将开发完的自定义组件上传到组件库,并在高级页面中使用。 本章节以开发网站中常用的标签切换页面为例,向您介绍如何基于组件模板在线开发组件。参考消费者业务网站(如图1所示),页面中主要包含标签栏和详情展示模块两部分,可以通过切换标签来控制详情展示模块中的展示内容。 图1 消费者业务网站示例 本章节主要在高级页面中,通过
图片展示和URL跳转 期望实现效果 高级页面中的轮播组件主要用于多个图片的自动循环切换。您也可以为图片添加超链接,即单击图片,跳转到指定的网站。 图1 最终实现效果 功能实现方法 创建一个低代码应用。 参考授权用户使用AstroZero并购买实例中操作,申请AstroZero免费试用或购买商业实例。
二维码中间Logo图片,可不用设置。 设置Logo后,如果扫描二维码识别失败,可以调高容错级别或调大二维码。 Logo大小 Logo大小,单位像素。 单击页面上方保存页面,单击预览页面。 图47 生成二维码 将上一步生成的二维码分享给游客,游客通过微信或者支付宝扫描二维码,可扫码体验,进行健康打卡。 扩展知识(经典版)
的服务。 已执行前提条件中操作,即已部署上线用于花卉识别的模型。 在ModelArts管理控制台左侧菜单栏中,选择“部署上线 > 在线服务”,进入在线服务管理页面。 单击目标服务名称,进入服务详情页面。 选择“调用指南”页签,查看“API接口地址”。 如图4所示,该参数值为“API接口地址”中的一串字符串。
逻辑比较复杂的场景,您可以通过在线开发TypeScript脚本实现。本章节以创建一个全新的脚本为例,向您介绍如何在低代码平台中新建一个脚本。本脚本实例不涉及对象及调用接口等内容,脚本只实现请求“http://www.example.com”,返回网站请求的消息头功能。 创建空白脚本
以创建一个全新的脚本为例,向您介绍如何在低代码平台中新建一个脚本。本脚本实例不涉及对象,及调用接口等内容,脚本只实现请求“http://www.example.com”,返回网站请求的消息头功能。 创建空白脚本 参考登录经典应用设计器中操作,登录经典版应用设计器。 将光标放在某个文件夹(例如Logic)上,单击,选择“脚本”。
二维码 二维码用于根据文本内容或链接地址生成二维码,用户通过微信或支付宝扫描二维码,可查看到文本内容或者跳转到相应的链接。 在标准页面设计界面,从“基本组件 > 基本”中,拖拽“二维码”组件至页面工作区域,如图1。 图1 二维码 查看组件帮助 将鼠标放在对应的组件上,单击,可查看组件说明。
将图片识别成文字,帮助用户自动采集关键数据,打造智能化业务系统,提升业务效率。 在AstroZero中,通过应用与OCR对接,可实现图片或扫描件中文字识别功能。例如,识别某用户上传到华为OBS上的身份证图片的全部信息。 前提条件 已申请身份证识别服务,具体操作请参见开通文字识别服务。
健康打卡、在线投票等。标准页面中的组件是基于Vue.js的通用基础组件,常用于管理端表格表单类的页面开发,如布局容器、数据容器、输入、显示、按钮等。 高级页面主要用于开发应用中较复杂的前端页面,例如包含图片、图表、视频、地图等元素的页面,您也可以将高级页面应用于开发网站、电商平台
下、从左到右的顺序依次排列,组件的高度将根据组件内容大小进行自适应,宽度可按百分比进行配置。该布局常用于常规Web应用开发,例如电商网站、管理网站等等。 搭建高级页面。 在高级页面开发界面,单击,打开组件列表。 从组件列表中,拖拽基本柱图组件到画布中,按需调整组件的位置和大小。 图11
通过创建清理任务来定时清理过期或者无用的对象数据。 使用说明 通过创建定时清理任务,可以根据设定的清理条件对特定对象的数据进行清理,并根据业务需求进行在线创建、查看、删除相关清理任务。 例如:创建一个清理任务,对创建时间超过2天的Account对象数据进行清理,且必须满足的对象数据筛选条件为
设置AstroZero标准页面二维码组件属性 二维码用于根据文本内容或链接地址生成二维码,用户通过微信或支付宝扫描二维码,可查看到文本内容或者跳转到相应的链接。 图1 二维码 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。
流式布局与绝对布局的自适应设计 以电脑端为例,分别为您介绍流式布局与绝对布局的自适应设计。 流式布局 流式布局为自适应布局,用于常规Web应用开发,例如电商网站、管理网站等。流式布局为12列栅格布局,可拖动组件右侧边界,按栅格进行组件宽度调整。组件高度将根据组件内容进行自适应,页面中组件将按照从左到右、
进入绑定WeLink页面 在弹出页面,单击“绑定WeLink”。 在弹出的“扫码认证”框中,打开移动端WeLink,在右上角单击“+”,扫描图8中所示二维码。 图8 扫描二维码 勾选待同步用户所在的WeLink部门,单击“同步”。 图9 同步用户信息 绑定WeLink会同步WeLink用户为A
、从左到右的顺序依次排列,组件的高度将根据组件内容大小进行自适应,宽度可按百分比进行配置。流式布局常用于常规Web应用开发,例如电商网站、管理网站等。 开发高级页面。 下面以开发一个绝对布局的高级页面为例,向您如何使用AstroZero快速开发一个高级页面。 图2 绝对布局类型高级页面组件布局示例
面包屑 面包屑组件用于显示网站的层级结构,告知用户当前所在位置以及在需要向上级导航时显示。 在标准页面设计界面,从“基本组件 > 基本”中,拖拽“面包屑”组件至页面工作区域,如图1。 图1 面包屑 查看组件帮助 将鼠标放在对应的组件上,单击,可查看组件说明。 图2 查看组件说明 属性
应用打包 > 生成移动应用”。 在发布应用中,单击“WeLink-We码”。 图23 WeLink-We码 打开WeLink,扫描登录WeLink开放平台。 图24 扫描登录WeLink开放平台 如果当前未登录WeLink,需要先扫码或输入账号、密码登录。登录后,直接跳转到应用创建设置页。
统一身份认证”,单击“WeLink”。 在绑定WeLink中,单击“绑定WeLink”。 在弹出的“扫码认证”框中,打开WeLink,扫描图3中所示的二维码。 图3 扫描二维码 勾选要同步用户所在的WeLink部门,单击“同步”。 绑定WeLink时,会同步WeLink用户为AstroZer
设置AstroZero标准页面面包屑组件属性 面包屑组件用于显示网站的层级结构,告知用户当前所在位置。 图1 面包屑组件 数据绑定 将面包屑组件的某个属性,如隐藏、样式、跳转等与具体的模型字段相绑定,绑定后组件的属性随模型字段的值变化而变化,类似Vue的v-bind。 在“数据绑定”中,单击“属性值绑定”后的“+”。