h5混合开发框架初识

Posted 2022-11-30 川衡

混合开发框架比较

Dcloud

一、  开发工具 HBuilder 
二、  框架 mui
三、  文档地址 http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/95
四、  优缺点
优点：
1)  android低端机上流畅运行
2)  上手快，资料丰富
3)  Hbuilder开发工具很方便 
4)  Mui提供的前端插件很丰富 
5)  有html5+底层加速器，比常规的webapp的性能要快 
6)  5+的直接封装的跨平台api比较全，二维码、摇一摇、地图、微信分享、语音输入、推送这些常用api都是跨平台的，使用方便简单
        缺点：
1)  基于webview，性能比传统的webapp的性能好，但是比原生的还是要差一点
2)  影响力不如 reactNactive大

React native

一、  开发工具 不限
二、  框架 依赖javascriptCore的非hybird app
三、  文档地址 http://reactnative.cn/
四、  优缺点
优点：
1)  不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
2)  有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用 
3)  可以直接使用Native原生的「牛逼」动画 
4)  可以通过更新远端JS，直接更新app
        缺点：
1)  前端的JavaScript用的语法是jsx，和JavaScript有一点的区别，界面布局和CSS完全不一样 
2)   关于推送、第三方（比如微信分享、登陆、支付）估计要自己来实现
Dcloud与reactNative之间比较：对流畅性要求不太高的，可以考虑MUI。开发速度快，成本低。对流畅性要求高的，推荐用reactNactive.

Ionic

一、  开发工具 不限
二、  框架  基于AngularJS 一起开发。交互界面，有很多迷人的功能，包括集成的仿真器基于Cordova 的 app 打包器。
三、  文档地址 http://ionicframework.com/docs/v2/api/components/button/Button/ 目前有版本1、版本2之分
四、  优缺点
优点
1)  追求性能 运行速度快 
2)  轻量级框架
3)  基于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护
4)  通过 SASS 构建应用程序。它提供了很多 UI 组件来帮助开发者开发强大的应用。
5)  接近原生。
6)  强大的命令行工具
7)  可利用成熟javascript框架。如：Ext js、jQuery。
        缺点：
1)  Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用
2)  需要结合插件使用

phoneGap

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

参考学习链接：
 http://www.bcty365.com/content-74-2640-1.html
 http://www.oschina.net/translate/comparing-the-top-frameworks-for-building-hybrid-mobile-apps-1
 http://www.cnblogs.com/kingboy2008/p/5261771.html
 http://www.cocoachina.com/webapp/20141222/10718.html