# 快速上手

本文会帮助开发者在云智开发平台上从 0 到 1 搭建一个在线 web 应用。在使用之前您首先需要在云智开发平台上开户，开户流程参见开户流程

# 租户配置

打开租户管理->配置租户网关地址,配置租户发布站点信息和上传租户主页LOGO。在租户配置页面您还可以管理数据源、网关路由、接口访问权限及流量控制

配置发布环境

# 创建应用

打开应用管理，点击上方新增按钮。填写基本信息创建项目。在右侧可以从组件中心中选择应用所需要的页面。

创建项目

# 新建页面

模块创建之后再右键菜单创建页面, 创建页面后双击打开页面即可开始页面的开发工作了。

创建页面

# 拖拽组件

云智开发平台采用的积木式的可视化拖拽方式组建页面，从左侧组件面板面板往画布上拖拽相应的组件即可很方便的组成您需要的各式各样的页面。

拖拽组件

TIP

云智开发平台采用自由布局排版，最大限度的保证视图排版的灵活，开发者根据自身需要调整版面。详见布局排版

# 组件配置

鼠标点击中画布上的某个组件时，该组件将处于高亮状态，此时可以在右侧配置面板上对各种属性该组件进行配置。
如下例，选中某个组件后可以在配置面板中修改对应组件的各种属性。修改完相应的属性后渲染引擎会自动对相应的组件进行重绘，画布区域所见即所得。

组件属性配置

# 数据源配置

视图配置完成后，接下来可以对数据源进行相应的配置。点击工具栏上的数据集按钮选用需要的 Api，选用 Api 后系统自动解析出其入参 request 和出参 response，方面后期配置页面时选用。
选用数据集之后可以根据业务需求将其 request 中的字段和 response 中的字段分别绑定至对应的组件。如下例，选用解析 Api 之后将入参中的 Status 字段绑定至过滤文本框组件，将出参中的字段绑定至表格组件的列字段配置。

数据源配置

TIP

上例中使用到的 Api 是在数据方案配置中配置的，或者通过本云智开发平台的后台服务部分的 ide 开发的。详见数据方案配置以及后台服务开发

# 数据交互

接下来开始做页面的数据交互，通过选用的 Api 请求数据库中的数据渲染到页面上。根据选用的 Api 快捷生成请求数据的脚本代码块，粘贴到表格组件的请求方法中。

配置的每段脚本都对应一个可执行函数，可以通过 $context访问函数的上下文。比如下例中可以通过 $context.pageSize 和 $context.startIndex访问到表格的分页状态。通过 $context.resolve 将请求到的数据传入表格组件中。点击工具栏的运行按钮预览就能看到数据了。

数据交互

TIP

$context对象组件可执行函数上下文，在不同的组件或者场景中，具有不同的上下文，为方便开发者使用，做了ide 智能提示。各组件可执行函数上下文详见组件

上例中使用的 $http.ds 方法是云智开发平台内置的请求数据模块中提供的请求数据集方法。详情参见 $http 文档

上例中使用的 $vm.gatewayFD_FIELD_HDR_wlw.request.Status 是访问的数据模型中的状态。具体原理参见数据模型

$context上下文只是访问 web 应用状态的一种方式，实际上我们更多时候会使用 $vm 来访问 web 应用的状态。访问页面状态及方法通过$vm访问。访问组件状态及方法通过$(组件句柄)访问，具体组件的状态以及方法参见组件。

如上例中的脚本换成如下代码也能达到同样的效果。

// 接口请求参数对象（以具体接口为准）
var params = {
	Status: $vm.gatewayFD_FIELD_HDR_wlw.request.Status,
	startIndex: ($('table-1').page.pageNum - 1) * $('table-1').page.pageSize,
	pageSize: $('table-1').page.pageSize
}
// 接口请求成功回调函数
var success = function(response) {
	// 以具体接口returninfo为准
	if (response.Flag) {
		// 将获取到的数据通过table组件的setData方法设置到table组件上
		$('table-1').setData(response.MsgInfo)
	}
}
// 执行接口请求
$http.ds('FD_FIELD_HDR_wlw', params, success)

# 组件交互

接下来我们来做一下页面交互。如下例，点击查询按钮，通过关键字查询表格中的内容。我们只需要给查询按钮的点击事件绑定一个可执行脚本, 在脚本中执行 table 组件的 requestData 方法就可以了，各组件内部的状态和方法在 ide 中会给出智能提示。

组件交互

TIP

组件交互原理具体参见事件驱动与函数式编程。

# 脚本调试

云智开发平台提供了代码断点调试的功能, 由于是 B 端系统，共用了浏览器自带的调试功能。可以指定脚本调试，如下例，调试查询按钮点击事件对应的脚本，我们打开浏览器的开发者工具，然后切换到对应的脚本，点击工具栏上的调试按钮。在执行到这段脚本时即可进入断点调试。代码调试

# 发布审核

页面配置完成之后，即可发布上线，为了安全起鉴，云智开发平台提供了发布审核功能，发布之后会生成一条待审核记录，审核员审核之后该页面将被发布至该项目配置的测试环境。

发布审核

TIP

云智开发平台采取的是云编译技术，发布审核过程中会通过云编译器将页面配置编译成浏览器可识别的 web 程序。详情参见云编译

# 挂载菜单

页面发布之后，在对应的应用上挂载菜单就能使用了（只有首次发布需要挂载菜单），进入租户控制台->用户中心->功能菜单管理，选择对应的应用，选择待发布菜单数据进行菜单挂载。挂载菜单之后进入对应的应用打开刚创建的菜单就可以使用发布的页面了。

TIP

企业在云智开发平台开户之后会有一个租户控制台来控制企业的应用、服务、开发者等权限，本文不展开说明。详情参见租户控制台。

# 需求迭代

在实际开发过程中，云智开发平台开发的页面需求迭代将变得非常灵敏，在线修改需求，通过发布审核之后即可生效。如下例：在之前的页面上加一个表格导出 excle 的功能。

需求迭代

← 租户开户工作台 →