webapp开发框架

不念不忘少年蓝@ 2022-12-12 04:50 208阅读 0赞

### 前言 ###

--------------------

快速增长的APP应用软件市场，以及智能手机的普及，手机应用：Native（原生）APP快速占领了APP市场，成为了APP开发的主流，但其平台的不通用性，开发成本高，多版本开发等问题，一直困扰着专业APP开发企业，和APP服务提供商。 安卓和IOS的操作方式，开发模式，界面UI显示方面的差别，也使得原生APP的不同版本体验有很大的区别，光是做兼容性调测，都要花费开发企业不少的时间。

近年来，另一种应用形态——基于HTML5技术的Web App也如雨后春笋般出现，于是关于原生APP与HTML5 APP 谁将成为未来的王者，APP开发者们一直争论不休。

html5最主要的优势：  
1、一套HTML5 APP 即可同时适用安卓及IOS平台，甚至WP平台，适配性和统一体验较好。  
2、版本服务器端更新，用户永远看到的都是最新的APP端信息。  
3、手机客户端及存储数据较少，节约用户手机空间  
4、技术难度较低，开发工作量小，开发成本低。  
**局限性：**  
用户体验大幅落后于原生APP，操作的流畅度，程序的执行效率，与原生APP都有较大差距；HTML5 APP 受网速的影响较大，在网络情况较差的情况下，HTML5 APP 往往连打开都困难，而原生程序，基本都能顺利打开运行（只是速度较慢）。

因公司项目需求，近端时间研究html5 app开发框架，发现有很多，查资料总结下。

### 1.框架：PhoneGap ###

