# 页面布局和呈现
新手指引系列文档将带领大家快速借助CodeWave平台能力搭建一个属于自己的低代码应用，并在应用的搭建过程中掌握平台的各类基础知识。
# 页面和页面跳转
# 页面的基础概念
创建应用时，系统会默认创建6个页面，分别是dashboard(总览页)、index(首页)、login(登录页)、404(404页面)、noAuth(无权限页面)、permission_center（权限中心）。
- login(登录页)：开启权限管理后，需要登录账户时跳转的页面。
- index(首页)：登录应用后默认进入的页面。
- dashboard(总览页)：系统默认的页面模板。
- permission_center（权限中心）：管理用户权限的页面。
- noAuth(无权限页面)：没有访问权限时跳转的页面。
- notFound(找不到页面)：找不到页面时跳转的页面。
# 实操：设置页面跳转
本节介绍如何设置默认跳转页和设置页面跳转。
选中欢迎页，右键点击出现菜单，选择设为默认跳转页。
打开总览页，选中侧边栏项P5-1：社区跳转页面，单击右侧图标设置链接表达式。
选择跳转页面P5_1_CommunityLink（社区跳转页面），可以设置高锚点和页面打开方式，完成设置后，发布预览后即可查看效果。
# 页面布局
# 线性布局介绍
布局是页面排版的关键组件，我们以线性布局组件为例，支持如下3种布局模式：
- 内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。
- 块级布局：将当前元素修改为块级布局模式，各个块级布局模式的元素之前和之后均会换行。
- 弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以弹性伸缩其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。
# 实操：调整布局样式
将P5-2：页面布局页面修改为如下图所示的布局样式。
打开页面布局页面，选中线性布局line1，修改横轴对齐方式为右对齐。
选中线性布局line2，修改子元素布局方式为子元素块级布局。
选中线性布局line3，布局模式修改为弹性布局。
选中线性布局line4,布局模式修改为弹性布局，主轴方向修改为垂直。
# 变量和动态绑定
# 概念说明
# 变量
在计算机语言中，变量用于存储计算结果或者表示值。之所以称之为变量，是因为其值具有不确定性。
变量有使用范围，如接下来用到的页面逻辑只能使用页面变量、逻辑变量和前端全局变量。
页面变量：包含输入参数和局部变量，仅能被当前页面下的逻辑调用。
逻辑变量：包含输入参数、输出参数和局部变量，仅能被当前逻辑调用。
前端全局变量：前端所有页面的全局变量，支持被所有页面调用。若该变量在多个页面下有赋值操作，则某时刻取值该变量时的结果为最近一次的赋值。
# 动态绑定
在低代码平台中，使用动态绑定机制，使组件的值可以随变量或逻辑输出结果动态变化，从而实现数据与呈现效果之间的联动。
# 实操：设置动态绑定
用户输入两个数字，系统计算两个数字相加之和，将下图中的**？**替换成计算结果。
打开变量和动态绑定页面，选中文本组件，在文本属性中点击动态绑定按钮，点击选择表达式按钮。
拖入算数运算加法组件。
拖入变量，分别选择A和B，关闭弹窗。
发布开发环境预览查看运行结果。
# 双向绑定
# 概念说明
双向绑定通常用在表单类组件中，用于在数据变化后更新视图、视图变化后更新数据等需要同步更新的场景。
# 实操：即时显示用户输入的内容
实现如下图所示的效果：
打开双向绑定页面，选中多行输入组件，内容属性开启双向绑定。
发布开发环境预览查看运行结果。
# 组件显示条件
# 概念说明
组件的属性中，支持配置显示条件，可通过If表达式控制组件的显示和隐藏。
# 实操：隐藏测试面板
期望实现效果：当进入组件显示条件页面时，隐藏带有测试字样的面板。
进入组件显示条件页面，选中测试面板，设置显示条件。
拖入变量或常量组件，为显示条件设置字面量false。
在复杂场景中，也可使用and、or等逻辑运算，搭配各类逻辑组件进行条件判断，依据输出的布尔值控制组件的显隐，true为显示，false为隐藏。
发布开发环境预览查看运行结果。