引言
页面搭建所需要的基本入门知识——在UI布局与绑定数据的方面
搭建页面整体过程可以概括为：
| 步骤 | 描述 |
|---|---|
| 拖拽搭建 | 从组件库、数据源中，将想要的组件拖出来，放到想要放的地方 |
| 调整组件 | 点击选中组件，可以调整它的属性配置、样式和尺寸 |
| 完善逻辑 | 使用数据绑定、表达式、JavaScript 代码，以及组件的行为配置，实现丰富逻辑 |
前提：访问无极平台 → 创建项目 → 创建页面
基础页面搭建
1 了解拖拽搭建基础
◎ 生成UI的方法：
①从通用组件里拖拽、②从数据源自动生成；
从组件面板里拖出来，一般用于做页面布局、添加自定义按钮和展示。拖出来后，还需要修改这些组件的属性配置。
从数据源生成UI
无极会自动推导组件、页面，自动配置好数据绑定的关系。 可以直接拖出想要的组件，就能使用了，它天生就与对应的数据源做好了绑定。 对于常规的表单、表格页面，使用这个 “自动生成” 方式更加便捷。这种方式可以很快速的搭建出能够读、写数据的页面出来。
◎ 调整UI
在画布区，点击选中想调整的组件后，
-
在右侧栏，修改组件的属性、行为和样式、绑定等
-
在画布区，拖拽调整组件的位置和大小
-
使用工具栏、右键菜单
推荐尝试【更换组件】功能，保持绑定关系同时，更换为其他组件（例如：文本输入框、图片上传组件等）
2 了解布局
在页面搭建中，你会经常遇到 “行” & “纵向内容块” 这两种 容器组件。它们的布局效果如下：
容器快捷操作
- 拆除容器 有时候编辑器会产生多余的“行”或者“纵向内容块”，可以选中多余的容器，点击 属性面板上的【拆除】去掉它。
- 装入容器 你可以选中页面上的内容，点击 属性面板 里的 【 装入容器】，以便塞到想要的容器组件里。
| 组件名 | 示意图 | 说明 |
|---|---|---|
| 卡片组件 | 白色的区块，用来放置表单和信息非常方便。可选开启或关闭 标题、底部操作区。 | |
| 宫格布局 | 适合多行多列的布局 | |
| 选项卡 | ||
| 可折叠面板 | ||
| 提示浮层 | 建议的使用路径： (1)拖一个组件（比如按钮）到页面 (2) 选中它，然后点击 属性面板 里的 【装入容器】 (3) 将他装入提示浮层 |
其他的组件使用，请参考官网组件介绍文档~~
3 了解数据
◎ 数据源面板
为了让拖拽出来的UI变成动态的，我们需要给它绑定数据，可以在“数据源面板”找到任何可以绑定的“数据源”，它可以是远程数据、页面变量、页面参数或者系统上下文。
例如：
-
数据源：你的页面要做一个可提交的表单，就需要在这个面板里，添加“表单型”的数据源；要呈现某个DB的数据列表，则是添加“列表型”数据源……
-
页面变量：有些逻辑只是当前页面上使用，则可以创建页面变量。他们就像程序运行过程的临时变量一样，页面一关闭就没了，但是只要没关闭就能一直读读写写。
-
页面参数和 $query：例如网址里的
?id=123、内嵌页面片等等。
左侧展示的是一个树状结构，事实上我们存储的也是一个巨大的 JS 对象。你可以取任意层级任意节点，视其为变量来读写、调用方法等。
要确定某个变量的名字（路径），可以鼠标放上去，点击这个：
◎ 作用域
作用域指的是数据、变量所能被访问到的范围。
在程序中，如果一个数据被定义在某个函数或代码块内部，那么它只能在该函数或代码块内部被访问和使用，超出该范围就无法使用了。这样做的好处是可以避免不同作用域中的变量名冲突，同时也可以提高程序的执行效率。
前面提到了，数据源面板里，只能看到 当前作用域 的变量和数据。因此，当你进入不同作用域（比如列表里的卡片、单元格等），需要留意「数据源面板」的变化！
首先，整个页面就是一个作用域。
那么，什么时候会遇到不同的作用域？
最典型场景就是：列表的单元格
一个列表会有多个单元格。他们的组件、布局和逻辑都是一样的，只是为其注入的数据不一样。这里，实际页面上的每一个单元格，就是一个个 作用域。
作用域是有父子关系的。例如这些单元格，他们的作用域，有同一个父级：列表组件所在的作用域（假设列表组件就是直接放在页面上的，那么也就对应整个页面）
在单元格这种 “子作用域” 中，只能通过 parentScope 访问到它的外层。
因此，在单元格里，要调用数据源方法，但是找不到选谁时，记得看看 parentScope 里，有没有你想要找的。
4 绑定数据
数据绑定是页面搭建最重要的操作，绑定的方式具备多样式，可以按实际场景来选择
| 场景 | 对应解决方案 |
|---|---|
| 输入框： 需要呈现当前变量值，以及，用户修改后要回填变量值 | 属性面板中，使用 双向绑定 |
展示： 展示指定变量的内容，甚至需要一些前缀，例如 你好， {{ userName }} | 属性面板中，使用 {{ 插值 }} 字符串 或者 JS表达式 |
| 按条件展示： 例如，在满足条件时，才显示某个提示语或者“行”组件 | 行为配置中，使用JS表达式 |
| 按钮：点击按钮后，校验表单，然后提交数据到后台 | 按钮的行为配置中，添加点击时的行为，补充“校验表单”和“数据源操作”的行为 |
以下介绍几种常用的绑定方式，你可以选取一种适合的方式来绑定数据：
◎ 双向绑定
一般在 输入框组件 上可使用双向绑定，通过“双向绑定按钮”来选取想绑定的数据，如下图：
注意事项
请认准 双向绑定
只有双向绑定，才能让变量记住你输入的东西！
输入框的值不要使用表达式绑定，避免导致输入不生效。
只有部分组件、部分属性，支持双向绑定
◎ 插值字符串
属性面板或其它的配置表单上可以看到很多 {{ 插值 }} 字符串输入框 ，他们有橘黄色的左侧粗线条。
在这些地方，你可用 {{ data.xxxx }} 这样的方式输入变量名，或者 JavaScript 表达式片段。页面运行的时候，会执行花括号里的表达式，并替换为表达式执行结果
以下是一些例子：
| 在编辑器里写的 | 运行时实际的值 |
|---|---|
| 你的用户ID是 {{ w.user.userid }} | "你的用户ID是 pony" |
| {{ (w.user.isAdmin) ? "是管理员" : "只是普通人" }} | "是管理员" |
| {{ (w.user.isAdmin) ? 1000 : 0 }} | 1000 -- 注意值类型为数字，不是字符串了 |
◎ JS表达式
除了上面提到的橘黄色边框的输入框，你还会遇到 JS表达式 输入框
⚠ 在这种输入框里，无需加“双花括号”，直接写 变量名、JavaScript 表达式。
对于组件的大部分属性配置，可点击对应属性名右侧的 按钮，开启/关闭JavaScript 表达式模式。然后你就可用编写表达式了，在表达式里可直接读取、使用各种变量和方法。
5 绑定事件
例如按钮组件，当它被点击时该做什么？
以按钮组件触发一次提交校验后请求为例：
添加事件后，你会看到行为“流程编辑器”，按以下步骤操作：
-
添加 “表单校验”
-
添加“数据源操作”
-
配置步骤的参数
行为逻辑的配置面板介绍如下示例：
6 完成页面UI搭建
通过上述5个步骤，就可以完成页面搭建啦~
