HTML5开发WEB端APP介绍

前言：

     最近项目中使用HTML5等相关技术开发了一个基于WEB端的手机APP，现将开发过程中遇到的问题及解决方案、开发模式的优劣及这种开发模式的适用场景进行总结，希望能给涉及到H5开发APP提供一些帮助。

技术：

• 前端：HTML5、jQuery、CSS、MUI等
• 后端：Struts2、Hibernate、Spring等
• 交互：Ajax、json
• IDE：Eclipse、Hbuilder

        都是一些常见的技术，这里主要简单介绍下MUI和Hbuilder。

MUI: 是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验，号称最接近原生APP体验的高性能前端框架。主要特点为：轻量，不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K；原生UI，以iOS平台UI为基础，补充部分Android平台特有的UI控件。

         Hbuilder：是由DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。我们在这里使用Hbuilder的原因在于：可以很方便的打包APP项目，通过可视化的界面配置所需系统权限。

方案：

    先说下我最近做的项目的方案：APP只包含一个登陆页及相关获取手机权限的插件配置（Hbuilder可以直接勾选）。用户打开APP，弹出登录页，登录请求发送到服务器，处理完登录返回一个页面，APP这个时候直接加载服务器返回的页面，后续页面的请求也是直接与服务器交互，APP只负责加载服务器返回的页面。也就是说：除了登陆页，所有的操作请求及页面都有服务器处理，APP更像一个加了壳的手机浏览器。

这种开发模式的有一定的优缺点：

优势：

1.        开发速度快、成本低。相对于原生APP，使用H5开发更节省人力，不需要单独的两个团队开发。

2.        版本控制及BUG修复更优秀。由于页面由服务器直接返回，有问题直接后台修改，不需要用户单独更新APP。

3.        跨平台性优秀。HTML5 采用网络通用语言，不用考虑终端设备或者操作系统的不同。

劣势：

1.        用户体验差。由于不同的手机设备性能不同，造成用户图形界面和数据展示体验不同，对手机要求较高。

2.        不能离线访问。由于界面都是由服务器返回，离线将无法访问APP页面。

适用场景：

H5与原生APP各有优缺点，所以在预算有限的情况下，或者开发速度要求快的情况下以及偏信息展示少交互的APP更适合使用HTML5开发。

   H5开发的性能问题一直是不能得到广泛使用的原因，所以我们在后期的优化方向可以考虑混合式开发。一部分功能使用Native，一部分功能使用Web开发，一般做如下分工：

         1.偏交互的Native，偏浏览的Web：交互指复杂操作。

         2.已稳定的Native，试错中的Web：H5页面用来做低成本验证很好。

         3.访问硬件Native，信息展示Web：指手机里的各种传感器之类的。

         4.核心功能Native，周边辅助Web：把工作量多投在刀刃上。