跳至主要內容

设计器的基本使用

黄健大约 6 分钟快速开始

基本说明

为了方便尽快入门,简单介绍一下设计器中的一些基本布局以及功能:

顶部菜单栏

顶部菜单栏包含了大部分通用常用功能,例如保存页面,回退、升级组件、页面快照、发布页面等。

图层管理(层级结构树)

当组件被拖入到画布中,即作为图层叠加在画布上。在该区域中,可查看当前编辑页面上已有的所有组件,也可对组件图层进行组合、取消组合、置顶、置底、单独显示、锁定、复制、删除等操作。

功能组件库

所有可用功能组件均在此区域,通过单击或拖拽的方式可把功能组件添加到画布中。

配置区域

布局块、功能组件、页面等自定义配置均在此区域中。

页面配置与画布配置

页面配置(基本信息配置)

在配置区域中,点击其他配置页签,可以看到页面配置以及画布配置,其中页面配置,可以配置页面的一些基本信息:页面名称、页面缩略图,我们可以通过系统自动截取的方式,截取 当前画布状态作为页面的缩略图,可以手动截取上传。

相关信息

在PageNow中,页面和画布是一个概念,只是区分说明而已,实际上一个页面也就是一个画布,画布包含于页面中。

画布配置

可对画布的尺寸、背景色、缩放方式、背景图片等进行自定义更改。

下面对各类配置项进行介绍说明:

配置项介绍说明
背景色设置画布的背景色,可通过直接选取色块或输入颜色代码选择所需的颜色,背景颜色的透明度可调节
是否同步设置为页面背景色HTML页面默认的背景色一般为白色,当我们设置画布背景色之后,如果需要HTML页面背景色也采用画布的背景色,那么可以勾选上,默认勾选
画布宽度、高度可自行设置画布的尺寸,默认推荐大屏分辨率为1920*1080
等比例调整画布尺寸将当前画布尺寸进行等比例尺寸转换,例如需要将1920*1080的尺寸调整到其他尺寸时,为了不影响原始布局,可以在此进行操作
拖拽单位像素设计器中拖拽组件时,默认拖拽的单位为1个PX,可以在此修改拖拽单位像素
页面缩放方式根据可视化大屏展示的屏幕尺寸,选择合适的页面缩放方式设置
隐藏顶部加载进度条打开后,页面在发布后,将不会在页面顶部显示页面中所有数据请求的加载时进度条
背景图片可从本地上传图片作为画布的背景
自定义样式可通过CSS样式脚本的方式配置画布的样式

页面缩放方式详细说明

当页面为自由布局式数据大屏类型时,实际采用的是绝对布局方式,绝对布局就涉及到页面在不同尺寸屏幕下的展示方式的适配问题,在PageNow中,页面通过缩放的方式解决屏幕适配的问题。

缩放方式说明
等比例缩放宽度铺满保证不论在何种屏幕尺寸下,页面均在宽度上保证展示完整
等比例缩放高度铺满保证不论在何种屏幕尺寸下,页面均在高度上保证展示完整
全屏铺满保证不论在何种屏幕尺寸下,页面都会进行宽度与高度的铺满,此方案下可能会造成页面的拉伸
不缩放不对页面进行任何缩放适配,保留页面画布的原始尺寸展示

如何在画布中添加功能组件

画布内添加功能组件有两种方式:

1、直接在组件库区域单击需要添加至画布的组件卡片:这种方式会将组件固定添加在画布的左上角区域。

2、在组件库中拖拽相应的组件卡片至画布中:这种方式的前提是要激活画布的可放置状态,激活的方式可以通过点击画布, 或点击左侧层级结构树顶部的【画布】按钮来激活,当画布显示边框的时候,说明画布已经激活了组件可放置状态。

如何将组件拖入指定布局块中

布局块可以绑定和解绑功能组件,下面将说明如何将功能组件拖入布局块,以及如何给布局块解绑功能组件。

我们可以先在画布中拖入一个空的布局块,点击需要放置功能组件的布局块激活它,然后将功能组件拖入布局块即可:

解绑功能组件也非常简单,画布中点击需要解绑的组件,点击鼠标右键,点击【解绑关联组件】即可,解绑后,可以再次拖入其他的功能组件至此布局块中

保存页面

有没有经历过:文档写一半,突然停电,但文档没有保存,小脑萎缩了吧?

我们在对页面进行各种编辑的过程中,请务必记得点击【保存】按钮保存当前编辑状态。

当然我们可以设置自动保存,顶部菜单栏右侧,找到一个齿轮的按钮,打开全局配置界面,开启自动保存当前编辑页面功能即可。

页面预览

页面预览分为当前窗口预览和新窗口预览,与新窗口预览不同,当前窗口预览会在当前设计器通过IFrame窗口打开预览界面。

快照管理

默认情况下,页面发布之后,如果继续编辑页面并保存,那么用户在访问此页面时,访问的始终会是页面最后一次保存的状态,而快照可以将页面的某个状态进行保存, 当进行发布页面操作时,可以选择指定快照进行发布,这样不论页面如何做修改保存,用户始终访问的是发布页面时选择的快照的状态。

点击【生成新快照】按钮即可以当前页面的编辑状态生成一份快照。

发布页面

切换页面的发布状态按钮即可将页面在未发布和已发布两种状态中切换,页面的访问地址目前版本尚不可更改,页面发布后,以此访问地址为唯一访问URL。

页面加密

页面加密属于前端路由加密而已,并不是对整个页面进行源码加密,配置限制访问打开是否加密,配置访问密码即可,当配置限制访问后,在通过访问地址访问已发布的页面时,会要求输入密码才可继续访问。

以快照方式发布

选择相应的快照,发布后的页面将始终以快照状态展示,类似于版本切换的感觉。