H5开发app用什么框架

H5开发app经常用到的框架有：jquery mobile框架，bootstrap框架，ionic框架，Mobile Angular UI框架以及Sencha Touch框架等等。

今天给大家介绍一些常用的HTML5开发APP的框架,这几款框架都是比较优秀的移动 Web 开发框架，能够帮助开发者更加高效的开发移动Web应用。

推荐教程：HTML5教程

jquery mobile框架

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。

bootstrap框架

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源码进行性能优化而来。

ionic框架

Ionic 是一个强大的 HTML5 应用程序开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

Mobile Angular UI框架

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

Mobile Angular UI的关键字有：

1 Bootstrap 3

2 AngularJS

Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate

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

Sencha Touch框架

Sencha Touch框架是世界上第一个基于HTML5的Mobile App框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。提供了丰富的 WEB UI 组件，可以快速的开发出运行于移动终端的应用程序。

Kendo UI框架

Kendo UI的每个方面都从底层开始构建，以提供强大的JavaScript应用程序性能。Kendo UI不是另一个jQuery UI的克隆，它的每一个决定都是从优化性能出发。从轻量级的、执行明显快于jQurey模板的内置模板库，到利用CSS3硬件加速的(如果可能)优化动画 和先进的虚拟化用户界面，Kendo UI不遗余力地提供高性能的客户端UI。

PhoneGap框架

说到跨平台开发工具，很多人首先会想到PhoneGap。这样一款能够让开发者使用HTML、JS、CSS来开发跨平台移动App的开源免费框架，一直以来都深受开发者喜爱，从iOS、Android、BB10、Windows Phone到Amazon Fire OS、Tizen等，各大主流移动平台一应俱全，还能让开发者充分利用地理位置、加速器、联系人、声音等手机核心功能。

业界很多主流的移动开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等。其中WeX5为国内打造，完全Apache开源，在融合Phonegap的基础上，做了深度优化，具备接近Native app的性能，同时开发便捷性也较好。

总结：

h5页面和app上怎么看视频flash地址

一般在视频观看界面下面，都会有个分享的按钮，你点击更多分享，就会弹出视频分享地址，就可以根据你的需求，复制那个视频地址，就可以了。

h5页面和app的区别

1、app和h5页面相比，拥有较少的页面跳转。网络环境一致的情况下，h5页面渲染是需要调取服务器的，但是app的渲染在本地，所以h5页面跳转更费力，不稳定感会强一些。所以h5页面想要减少跳转的话，一般都会使用交互技巧来隐藏文字。

2、h5页面页面展示空间比app小，给使用者带来的记忆负担大于app。人的大脑能短期记忆，但是这样的记忆是不稳定的。如果用户在滚动翻阅屏幕的过程中，需要临时记忆的信息越多，他们的表现是会越差的。现在，只有很少的人会有耐心慢慢看完长长的内容，h5页面相对于app而言，多了浏览器导航所占用的屏幕空间。

3、h5与app相比的优势在于h5页面可以随意的分享，而且迭代是很方便的，不同的系统只要适配一次即可。但是app的每次迭代需要在不同系统基础上迭代。

4、h5页面与app导航设计不同。h5页面使原有底部导航消失，有效的导航遇到挑战。在设计要考虑导航设计，顶部底部或左右侧，还要考虑如何快速跳转回重要页面，导航快捷键：如顶部固定位置、悬浮圆圈或非首屏时页面右侧悬浮。而app的导航更直接方便。

总之，h5页面其实基本能完成app的所有效果，但是它局限于浏览器这种打开方式，而app可以直接打开使用，方便一些。

APP内的原生的页面和H5页面怎么区分, 如何判断app中原生页面和h5 页面

判断app里面哪些是app原生写的哪些是代码方法：

把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。

显示404或则错误页面的是页面。

怎么看到视频和flash的地址啊？

您可以点浏览器的“查看”－－“源文件”

会出现一个文本文件，就是这个网页的源码。

你用记事本自带的“查找”功能，查找“swf"这个就是flash的后缀名，找倒以后把整个url地址复制下来，用下载工具就可以下载了。

视频文件用同样的方法，后缀就是rm 或其他的rmvb之类的。

优酷上传视频后怎么看视频的地址

视频窗口下有个分享的按钮！点击就是

h5页面和普通页面的区别

H5是指第5代HTML

5增加了一些新标签和新的属性，对于移动端开发有很大的优势。

HTML5将会取代1999年制定的HTML 401、XHTML 10标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：

新的解析规则增强了灵活性

新属性

淘汰过时的或冗余的属性

一个HTML5文档到另一个文档间的拖放功能

离线编辑

信息传递的增强

详细的解析规则

多用途互联网邮件扩展（MIME）和协议处理程序注册

在SQL数据库中存储数据的通用标准（Web SQL）

