h5移动app开发-移动端app开发自学

本篇文章给大家谈谈h5混合app开发框架，以及基于h5框架的移动app开发对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。今天给各位分享h5混合app开发框架的知识，其中也会对基于h5框架的移动app开发进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

H5 手机 App 开发入门：技术篇手机 App 的技术栈可以分成三类

原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。

混合技术栈指的是开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。所以，混合技术栈其实是 Web 技术栈 + 容器技术栈，典型代表是 PhoneGap、Cordova、Ionic 等框架。

跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。

这个技术栈就是纯粹的容器技术栈，React Native、Xamarin、Flutter 都属于这一类。学习时，除了学习容器的 API Bridge，还要学习容器提供的 UI 层，即怎么写页面

总结：H5 开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如 React Native），因为它们的 UI 层借鉴了 Web 模型。

另外，混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。

不管什么技术，最终在 App 里面显示网页，一定需要一个网页引擎，这样才能解析网页。通常情况下，App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，可以显示网页。不同的 App 技术栈要显示网页，区别仅仅在于怎么处理 WebView 这个原生控件。

不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，作用都是一样的，差异在于功能的强弱。

使用html5开发移动端应用采用什么框架

常用的移动APP开发框架:

框架：PhoneGap

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。

优点：

可跨平台。phonegap框架帮我们解决了差异性，javascript与平台系统的连接由phonegap框架完成。

提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知。

可利用成熟javascript框架。如：Ext js、jQuery。

缺点：

性能差。运行速度慢h5移动app开发，UI反应延时。

不能完全跨平台。不同平台代码需要微调。

内存消耗，调试难度大。

框架：Ionic

Ionic 是一个强大的 HTML5 应用程序开发框架，Ionic 主要关注外观和体验，以及应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。

优点：

轻量级框架，运行速度快。

于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护。

通过 SASS 构建应用程序，接近原生。

缺点：

Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用。

需要结合插件使用。

框架：Hbuilder（国产）

HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势。

优点：

跨平台：同时支持iOS、Android、Symbian、Windows Phone。

开发工具：基于Eclipse的开发工具，集成UI控件与应用管理。

本地打包：无需配置环境，无需编译，本地一键打包。

代码加密：基于密钥的加密方式，无法破解，像混编一样保护html代码。

技术支持：技术支持及时响应，重视开发者建议和反馈。

缺点：

AppCan免费版因需要把源代码上传到厂商的服务器上打包，对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决，但企业版稳定尚待观察。

AppCan采用封装的组件，依赖性比较高。不是开源代码。

ppCan 不能很好的解决原生代码的功能。

Wex5(国产)

WeX5应用快速开发框架（含完整的SDK API及全部源码），一次开发、跨端运行。

优点：

高效精致的UI组件体系，基于jquery和bootstrap技术，采用增强的RequireJS模块化技术。

基于phonegap(cordova)框架，如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。

可视化拖拽式集成开发环境IDE，全能力的调试支持和智能代码提示。

缺点：

使用范围有限：适用：一般app、电商app、客服app、会员app、微店微商等。

用户量小，存在不稳定因素。

总结：

跨平台方面：大部分框架针对android和ios平台，需要做或多或少的代码调整，不能达到完全跨平台。

性能方面：根据不完全统计，Ionic的性能会更好一点。

PhoneGap出现最早，国内框架都是基于Phonegap开发出来的。

注意：

各框架在实现过程中都会遇到不同程度的坑，请根据框架的侧重点谨慎选择应用的框架。如果要基于Html5开发App，还需要进一步根据需求验证框架的可实施性、并进行不同框架的效果对比。

android h5 混合开发的应用软件有哪些一、Adobe Edge

目前还处于预览阶段的Adobe

Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是

Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。

动画和图形可以添

加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功

能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、

Safari和IE9等主流浏览器。

二、Adobe Dreamweaver CS6

Adobe

Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid

Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。

用户不但还能在Live View中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。

三、Adobe ColdFusion 10

ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。

四、Sencha Architect 2

在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 JavaScript应用，并实时预览。

五、Sencha Touch 2

Sencha Touch2是移动应用框架，也被看作是Sencha的HTML5平台。开发者可以用它开发面向iOS、Android和Blackberry、Kindle Fire等多种平台的移动应用。

六、Dojo Foundation Maqetta

来自于IBM的一个项目，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板

七、微软Visual Studio 2010 ServicePack 1

虽然一开始并不支持HTML5，但微软在2011年三月发布的Visual Studio 2010 SP1中提供了IntelliSense，追加了针对HTML5的一些元素。

八、JetBrains WebStorm 4.0

作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4.0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。开发者还可以在chrome浏览器中实时预览HTML文档。

九、Google Web Toolkit

该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。

十、DCloud HBuilder

HBuilder是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。h5做app和原生app有什么区别？

1.H5的性能很差，一般经常改的地方可以用H5，比如论坛，咨询之类的，而且限制也是很大，很多效果是没办法做到的。GUI框架的WebView普遍是这样的。如果一个APP全部由H5来做(不太可能h5移动app开发，送审很可能被拒)，那么会显得非常卡。

