html5手机app开发,html5手机端开发

html5 app开发框架有哪些

①：PhoneGap

PhoneGap 恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的cordova 商业版本。

②：Ionic

IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。

③：Mobile Angular UI

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。

Mobile Angular UI的关键字有：

Bootstrap 3

AngularJS

Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。

AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate

响应式媒体查询是将bootstrap作为单独的文件，你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。

④：Intel XDK

Intel XDK 是Inter开发的一款跨平台开发工具，我们可以很容易的通过Intel XDK开发应用，你需要做的只是下载他们的应用开发工具 ，有Linux、Windows和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat.

⑤：Appcelerator Titanium

 Appcelerator’s Titanium 不同于其它框架的是，它是一个开源的框架。

 Titanium是混合式移动应用开发的一站式解决方案，你只需要下载 Titanium studio就可以解决所有的事情，Titanium SDK包含了很多手机平台的APIs和后端云服务。

 Titanium使用 Alloy，Alloy是一个快速开发的手机应用MVC框架， 模块式开发可以大大减小开发时间，提高代码复用。

⑥：Sencha Touch

Sencha Touch 同样也是HTML5手机应用跨平台开发框架，运行iOS/Android/Blackberry。它已经诞生很多年了，现在已经成为很常用的混合式编程开发框架。

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。

⑦：Kendo UI

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。

相关问答

Q1: 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，作用都是一样的，差异在于功能的强弱。

Q2: HTML5能不能开发手机app

可以开发手机app，这个就是常说的混合开发，然后进行封装使用，但是这样没有原生的流畅，但是成本低啊，比原生开发成本最少低一半，对于新创业的平台，还是可以的。

Q3: html5的手机客户端app怎么开发

如果你还没有属于自己的hrml5的手机站的话，那么你需要找人或者自己搭建一个H5的手机站。

搭建好手机站之后可以去找第三方的一个打包平台把你的手机站封装一下，比如说一门app、安卓益、奇门应用这些平台，封装好之后就可以生成安装包了 。

如果是要上架的话你在封装的时候上传一下发布证书，然后你就可以去开发者中心上传你的app到AppStore审核了。审核通过你的app就制作完成了。

Q4: h5做app和原生app有什么区别？

H5APP即是一种框架型APP开发模式(HTML5APP框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

原生APP又称NativeApp，该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

1、开发方面的区别（这个地方太专业啦，请教了团队的开发小伙伴）

目前ReactNative开发越来越火，微信小程序是基于ReactNative开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件，也能顺利发布到苹果APPstore。

移动WebApp

1、因为运行在移动设备的浏览器上，所以只需要一个开发项目

2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,RubyonRails,Python)

3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap,SenchaTouch2以及AppceleratorTitanium等等。

原生App

1、每一种移动操作系统都需要独立的开发项目

2、每种平台都需要独立的开发语言。Java(Android),Objective-C(iOS)以及VisualC++(Windowsphone)等等

3、需要使用各自的软件开发包，开发工具以及各自的控件

2、能力方面的区别

移动WebApp

只能使用有限的移动硬件设备功能。

原生App

能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

移动WebApp

1、从移动设备上的浏览器访问

2、不需要安装额外的软件

3、软件更新只需要服务器就够了

4、因为现在没有什么商品或卖场提供这种App，不过一般都是嵌套在系统内部，或者内部系      统中使用

5、跨平台开发，用户不需要去卖场来下载安装App

6、需要过度依赖网络，没有任何缓存数据

7、任何时候都可以发布App，因为根本不需要官方卖场的审核

8、如果你已经有了一个WebApp，你可以使用responsivewebdesign来辅助改进(这也是优势?)

9、所有的用户都是用同样的版本

原生App

1、直接下载到设备

2、以独立的应用程序运行(并不需要浏览器)

3、用户必须手动去下载并安装这些原生App

4、有一些商店与卖场来帮助用户寻找你的App，appstore里面应有尽有。

5、原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架;

6、手机用户无法上网也可访问APP应用中以前下载的数据。

7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。

9、用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

即使两者之间有很大的区别，即使H5有一大堆的坑和问题，但是仍旧不妨碍移动WEB无所不在，移动web是目前唯一的支持各种设备访问的平台，也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与PC系统任务有效的结合在一起。而原生nativeapp可以充分利用设备的特性，这一点是它得天独厚的优势。

正式因为它有复杂多变的CSS样式消耗了大量性能，它才有一个更有竞争力的优势——它带来了多样性的排版，能够细致到每一个字宽行高和风格的像素级处理，能够给你带来不一样的图文汇合的排版。

Q5: 怎么用HTML5开发手机app

你说的这个主要制作思路是使用响应式设计，结合html5和css的一些特性制作（主要是css3的媒体检查，根据不同视口载入不同样式），但制作出来的东西能否被称为手机app，这个还要看功能，如果你制作出来的东西能完成某些功能或者某种任务，这能被叫做webapp，如果不能就不要叫什么app，最多算是一种手机展示方式。

至于安卓和ios版本的问题，考虑主要是图片分辨率的问题，区别不大。