关于前端:YonBuilder应用构建教程之移动端基础配置

39次阅读

共计 1405 个字符,预计需要花费 4 分钟才能阅读完成。

在 YonBuilder 中除了 PC 端利用的构建外,咱们还能够构建配套的挪动端页面。对于同一个数据实体能够实现 PC 端和挪动端的数据同步批改,使数据录入、批改、审批等更加便捷。本篇文章通过对员工信息实体的挪动端页面构建来对 YonBuilder 挪动端配置的根底流程进行介绍。
一、创立页面
首先,创立页面的前提是领有一个已公布的实体,在利用构建的数据建模界面抉择新增实体,进行配置后点击保留并公布即可。这里调用的是之前创立并公布的员工信息实体,实体中包含员工姓名、性别、年龄等信息字段,具体配置信息如下。

其次,依据创立的实体来生成 PC 端和挪动端页面,这里须要留神的是目前挪动端只反对单卡 (表) 和奴才卡 (表) 和空页面 3 种页面模板,且须要勾选同时生成挪动端页面选项,而在挪动端页面旁的配置选项中能够实现挪动端列表页单据卡片的排版格局设置。此处,咱们在页面建模界面下抉择新建页面并选中单卡模板来实现挪动端页面的创立。

点击配置选项进入到挪动端列表页排版格局的设置页面中,能够看到这里分为了模板类型和卡片设置两局部。

在模板类型中,咱们能够对模板的显示类型进行设置,选中选项后左侧即为对应的预览页面。其中,纯文字卡片实用于由纯文字形成的实体数据;图文卡片实用于存在图片内容的单据;小图卡片则罕用于信息较少的单据或子表卡片。

而在卡片设置中,扩大字段提供了在实体字段之外的额扩大选项,如果须要卡片显示更多的字段,可勾选“扩大字段”并输出须要扩大的字段数量,在三种模板类型中只有小图卡片字段不反对扩大字段;勾选点击条目疾速预览将在点击卡片信息是疾速弹出预览详情页而不跳转到详情页。

实现挪动端页面排版格局的设置后点击确定回到页面创立流程,此处须要绑定选中的员工信息实体。

至此,咱们实现了 PC 端页面和挪动端页面的创立,点击实现后能够看到同时生成了列表页和详情页两个页面。这里与单纯的生成 PC 端页面不同的是,点击一个页面能够看到此时的编辑是分为 PC 端和挪动端两个局部的,点击挪动端局部即可对挪动端页面来进行配置。

二、挪动端页面配置
进入挪动端页面配置后,能够看到此时依据实体配置零碎曾经主动生成了页面,包含列表页面、查问计划、多选计划以及条目详情页面。对于零碎主动生成的页面,页面间的跳转关系也已同步生成。与 PC 端页面保持一致,设计器左侧为组件库与层级列表,右侧为对选中组件的属性、款式、动作面板。

此时咱们能够依据须要对页面来进行配置,左侧的组件能够通过拖拽的形式将其增加至画布中,选中组件后则可对其具体信息进行配置,其中,在动作中能够增加组件的交互方式等,而在款式面板中能够实现简直所有 CSS 款式的设计。在属性中能够实现对于组件的根底属性、字段权限、条件等的设置。这里咱们通过拖拽的形式增加一个排序组件,并在右侧的属性面板中抉择字段设置,增加合同期限和入职日期为排序字段。

三、预览
至此,咱们实现了 YonBuilder 挪动端页面的根底配置流程,接下来通过数据来测试挪动端页面的成果。首先,咱们在 PC 端通过新增选项减少了两条数据,切换到挪动端页面,能够看到曾经同步显示新增的两条数据,点击卡片能够看到预览信息。同时,在挪动端通过新增的排序组件能够实现两条数据的排序。

在挪动端页面点击新增,增加一条数据,能够看到在挪动端和 PC 端同步实现了新增。

综上,咱们对 YonBuilder 挪动端页面的根底配置流程进行了介绍,如果有任何疑难,欢送在评论区交换探讨哦!

正文完
 0