基于WeX5的前端开发案例设计

黄国华

摘   要：运用HTML5技术进行移动APP开发不但高效而且可以节省大量的时间和人力成本。文章通过对职校学生计算机操作水平的调查和前端开发技术的分析，突出了WeX5前端开发工具的优势，并结合职业院校的前端开发课程资源的建设实践，对移动APP的开发流程及应用推广进行了探究。

关键词：案例设计;移动APP;前端开发

随着科技的发展与课程的深入，越来越多职业院校渐渐地发现，选择正确开发工具的重要性。基于此，一款好用、易用的前端开发工具WeX5应运而生。它由于具有开源免费、快速开发和模块化设计等优点，很多职业院校、高职院校，甚至本科院校都将它列为相关专业的必修课。

1    概念界定

1.1  前端开发

前端开发是指通过HTML，层叠样式表（Cascading Style Sheets，CSS）及JavaScript以及衍生出來的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

1.2  原生APP

原生APP（Native APP）是一种基于智能手机操作系统（如iOS，Android，WP）并使用官方推荐的方式进行编写运行的应用程序。一般使用的开发语言为Java，C++，Objective-C。

1.3  Hybrid  APP

混合模式（Hybrid）APP是指利用网页语言与程序语言或框架进行编写运行的应用程序。Hybrid APP兼具Native APP里良好用户交互体验的优势，又能跨平台运行。

2    职校学生计算机操作水平的调查

现在的职校学生几乎每人一台智能手机，但由于职校学生的生源普遍较差，纪律性、自觉性都比较弱，在课堂上玩手机已经成为职校学生的常态，这对正常的课堂教学秩序影响很大。

调查结果显示：26%的学生学习目标不明确，升学的压力不大，没兴趣学;36%的学生认为自己操作水平不高，没信心学;38%的学生认为自己愿意尝试去学习移动APP开发。

职校学生虽然升学的压力不大，自律性较低，但喜欢尝试接触新鲜事物，而且极度渴望得到肯定，享受成就感。如果能有一款难度低、易上手，能在短期内看到相关成果的前端开发工具，提高学生学习的主观能动性，便可以达到事半功倍的效果。

3    WeX5工具

WeX5是北京起步科技公司推出的一款开源、免费、跨端的开发工具。它具有可视化、快速开发、跨端运行、开源免费等优点。

3.1  快速开发

WeX5基于Eclipse IDE可视化环境，即所见即所得，能以向导化、模块化形式快速开发，在开发工具上能将开发、编程、调试、打包进行一体化高度集成，代码提示、真机调试，开发者使用起来非常方便而且并不需要原生开发经验即可快速上手。

3.2  跨端运行

WeX5支持Hybrid混合开发，能进行Android APP开发，iOS APP开发、Web APP开发，省时省力，一次开发，多端运行。

3.3  开源免费

WeX5遵守Apache开源协议，完全免费，全套框架、组件、原生代码随意用，无限制。

3.4  标准扩展

WeX5前端完全恪守HTML5+CSS3+JS标准，使用Reurirejs，Jquery和Bootstrap技术，内置支持大量丰富的UI组件，采用业界主流Phonegap/Cordova后端，支持所有主流技术和平台（Java，Node，PHP，.NET等），同时，也支持云应用程序接口（Application Programming Interface，API）、一键云部署以及第三方的UI或资源。

4    基于WeX5的前端开发案例设计

4.1  案例选择

随着经济的高速发展，很多家庭经济较富裕，加上现在的职校生很多都是独生子女，家长对其要求一一满足，慢慢地让学生养成贪图享受、花钱不节制的习惯，甚少关心钱花在何处，是否物有所值。

职业院校有别于其他中小学，它既重视学生所学技能，也注重校园氛围，经常会进行集体活动，需要一定的经济花费。班费是班主任工作中的财力资源， 它是指以货币形式表现， 专供班级使用的经费。班费的出现在一定程度上能解决上述问题，但学生平时花钱不节制、不记账、怕麻烦，使得班费的使用没人监督，而且班费问题比较敏感，学校不能管、老师不给管，如何让学生有序管理班费一直是个让人头痛不已的问题[1]。如果有一个工具软件能让学生随手记账、随时查账，实时监控每一笔班费的收支明细，是否会对他们有所帮助？鉴于此，笔者将设计一款与记账查账相关的移动APP。

