基于Hybrid模式的校园问卷调查系统的应用研究

华英 唐菲

Hybrid App主要以Web+Native两者相互调用为主，兼具了Native App良好用户体验，也兼具了Web App跨平台开发低成本的优势。校园问卷调查系统是以WeX5平台设计开发的HTML5移动应用，并以APP的外壳呈现。

随着网络环境的不断改善和终端性能的不断提高，校园用户对移动应用和无线网络的依赖远远高于PC终端和有线网络。无论学生还是教师，他们的网络行为在时间、地点、需求等方面都呈现出碎片化和个性化趋势。

1开发模式的选择

1.1原生本地应用开发模式

Native APP基于移动设备底层操作系统，不需要借助外部平台或第三方框架即可直接使用由移动设备平台提供的各种应用接口（API），可以直接访问移动设备的硬件资源。可以打造具有很强的交互性和完美用户体验、性能稳定、执行效率高等优势的移动应用。但Native APP必须选用和操作系统版本匹配的语言进行开发，编译后的可执行文件也仅适用于该操作系统版本。这就导致开发、更新和维护的周期长，任务重，成本高。

1.2 Web应用开发模式

Web应用使用HTML、CSS和JavaScript技术实现应用的开发，并最终在浏览器上运行。虽然Web APP和Native APP呈现效果类似，但执行方式却完全不同。Web应用无需提前编译，每次运行时依靠浏览器引擎解析页面。无论移动开发平台是Android或者iOS，只需开发一个版本即可实现跨平台运行，而且免除了在应用商店不断更新程序包的过程，大大提高了开发、更新和维护的效率。但Web APP很难访问移动终端的硬件设备，也无法调用移动平台的各种API，同时因为运行时解析，对设备性能和网络环境的要求都较高，用户体验度不高。

1.3混合应用开发模式

Native APP和Web APP各有优势，又都有劣势。Hybrid APP结合了前两种开发模式的优势，即使用跨平台Web技术开發应用程序，又可以直接访问移动设备硬件接口。Hybrid APP通常是基于第三方跨平台移动应用引擎框架进行开发，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。例如国外的PhoneGap、Titanium、Sencha，还有国内的AppCan、Rexsee、WeX5等等。Hybrid App开发模式正在被越来越多的公司和开发者所认同，逐渐成为主流的移动应用开发模式。

2开发平台的选择

本课题选用的是WeX5跨平台移动开发框架，该框架前端采用HTML5、CSS3、JavaScript标准，使用AMD规范的RequireJS、Bootstrap、jQuery等技术；基于PhoneGap框架，利用Cordova引擎提供的API可以轻松访问移动设备硬件；支持Java、.NET、PHP等多种类型的后端；提供一键部署功能，可以将开发的APP轻松部署到CloudX5云服务器上。WeX5页面包含w文件、JS文件和CSS文件3个页面，w页面由组件构成，定义页面的展现，JS文件以模块化的方式定义JS类，定义页面功能，CSS文件定义页面样式。WeX5支持单页Web应用模式，提供了Shell为每个页面实现路由，作为前端事件总线，负责页面间事件的派发和调度，可以使用户体验到Native APP的速度和流畅。本课题即是利用WeX5平台开发的一个单页Web应用。

3问卷调查系统的实现

3.1前端页面开发

前端页面开发需要定义界面元素和用户交互。WeX5提供了丰富的UI组件体系，包括布局组件、数据组件、表单组件……还提供了一个可视化、组件化、拖曳式的基于eclipse的IDE，完全做到了所见即所得。WeX5使用组件封装了HTML标签，基本包含了界面开发中需要用到的所有部件。校园问卷调查系统中所有的界面元素都使用WeX5提供的内置组件。

数据组件和列表组件是本课题中非常重要的两个组件。数据组件用于存储页面上的数据，并利用其他展现组件展示给用户。WeX5中提供了data和baasData两种数据组件，data用于绑定静态数据，baasData用于绑定后台数据库数据。数据组件可以实现双向感知，与之绑定的展现组件数据发生变化时，绑定的数据也同时更新，反之亦然。数据组件需要先添加到model组件下，再设置tableName属性绑定数据表，model组件提供了整个页面生命周期中触发的事件。

本课题实现的校园问卷调查系统，无论问卷列表页面或者问卷答题页面，都需要显示多条数据。列表组件list用于在界面上显示多条数据，设置list的data属性指向要显示的数据组件。list组件下面是listTemplateUI，再下面是li，用于显示的span或input组件都放在li下，并设置其bind-text属性即可绑定数据表中的字段。有时我们不需要显示数据表中的所有数据，这就需要对数据组件中的数据进行筛选，如教师端我的问卷中只需要显示当前用户发布的问卷，这就需要通过用户ID对数据表进行筛选，WeX5提供给我们两种筛选方法。一种通过设置list的filter属性，设定过滤条件表达式，列表中即可显示筛选后的数据。一种通过setFilter方法进行过滤，后者可以设定更加多样的筛选条件。

3.2后端服务开发

前端页面需要数据时，向后端服务发送请求，后端服务访问数据库并将查询结果返回前端页面。WeX5中可以自定义服务器端，也可通过Baas来，Bass是为移动互联网应用开发而提供的云服务。利用WeX5中的Bass服务，无需编写后端服务器代码，既能快速实现数据的请求和返回。本课题的后端服务主要是对数据基本的CRUD操作，因此使用WeX5提供的Bass服务快速实现后端服务开发。仅需在首选项设置中添加数据库连接，然后在Bass目录下创建包和服务，为每个数据表添加action即可。WeX5提供queryAction和saveAction两种action，前者用来查询数据，后者用来保存数据，可以满足基本的数据请求需求。

3）3.3WeX5不仅提供了丰富的组件和快捷的后端服务开发，而且能第三方插件进行集成。本课题对问卷调查结果的统计分析需要采用图表方式实现，WeX5集成Echarts可以快速实现该功能。Echarts是一个纯Javascript的图表库，支持柱状图、折线图等12类图表和7个交互组件，可以流畅的在PC和移动设备上运行。

WeX5集成Echarts图表的方式也非常简单，将Echarts资源目录dist复制到项目目录下，在需要引用该插件的JS文件中添加require（"./dist/echarts-all"）即可。修改option中各键对应的值，设定图标内容、显示数值等。最后通过如下语句将图表显示在页面中，其中chart为显示组件的xid值：

var myChart=echarts.init（this.getElementByXid（'chart'））；

myChart.setOption（option）；

4结论

随着移动设备性能的不断提升和网络环境的日益优化，Hybrid APP在移动端的用户体验和执行效率都有了很大的提升，兼于它本身的跨平台、开发维护成本低等优势，Hybrid开发模式正逐渐成为移动开发的主流模式。WeX5是一个Hybrid APP开发框架，为开发者提供了丰富的组件、强大的后端服务和便捷的插件，对开发成本不高、开发周期短的校园应用是一个不错的选择。

（作者单位：苏州市职业大学）