开发调查问卷标准页面实例

本节将通过开发一个“调查问卷”应用页面用来演示标准页面的基本功能，页面完成后如图1所示。

图1 调查问卷应用效果

创建一个自定义对象“Questionnaire”。

创建“Questionnaire”对象，在对象内新建7个文本类型的自定义字段“questionCode0”~“questionCode6”，创建自定义对象及字段的相关内容请参考3.1 了解对象模型。

创建的自定义对象是用来保存“调查问卷”中用户填写的信息，并在这个对象下用不同字段来记录“调查问卷”中每一个问题用户填写的内容。
创建应用页面。

单击“Page”文件夹右侧的，选择“标准页面”。在弹窗中输入页面的“标签”、“名称”为“Questionnaires_questionnairePage”。
图2 选择标准页面

图3 添加标准页面
选中“页面”标签，在右侧配置面板“样式 > 布局”下，为页面左右各设置“15%”和“18%”的内边距。

图4 页面设置内边距
拖拽“表单”组件到中间面板，并做如下操作。
1. 在“基本组件 > 布局”中，拖拽“表单”组件到中间面板中。
  图5 添加“表单”组件
2. 在右侧弹出的“元数据表单配置向导”中，选中刚才创建的对象“Questionnaire__CST”，并勾选创建的自定义字段，单击“下一步”。
  图6 配置表单元数据
3. 选中表单按钮，单击“完成”。
  图7 配置表单功能
1. 设置“表单”组件样式“字体”为“16px”，下外边距为“20px”。
  图8 设置“表单”组件样式
2. 当前页面未使用“分栏”组件，因此删除表单组件中所有的“分栏”组件，只保留包含按钮组件的“容器”组件。
  图9 容器组件
在左侧面板中将“标题”组件拖至中间面板“容器”组件上方。

图10 添加“标题”组件
1. 选中“标题”组件，在右侧边板“基本属性”“标题内容”中输入调查问卷标题“Astro轻应用开发者调查问卷”。
2. 在右侧面板“样式 > 字体”下，配置标题的字体样式，将字体大小设置为“28px”，颜色设置为“147AEC”，并设置居中样式。
  图11 设置标题样式
  
  设置后，效果如图12所示。
  图12 配置完标题组件后
在左侧面板中，将“图片”组件拖至中间面板“标题”组件下方，并在右侧边板设置图片地址（/besBaas/images/banner.png），设置图片高度为“165px”，宽度为“100%”。

图13 将“图片”组件拖至中间面板

图14 设置图片地址

图15 设置图片样式
在左侧面板中，将“标题”组件拖至中间面板“图片”组件下方。

图16 将“标题”组件拖至中间面板

在右侧边板设置标题内容，如“为了持续提高您的开发体验，为您提供更好的开发平台，特邀您花几分钟反馈问卷，您的支持是我们最大的动力，衷心感谢您，祝开心每一天！”。

设置上外边距“12px”，下外边距“24px”，内边距上右下左分别设置为“10px 20px 10px 12px”，字体大小“16px”，行高“28px”，颜色“#333333”。
图17 设置标题内容

图18 设置标题样式
在左侧面板中，将“下拉框”组件拖至中间面板“标题”组件下方。

图19 将“下拉框”组件拖至中间面板
1. 在“属性 > 数据绑定”中，单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode0__CST”。
  图20 数据绑定
2. 在“属性 > 基本属性”中，标签设置为“1.您的工作类型？”，设置选项“设计类”、“开发类”、“产品类”、“运营类”和“其他”，并勾选“可清空”“可过滤”和“必填”项。
  图21 配置基本属性
在左侧面板中，将“单选按钮”组件拖至中间面板“下拉框”组件下方。

图22 将“单选按钮”组件拖至中间面板
1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode1__CST”。
  图23 数据绑定
2. 在“基本属性”中，设置标签为“2.您觉得平台的体验流畅吗？”，并设置选项“非常流畅”“一般流畅”“不太流畅”并勾选“必填”。
  图24 属性配置
在左侧面板中，将“单选按钮”组件拖至中间面板“单选按钮”组件下方。

图25 将“单选按钮”组件拖至中间面板
1. 在“属性 > 数据绑定”中，单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode2__CST”。
  图26 数据绑定
2. 在“属性 > 基本属性”中，设置标签“3.您在开发过程中有困难，能否获取有效的文档/帮助？”，并设置选项“非常有帮助”、“一般”“没有帮助”并勾选“必填”。
  图27 属性配置
在左侧面板中，将“复选按钮”组件拖至中间面板“单选按钮”组件下方。

图28 将“复选按钮”组件拖至中间面板
1. 在“属性 > 数据绑定”中，单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode3__CST”。
  图29 数据绑定
2. 在“属性 > 基本属性”中，设置标签“4.您是从哪个途径知道数字平台的？”，并设置选项“内部搜索”“别人介绍”“听过培训”“其他途径”并勾选“必填”。
  图30 属性配置
在左侧面板中，将“多行输入框”组件拖至中间面板“复选按钮”组件下方。

图31 将“多行输入框”组件拖至中间面板
1. 在“属性 > 数据绑定”中，单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode4__CST”。
  图32 数据绑定
2. 在“属性 > 基本属性”中，设置标签“5.您觉得AppCube给您带来的最大价值是什么？相比其他同类产品，您为什么选择AppCube？”，并设置最大字符长度“256”。
  图33 属性配置
在左侧面板中，将“多行输入框”组件拖拽到中间面板“多行输入框”组件下方。

图34 将“多行输入框”组件拖至中间面板
1. 在“属性 > 数据绑定”中，单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode5__CST”。
  图35 数据绑定
2. 在“属性 > 基本属性”中，设置标签“6.您想对Astro轻应用说点什么？可以是优点也可以是缺点还可以是对Astro轻应用的期许。”，并设置最大字符长度“256”。
  图36 属性配置
在左侧面板中，将“评分”组件拖至中间面板“多行输入框”组件下方。

图37 将“评分”组件拖至中间面板
1. 在“属性 > 数据绑定”中，单击右侧齿轮按钮，选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode6__CST”。
  图38 数据绑定
2. 在“属性 > 基本属性”中，设置标签“7.您对平台的综合评分？”，并设置星星总数“5”。
  图39 设置属性
选中“容器”中的“保存”按钮，做如下设置。
1. 在“基本属性”中，设置显示名称“提交”。
  图40 属性配置
2. 在“事件”页签中，单击“点击”后的加号。
  图41 事件配置
3. 在“添加动作”页面，选择“自定义动作”，输入自定义JS代码，单击“创建”。
  如下JS代码仅为示例，请根据实际情况修改示例中表单名称（form_0）和字段名称（data.name）。更多自定义JS脚本介绍，请参见如何通过JS代码，实现页面与后台接口间的交互。
```
let data = $model.ref("form_0").getData();
//一些特殊字段数据处理
data.name = data.name.join(";");
// 提交表单
var  _form = context.$component.form;
_form.formSave();
```
  图42 配置JS代码
到此，“调查问卷”主页面已创建完成，效果如下：
图43 “调查问卷”主页面
测试“调查问卷”页面应用实例，填写“调查问卷”并单击提交。

图44 模拟填写调查问卷

在经典版应用开发设计器的导航菜单上，单击，即可进入数据调试页面。您可以在数据调试页面，输入sql语句查询创建的“Questionnaire”对象，获取刚才填写的调查问卷数据。
图45 控制台入口

图46 调查问卷数据已存入对象