4.2  需求分析

“记账本”APP面向的对象是需要记账查账的职业院校学生。他们使用APP的目的可以简单地认为就是进行手工记账，加强对班费的监督。针对他们的这些特点，这款APP主要使用“不同角色、不同权限”的形式进行明确分工，要求在规定的时间内对每一笔班费的收支明细和去向作好相关的记录和上传相关的凭证单据，并且能生成相关的详细账单和自动计算结余，帮助他们实时掌控班费的相关动向。

4.3  开发流程

针对上述的需求，以“记账、查账”为核心内容的手机APP应用开发流程如图1所示。

图1  手机APP应用开发流程

（1）开发前准备工作。通过问卷调查进行收集与整理学生的意见需求，以及通过相关软件将图片处理成APP工具可识别的文档格式和类型，作为素材备用。同时，将收集整理汇总后的详细需求分别设计好相应的UI，首次币发行（Initial Coin Offering，ICO）和MySQL数据库。

（2）启动工具软件。选择一款操作简便、易上手的APP开发工具，启动工具软件。本APP开发采用面向国内中高职院校Hybrid开发的北京起步科技WeX5开发工具。

（3）导入素材。通过平台的素材管理模块，对前期的素材进行批量导入到WeX5工具软件。

（4）布局与编码。在WeX5工具软件中根据不同的需求选择合适的界面模板，加入素材内容，按实际的功能调整页面布局与代码编写。

（5）打包生成应用。通过WeX5工具软件的模型编译，用户可以借助WeX5工具软件集成的Chrome浏览器进行本地调试，所有功能调试成功后，就能按向导提示进行打包，生成用户可以扫码下载的应用软件[2]。

（6）发布与部署。发布时可选择平台的一键云部署，省时省力，也可以按具体的需要和相关的操作自行配置第三方服务器。

4.4  应用推广

APP应用开发完成后，分为学生、教师、系统管理员3种角色，各角色的功能界面如图2所示

图2  APP各角色的功能界面

（1）由于“记账本”APP的使用者是职校的在校学生，当中需要一名学生来记录所有班费的动向，同时，在使用过程中需要有同学、班主任老师的监督。班主任老师与其他同学通过APP可清楚了解本班的班费收支情况，真正实现公开、透明，随时随地查账。

（2）“系统管理员”主要负责学生和教师信息的审核与维护，更重要的是要保障数据的完整性，要不定期地对系统的数据进行备份。

APP开发制作完成后，想要充分发挥其作用就要进行应用的推广，笔者通过“草料二维码”把APP应用的下载或打开方式分别做成不同版本的二维码，通过在全校的不同场合上对学生、教师进行宣传，供师生免费使用。师生们只需要根据自己的手机类型分别扫描不同版本的二维码，即可下载APP安装在手机上或直接扫码打开APP，只要有网络就能通过自己的账号密码登录APP进行记账或查账。

5    结语

充分利用云计算、大数据等信息化手段，开发出更多高效、实用性强的APP工具，将在校园领域有着广阔的应用前景。

[参考文献]

[1]陈志峰.班主任工作中的班費问题研究[J].太原城市职业技术学院学报，2010（10）：105-106.

[2]山少男.基于WeX5的Android系统记账本HTML5 APP开发与设计[J].电脑编程技巧与维护，2017（12）：47-48.

Design of front-end development case based on WeX5：

taking the “Bookkeeping” APP as an example

Huang Guohua

（School of Business and Economics of Dongguan， Dongguan 523106， China）

Abstract：Mobile APP development using Html5 technology is not only efficient but also saves a lot of time and labor costs. Through the investigation of computer operation level and the analysis of front-end development technology of secondary vocational students， this paper highlights the advantages of WeX5 front-end development tools， and combines the construction practice of front-end development curriculum resources of secondary vocational schools to explore the development process and application of mobile APP.

Key words：case design; mobile APP; front-end development