2.用iOS SDK，如果实现热更新是比较麻烦的。对于论坛，咨询这种模块，动不动就改版，做起来比较头疼，用H5就很合适了。尤其在APP跨安卓和iOS的时候，这类模块如果直接用H5，那么就很容易共用。

H5网页App开发和纯原生的App的差距主要聚集在以下几个方面：

1、动画

动画有很多种，比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择：css3动画、javascript动画、原生动画。

css3动画非常的消耗性能，如果某一个元素用到css3动画可能还看不出来，但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架调用底层的动画，但不管怎么样等于在原来的代码上包上了一层，性能还是不可避免的受到影响。

比如在一个新页面的载入上，如果调用底层动画要考虑的问题有两个，一个是本身资源页面的渲染问题，另一个是远程数据的获取。即便是这些动画能够很快的响应，但大量的css页面会导致渲染卡顿，滑入时可能会有白屏/机器卡顿的现象。为了解决这些性能问题又必须要用到预加载或模拟动画。即便是这样，滑入滑出的动画在低端的安卓机器上还是有很多问题，如果获取服务端数据处理的方式不合适，卡顿白屏的现象会更严重。具体看下面的数据获取方式。

2、获取服务端数据

首先要接受的是，这里的数据获取都是在资源页面上异步完成的，因为只有这样才能让这些资源页面完成预加载或者渲染。但是异步拿到的数据在填入页面中时可能会涉及DOM操作，众所周知，DOM操作非常消耗性能，如果页面小还好，页面稍大数据稍微复杂一点，频繁的DOM操作会导致明显的闪白。而且最重要的一点是，如果页面加载进来之后数据更新的速度太慢，也会让页面模板等待很长时间，对用户体验又不友好，总不能每次打开都像浏览器一样等待刷新是吧

这个问题如果没有得到解决，H5开发是很难承担大规模数据的页面，在它们之中频繁切换更是难上加难，那么肯定有人也会想到用MVVM的方式，其实我也写过一些基于MVVM的H5app开发，相对来说它们获取数据和更新数据的方式更敏捷更科学，但写的过程中又要注意很多H5独有的问题，这些问题在下面的页面切换里来讲。

3、页面切换

上面我们看到了几种不错的实现方式，比如预加载和模拟动画，甚至有批量的预加载，批量的截图模拟动画等等，虽然看起来很友好解决了不少问题，但事实上如果页面足够多就会引发另一个问题——页面的生存周期。

试想一下，如果引导页或者主页面缓存了5个子页面的资源，在跳转到响应的子页面时又会缓存这些子页面的下级页面资源，如此反复肯定会占据大量内存使APP的体验下降。那么怎么知道那些页面是需要的，最多缓存多少页面，什么时候结束哪些页面的生存周期呢？在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答，因此在页面较多内容较多的app开发中可能会因这些资源分配的问题降低性能。

这时候我们回过头来再看看MVVM的数据加载问题，实际上不管哪个MVVM框架，写过的人都知道管理这种新型的前端代码最重要的问题是内存的问题，你既要保证代码写的足够优雅没有任何内存泄露问题，也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放，这对全局有没有什么影响，在多个请求时也要合理的分配资源，甚至是复用这些父级页面传过来的缓存资源等等。较小的APP可能并不会有这些问题，如果你想用纯H5来开发大型app，这很可能会浪费你很多时间——而且结果还不会让你满意。

4、Android/iOS的区别

很多人都说纯H5app开发一次编写就能编译Android/iOS两种不同的APP，大大降低了成本。实际上这个观点本身就是值得怀疑的，如果你写过这类APP就能明白我在说什么，它们既不省事，又存在很多BUG，调试时尤其繁琐。举一个很简单的例子，Android和iOS在返回上一页的处理方式上就有明显的区别，iOS的顶部bar在全屏下怎样处理，Android机器出现smart bar怎样处理页面的布局，调用底层硬件时怎样区分不同的场景等等，你需要写一个又一个机型和系统的判断，然后分别在Android和iOS下调试，最后你却发现这并没有卵用，累的要死却什么没学到，只有一堆不知道什么时候会过时的经验。

现在做H5混合APP开发的人很多，但是纯H5却很年轻，很多问题都没有很好的解决，这几个是我在做这些APP时考虑最多的问题。最后说一个很少人注意到的H5优势，大家大谈H5APP时都是快速开发、低成本、多平台等等，但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。正是这些复杂多变的CSS样式消耗了性能，但是它带来了排版的多样性，能够细致到每一个字宽行高和风格的像素级处理，才是H5的优异之处。

html5 app开发用什么框架比较好

jquery mobile和bootstrap都是较好的框架

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

关于h5混合app开发框架和基于h5框架的移动app开发的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。h5混合app开发框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于基于h5框架的移动app开发、h5混合app开发框架的信息别忘了在本站进行查找喔。