移动端低代码标准版开发指南

1、创建应用

  • 目前预置了多个领域的应用模板可供选择以便快速搭建相关应用,也可以自建空白模板满足自己的个性需求,如下图所示 image.png image.png

  • 应用名称:应用的名称

  • 所属领域:业务范围的划分
  • 应用引擎:服务端的环境配置
  • 应用图标:应用的图标

2、创建页面

  • 目前移动端只支持单卡(表)和主子卡(表)和空页面3种页面模板,如果要生成移动端页面需要勾选右下角的“移动端页面”,点击“配置”可以选择列表页单据卡片的排版格式,(如下图所示)

image.png

2.1(选择卡片模板)===》卡片模板的类型

  • 目前共支持3种排版方式。纯文字卡片——图文卡片——小图卡片,左侧会显示预览效果(如下图所示)

image.png

  • 纯文字卡片,由纯文字组成,用于没有图片的单据(如下图) image.png

  • 图文卡片。图文混排卡片,用于有图片内容的单据(如下图) image.png

  • 小图卡片,比图文卡片更简洁,常用于信息较少的单据或子表卡片(如下图所示)

image.png

2.2卡片字段的绑定规则

  • 默认按元数据实体的字段顺序依次匹配,图片位置只匹配图片类型的字段,非图片位置可匹配除图片和附件之外所有的字段
  • 如果需要卡片显示更多的字段,可勾选“扩展字段”并输入需要扩展的字段数量 !!!注意:小图卡片字段不支持扩展字段

2.3点击条目快速预览

  • 默认关闭,点击卡片直接进入详情页,如果勾选则会在卡片下方增加额外的行操作按钮栏。点击行操作中的"详情"跳转详情页,如点击卡片将快速弹出预览详情页而不跳转到详情页

  • 页面创建完成后就可以点击下图红框区域进入对应单据的移动设计器页面(如下图所示) image.png

3、移动设计器

  • 移动设计器页面由工具栏和设计器两部分构成,工具栏的从左到右依次功能:切换移动/pc、设计器、快捷键、后退一步、前进一步、预览和保存。设计器由组件库、画布和属性样式动作构成

image.png

image.png

image.png

  • 向画布中添加组件,只需点击所需的控件,按住鼠标拖拽到画布中所需的位置松开鼠标即可,在画布中选中组件后也可以拖动到其他的位置
  • 在画布中选中组件后可在右侧的属性/样式/动作面板中对组件进行设置
  • 移动页面支持多画布,当单页面无法满足实际需求时可以创建多个子页面来满足实际单据的业务需求
  • 保存后,点击右上角的”预览“可以快速的查看页面实际运行的效果

3.1(设计器组件库)

  • 设计器组件库分为内置组件和子自定义扩展组件,下图为内置组件

image.png

3.2(设计器组建的属性)

  • 在画布中选中组件后,设计器组件右侧的属性、样式、动作面板会显示该组建的属性,默认显示属性页签,属性面板的属性修改之后,会实时的在画布中显示效果,(如下图) image.png

3.3(设计器组件的样式)

  • 几乎所有的CSS样式都可以通过样式面板设计
  • 样式面板是和组件进行关联的,对页面元素进行调整时,先在画布中选择需要调整的组件,然后再在样式面板中调整
  • 不同的组件支持的样式不同,样式面板的设置项也会有区别
  • 支持rem(自适应)、px(固定尺寸),%(屏幕比例)三种单位

  • 1.宽度设置

  • 设置组件的整体宽度和高度 image.png

  • 2.字符设置

  • 设置组件及子组件文本的大小、颜色、字符形状等 image.png

  • 3.边框设置

  • 设置组件的边框和圆角,包括是否显示边框,边框的颜色,粗细,圆角的大小,圆角和边框可以4个方向同步设置或单独设置 image.png

  • 4.边距设置

  • 设置组件的内外边距 image.png

  • 5.阴影设置

  • 目前流式布局,标签和图片三个组件支持阴影设置 image.png

  • 6.背景设置

  • 设置组件的背景,支持颜色或URL图片链接 image.png

