无线互联科技
Wireless Internet Technology
No.13 July,2019
第13期
2019年7月
基于WeX5的前端开发案例设计
----以“记账本'APP为例
黄国华eclipse开发手机app
(东莞市经济贸易学校，广东东莞523106)
摘要：运用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-Co
1.3Hybrid APP
混合模式(Hybrid)APP是指利用网页语言与程序语言或框架进行编写运行的应用程序。Hybrid APP兼具Native APP里良好用户交互体验的优势，又能跨平台运行。
2职校学生计算机操作水平的调查
现在的职校学生几乎每人一台智能手机，但由于职校学生的生源普遍较差，纪律性、自觉性都比较弱，在课堂上玩手机已经成为职校学生的常态，这对正常的课堂教学秩序影响很大。
调查结果显示：26%的学生学习目标不明确，升学的压力不大，没兴趣学；36%的学生认为自己操作水平不高，没信心学；38%的学生认为自己愿意尝试去学习移动APP开发。
职校学生虽然升学的压力不大，自律性较低，但喜欢尝试接触新鲜事物，而且极度渴望得到肯定，享受成就感。如果能有一款难度低、易上手，能在短期内看到相关成果的前端开发工具，提高学生学习的主观能动性，便可以达到事半功倍的效果。
3WeX5工具
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案例选择
随着经济的高速发展，很多家庭经济较富裕，加上现在的职校生很多都是独生子女，家长对其要求一一满足，慢慢地让学生养成贪图享受、花钱不节制的习惯，甚少关心钱花在何处，是否物有所值。
职业院校有别于其他中小学，它既重视学生所学技能，也注重校园氛围，经常会进行集体活动，需要一定的经济花费。班费是班主任工作中的财力资源，它是指以货币形式表现，专供班级使用的经费。班费的出现在一定程度上能解决上述问题，但学生平时花钱不节制、不记账、怕麻烦，使得班费的使用没人监督，而且班费问题比较敏感，学校不能管、老师不给管，如何让学生有序管理班费一直是个让人头痛不已的问题"。如果有一个工具软件能让学生随手记账、随时查账，实时监控每一笔班费的收支明细，是否会对他们有所帮助？鉴于此，笔者将设计一款与记账查账相关的移动APP。4.2需求分析
"记账本”APP面向的对象是需要记账查账的职业院校学生。他们使用APP的目的可以简单地认为就是进行手工记账，加强对班费的监督。针对他们的这些特点，这款APP主要使用“不同角、不同权限”的形式进行明确分工，要求在规定的时间内对每一笔班费的收支明细和去向作好相关的记录和上传相关的凭证单据，并且能生成相关的详细账单和
作者简介：黄国华(1982—)，男，广东三水人，讲师，硕士；研究方向：职业技术教育，软件开发。
-35-
No. 13July, 2019第13期
2019年7月无线互联科技•软件透视自动计算结余，帮助他们实时掌控班费的相关动向。
4.3开发流程
针对上述的需求，以“记账、查账”为核心内容的手机
APP 应用开发流程如图1所示。
生成用户可以扫码下载的应用软件(6)发布与部署。发布时可选择平台的_键云部署，省时省 力，也可以按具体的需要和相关的操作自行配置第三方■服务器。 4.4应用推广APP 应用开发完成后，分为学生、教师、系统管理员3种 角，各角的功能界面如图2所示
(启动软件WeX5〕(导入素材 I 将素材批星导入模型资源J
| 一键云部署) (第三方服务月
记账本APP 图1手机APP 应用开发流程
(1) 开发前准备工作。通过问卷调查进行收集与整理
学生的意见需求，以及通过相关软件将图片处理成APP 工
具可识别的文档格式和类型，作为素材备用。同时，将收集
整理汇总后的详细需求分别设计好相应的UI，首次币发行
(Initial  Coin  Offering, ICO)和MySQL 数据库。
(2) 启动工具软件。选择一款操作简便、易上手的APP
开发工具，启动工具软件。本APP 开发采用面向国内中高职
院校Hybrid 开发的北京起步科技WeX5开发工具。
(3) 导入素材。通过平台的素材管理模块，对前期的素
材进行批量导入到WeX5工具软件。
(4) 布局与编码。在WeX5工具软件中根据不同的需求
选择合适的界面模板，加入素材内容，按实际的功能调整页
面布局与代码编写。
(5) 打包生成应用。通过WeX5工具软件的模型编译，
用户可以借助WeX5工具软件集成的Chrome 浏览器进行本
地调试，所有功能调试成功后，就能按向导提示进行打包，图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-4&
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
-
36
-

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。