原生app嵌入h5页面，怎么实现不升级app更新H5页面的CSS

要native另做一个同步功能了。若native开启缓存，web静态资源非覆盖式发布，既能享受类似本地的 ，还能做到及时更新。

补充：

在静态服务器新建一个文本或json文件，里面写好版本号，版本号任意，要更新的时候就去改这个版本号。

native每次或定时去拉这个文件，并将版本号存在本地，以后拉取时比对本地版本号，有变化则重新拉取静态资源到本地。

更好的方法：

静态文件打包时生成改动文件映射表，这个表只有已经改动的文件名称或地址，native每次拉取这个映射表，发现有改动文件则只拉取改动文件。

静态文件打包时生成改动文件映射表，这个表只有已经改动的文件名称或地址，native每次拉取这个映射表，发现有改动文件则只拉取改动文件。

如果你是自己开发的app嵌套的webview打开的h5，h5和app交互一下，通过自己的app打开其他的app很简单，但是你要是从UC浏览器访问个自己的h5，再点击某个按钮打开手机上的app是做不到的。

因为苹果爸爸的各种封锁与限制，导致 app 中如果集成支付sdk上架会变得十分困难，总之是想办法去抽成。为了应对这种流氓政策，各小 app 公司纷纷偷梁换柱，通过 h5 支付从而绕开 sdk 支付。

常规的什么申请秘钥，配置回调地址等操作全部忽略了，直接进入核心步骤

支付宝的 h5 支付，返回一个 http 链接，是可以直接在 webview 中使用的，url 会重定向最终指向到支付宝的专属协议上。这里建议直接在 app 上直接通过 new webview 方式实现。

通过微信 h5 支付也是可以生成支付链接的，如果我们直接使用这个 url 的话，一定会抛一个错误“商家参数格式有误，请联系商家解决”， 微信支付的错误解决方案 中已经给出了原因，微信在这里校验了 http 请求中的 referer ，我们直接打开 url 请求头中是没有 referer 字段的，最容易想到的是通过 html 中的 a 标签跳转页面，a 标签会默认携带当前页面的主机地址。

所以就写了一个简单的中转页面，逻辑很简单，在中转链接中添加一个 pay_url 字段，pay_url 就是微信 h5 支付生成的链接，需要进行 encode 编码一下，我们可以在 js 里面重新解码，设置 a 标签的 href 熟悉，执行点击进行跳转。

找个服务器或者 oss 将页面放过去，配置一个域名，因为微信的 h5 支付是绑定了一个主域名，二级域名其实都是可以使用，假如最终配置为 payabccom ，那么我们最终的跳转链接为 http://payabccompay_url=http://wechatpaycomxxxxxx 。

不管是微信支付还是支付宝支付，其实想从浏览器唤醒支付 app，都是通过特有 schema 唤醒的，支付宝的协议是 alipay://，微信的协议是 weixin://，其实和 http 协议一样，例如： http://baiducom ，浏览器会捕获 http 协议，支付宝和微信都会捕获属于自己的协议，这一点不管在 android 还是 ios 上，也正是利用了这一点，才使我们 app 中唤醒支付宝或者微信成为可能。当然后面很可能也被限制，在将来相当长的一段时间是不会的，正是这些协议使得 h5 和 app 进行交互才使得如今移动操作系统更加繁荣。

通讯方法如下：

URL Scheme 是最常见的方法了，它的核心概念是拦截URL。

APP实现了一个webview，H5在其内打开。

它可以拦截到H5发生的跳转信息，如URL。如果以URL作为通信依据，就可以随意约定个URL，如：建立通信：https://__bridge_loaded__ 获取token：https://nativaAPI_getToken

H5就可以通过跳转到该地址被APP拦截，APP识别到了约定的URL触发对应方法。

2 拦截打印日志

APP的webview有对应的监听，可以拦截到JS的 alert 等。就可通过输出 alert("标识", "方法名", "参数") 等方法进行通信。IOS 由于安全限制，UIWebView 性能原因已弃用不考虑，WKWebView 对 alert 等方法做了拦截，需要做代理处理一下即可。Android 通过 WebViewaddJavascriptInterface 方法实现。但因 Android 42 以前的系统中没有正确限制使用WebViewaddJavascriptInterface，导致攻击者可以伪造JS桥接调用原生方法，存在安全漏洞，因此较少见。Google在Android 42 版本中修复了他，通过在Java方法内的最上面声明一句@JavascriptInterface，从而避免漏洞攻击。若想 42 版本前使用就要另寻出路，windowprompt 一问一答的机制恰好可以满足，Android onJsPrompt方法中去解析传递过来的文本，将处理结果返回给JS。

3 window注入

window注入就比较好理解了，就是双方在JS的window下写入通信变量。其实上面两种方法也多少会涉及window注入。它是一个对象，常用的有这几个方法（想用什么自己写入）。