官网：[http://phonegap.com/ ][http_phonegap.com_]  
简介： PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm,Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。  
优点：  
1.可跨平台。phonegap框架帮我们解决了差异性，javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器，或者说中间件。  
2.提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知(警告、声音和振动)、存储。  
3.可利用成熟javascript框架。如：Ext js、jQuery。  
缺点：  
1.性能差。运行速度慢，UI反应延时——这是个致命伤。(高端机影响不大)  
2.不能完全跨平台。不同平台代码需要微调。  
3.内存消耗大。  
4.调试难度大。

### 2.框架：Ionic ###

官网：[http://ionicframework.com/][http_ionicframework.com]  
简介： Ionic 是一个强大的 HTML5 应用程序开发框架，号称 Advanced HTML5 Hybrid Mobile AppFramework 是 AngularJS 移动端解决方案 可以帮助您使用 Web 技术，比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。  
**优点：**  
1.追求性能 运行速度快  
2.轻量级框架  
3.基于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护  
4.通过 SASS 构建应用程序。它提供了很多 UI 组件来帮助开发者开发强大的应用。  
5.接近原生。  
6.强大的命令行工具  
3.可利用成熟javascript框架。如：Ext js、jQuery。  
**缺点：**  
1.Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用  
2.需要结合插件使用。

### 3.框架：Hbuilder（国产） ###

官网：[http://dcloud.io/ ][http_dcloud.io_]  
简介： HBuilder是DCloud推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。  
**优点：**  
1、HTML5语法、HTML5+语法、三大浏览器扩展语法，尽收HBuilder中。  
2、每个浏览器发布新版后，一周内，其新增语法就收录入HBuilder。  
3、强大到令你震惊的Jquery语法提示！  
4、每个语法在哪个浏览器、哪个版本上是否可运行，这里都有。  
5、没有比这里更全的语法库，也没有比这里更全的浏览器兼容性数据库。  
**缺点：**  
1.云端编译，无法保证安全性。  
2.不能完全跨平台。不同平台代码需要微调。

### 4.框架：appcan（国产） ###

官网：[http://www.appcan.cn/ ][http_www.appcan.cn_]  
简介：AppCan是国内Hybrid App混合模式开发的倡导者，AppCan应用引擎支持Hybrid App的开发和运行。并且着重解决了基于HTML5的移动应用”不流畅”和”体验差”的问题。使用AppCan应用引擎提供的Native交互能力，可以让HTML5开发的移动应用基本接近Native App的体验。  
与Phonegap支持单一webview使用div为单位开发移动应用不同。AppCan支持多窗口机制，让开发者可以像最传统的网页开发一样，通过页面链接的方式灵活的开发移动应用。基于这种机制，开发者可以开发出大型的移动应用，而不是只能开发简易类型的移动应用。  
AppCan提供强大的设备调用能力，电话、短信、相机、LBS、传感器、数据库等常用的手机功能，开发者可以通过JS接口调用，轻松构建移动应用。  
**优点：**  
1.跨平台：同时支持iOS、Android、Symbian、Windows Phone  
2.原生体验：引入原生UI控件与交互支持（如Action Sheet等）  
3.开发工具：基于Eclipse的开发工具，集成UI控件与应用管理  
4.UI框架：提供强大的UI框架，更加易于实现页面布局与交互  
5.设备API：支持各种手机设备调用，如电话、相机、传感器、定位等  
6.本地打包：无需配置环境，无需编译，本地一键打包  
7.插件机制：支持第三方原生插件，支持JS插件  
8.代码加密：基于密钥的加密方式，无法破解，像混编一样保护html代码  
统计分析：应用分平台安装数统计，应用启动和使用情况统计  
9.开放平台：更具本土优势，已经对接Sina、QQ、百度等开放平台  
10.技术支持：技术支持及时响应，重视开发者建议和反馈  
**缺点：**  
1.AppCan免费版因需要把源代码上传到厂商的服务器上打包，对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决，但企业版稳定尚待观察。  
2.AppCan采用封装的组件，依赖性比较高。不是开源代码。  
3.AppCan 不能很好的解决原生代码的功能。

### 5.框架：Wex5(国产) ###

官网：[http://wex5.com/ ][http_wex5.com_]  
简介：WeX5应用快速开发框架（含完整的SDK API及全部源码），一次开发、跨端运行。  
【定位】开发面向消费者和公众的开放应用系统  
【适用】一般app、电商app、客服app、会员app、微店微商等  
【前端】安卓app/苹果app/微信服务号/PC web app  
【后端】后端数据处理组件，对接各主流技术平台  
【费用】完全开源，彻底免费，无任何限制  
**优点：**  
1.高效精致的UI组件体系，基于jquery和bootstrap技术，采用增强的RequireJS模块化技术。  
2.基于phonegap(cordova)框架，如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。  
3.可视化拖拽式集成开发环境IDE，全能力的调试支持和智能代码提示  
**缺点：**  
1.使用范围有限：适用：一般app、电商app、客服app、会员app、微店微商等  
2.用户量小，存在不稳定因素。

### 6.框架：ApiCloud(国产) ###

官网：[http://www.apicloud.com/ ][http_www.apicloud.com_]  
简介：APICloud是中国领先的“云端一体”的移动应用云服务提供商。APICloud推行“云端一体”的理念，重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。  
APICloud致力成为中国领先的移动垂直领域云服务商，帮助传统软件公司从B/S架构成功走向APP，帮助中国数百万web开发者转化成移动APP专家！。  
**优点：**  
1.提供开发的IDE。  
2.提供数据云API、统计云API、推送云API  
**缺点：**  
与Hbuilder存在版权问题，抄袭Hbuilder

### 7、JQuery Mobile ###

1.官方网站：[http://jquerymobile.com/ ][http_jquerymobile.com_]  
2.性质：UI框架  
3.说明：这个大名鼎鼎的JQuery的移动版本。跟JQuery一样是一个轻量级的JS库，一样使用HTML5+CSS+JS的技术。应为轻量级，所以在web加载时比Sencha有一点优势。缺点显而易见，UI控件太少了。因为JQuery Mobile 太普及了，也有很多第三方的扩展控件库例如JQuery Mobile Touch。比较有意思的是Sencha Touch 也融合了JQuery Mobile Touch。  
4.授权：完全开源，放心使用

2014年之前用过一段时间，全是html5+js的，过了2年了，出现了一些比较好的原生效果的开发框架：react native 和uniapp  
不同的开发框架有不同的优缺点，使用哪个还需要根据需求针对性的选用

[http_phonegap.com_]: http://phonegap.com/
[http_ionicframework.com]: http://ionicframework.com/
[http_dcloud.io_]: http://dcloud.io/
[http_www.appcan.cn_]: http://www.appcan.cn/
[http_wex5.com_]: http://wex5.com/
[http_www.apicloud.com_]: http://www.apicloud.com/
[http_jquerymobile.com_]: http://jquerymobile.com/