3.4(设计器组件动作绑定)

  • 在动作面板中可以对组件的事件触发自定义的扩展,比如简本或者命令,比如按钮有单击事件,文本框有获取焦点,失去焦点,值改变事件,页面有初始化事件等
  • 当选择一个组件之后就可以在右侧的动作面板中查看该组件支持的事件,如下图所示,选择的是一个文本框组件,共支持3个事件 image.png

  • 上图支持的3个事件任意点击一个就会显示下图所示的待选事件 image.png

  • 1.前端函数:执行前端脚本
  • 2.后端函数:执行后端脚本 点击前端函数/后端函数,系统将自动创建脚本文件,点击进入脚本编辑器(如下图所示) image.png image.png

  • 执行命令,执行系统预置的命令(如下图) image.png

  • 前端动作:执行常用的前端动作(如下图) image.png

3.5(设计器层级)

  • 设计器层级为画图的树形结构,层级页面模板的每个节点和画布中的节点一一对应 image.png

  • 树形结构右键可弹出操作栏:插入、清除、删除、打开编辑器、上移和下移 image.png

  • 插入,可以在本节点中插入一个子元素 image.png

  • 清除:清除当前节点下的所有内容

  • 删除:删除本节点以及子节点的所有内容
  • 上移:就是将本节点位置向上移动
  • 下移:就是将本节点位置向下移动

  • 打开数据编辑器,显示当前节点的数据 image.png

  • 设计器层级工具操作

  • 设计器层级工具操作:从左到右,从上到下顺序,依次为导出数据、导入数据、全部展开,全部收起和层级搜索

  • 导出数据 image.png

  • 导入数据 image.png

  • 全部展开 image.png

  • 全部收起 image.png

  • 搜索,输入关键字可过滤含关键字的节点 image.png

4.设计器画布

  • 设计器画布右三个功能区:画布工具、切换主子页面按钮、画布展示页面效果 image.png

  • 画布工具

  • 设计器画布尺寸规格。页面展示效果区。默认大小是 宽:220px,高:667px;宽和高会随着浏览器窗口变化而变化。也可以右上角的‘自适应按钮’选择放大,缩小倍数。 image.png

  • 切换主子页面:点击主子页面按钮,所点击按钮背景色变为白色,同时画布展示当前所选中的页面 image.png

  • 新增子页面:点击 ‘+ 增加子页面’按钮可新增子页面. image.png

  • 删除子页面:当鼠标滑过子页面的按钮时会有删除标识出现。点击可删除页面 image.png

  • 画布展示页面效果当鼠标划过画布上的相应位置的控件时,会出现蓝框表示组件的轮廓。点击会出现,拖动、删除 标识 image.png

根据上面的开发指南我们来开发一个案例(案例如下图)

image.png

1、首先进行项目分析

  • 首先我们看看项目的结构布局,然后再看有哪些功能点,利用强大的YonBuilder轻松实现 image.png image.png

2、我们进行数据建模(因为页面建模的时候需要依赖原数据)

image.png

3、页面建模(页面建模元数据就是我们数据建模实体名称)

image.png

4.页面生成后,通过拖拽将组件放到画布中

image.png

5.组件拖拽到画布后,通过组件的属性、样式将页面美化

image.png image.png

6.优化完以后点击保存、预览想过图如下

image.png

7.主页面完成后,我们在创建其他四个页面(依次通过数据建模--页面建模)

image.png image.png

8.页面生成后我们将主页面与其他四个页面通过按钮进行关联

  • 首先我们要知道其他四个页面的单据编码 image.png

  • 然后我们在主页面中选中任意一个按钮,选中动作标签=》点击单击=》前端动作=》跳转页面页面就得以关联,单击保存、预览即可,如下图 image.png

  • !!!注意事项:页面跳转的时候,不在同一设计器下的页面需要跳转的时候用页面跳转,,,在同一设计器下的页面需要跳转的时候用显示子页面

  • !!!移动端页面目前默认不支持模糊搜索,需要我们自己配置字段 image.png

Copyright © 用友 -【生态技术部】 2022-2023 all right reserved,powered by Gitbook修订时间: 2024-02-02 12:53:33

results matching ""

    No results matching ""