oc与html5的交互 - 简书
oc与html5的交互
1、概念1)机制a、Objective-C语言调用JavaScript语言，是通过UIWebView的- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)方法来实现的。该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。b、javaScript语言调用Objective-C语言，并没有现成的API，但是有些方法可以达到相应的效果。具体是利用UIWebView的特性：在UIWebView的内发起的所有网络请求，都可以通过delegate函数得到通知。后来针对这个问题有了2）Objective-C调用JavaScript代码的时候是同步的- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)3）JavaScript调用Objective-C代码的时候可以看作是异步的（js中没有多线程）- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationT4）常见的JS调用a.获取页面titleNSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];b.获取当前的URLNSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];2、调用步骤：1）定义html页面的回调方法
2）在js页面实现html页面定义的回调方法
window.location.href是页面跳转
3）实现在oc中调用js方法的接口
4）调用（调用js方法）的接口
随着H5技术的兴起，在iOS开发过程中，难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等场景。 iOS原生应用和web页面的交互大致上有这几种方法：1）URL拦截协议；（兼容iOS6及以下时可考虑，本文介绍）2）第三方框架WebViewJavaSc...
一、简介 近两年随着HTML5的迅速发展与日趋成熟，越来越多的移动开发者选择使用HTML5来进行混合开发，不仅节约成本而且效果绚丽，那么作为内置浏览器的WebView被重视起来，不管是iOS还是Android，都要是使用WebView来加载HTML5页面，甚至有些程序打开后...
一、利用WebViewJavascriptBridge实现Native和Web的交互 参考链接1参考链接2 四个必须知道的方法: 一、Native(即:Objective-C或Swift)调用Javascript方法,也就是说,调用了该方法,程序就是自动执行html页面中的...
前言 关于UIWebView的介绍，相信看过上文的小伙伴们，已经大概清楚了吧，如果有问题，欢迎提问。 本文是本系列文章的第二篇，主要为小伙伴们分享下WKWebView相关的内容： iOS中UIWebView与WKWebView、JavaScript与OC交互、Cookie管...
近两年随着HTML5的迅速发展与日趋成熟，越来越多的移动开发者选择使用HTML5来进行混合开发，不仅节约成本而且效果绚丽，那么作为内置浏览器的WebView被重视起来，不管是iOS还是Android，都要是使用WebView来加载HTML5页面，甚至有些程序...
禾谷， 今天你考完最后一门课，也意味着正式向三年级告别了。考完试后，你没有像其他同学一样直接回家，而是被歌舞剧团留下来排练了，因为这个月底你们有一场演出。 虽然剧团的老师发回来的现场照片你们是像春游和聚会一样开心的，但回到家见到我的第一句话，你说排练打乱了你所有的计划，你表...
“我喜欢你身上的味道”，这是许一生对知暖说的第一句话。 “我不喜欢我身上的味道”，这是知暖想跟一生分手时说的第一句话。 说到这个味道，啊，那是他们的第一次见面，那天去食堂吃饭知暖没带餐巾纸，无奈，只能用了室友的，那种香味知暖非常不喜欢，确切的说知暖不喜欢所有浓的香气，尤其是...
朋友圈和网易新闻一度是我最喜欢的两个功能，每次换了新手机，首先就会装上微信和网易新闻，无聊的时候刷刷朋友圈，点个赞表示已阅，或者回复一句呵呵，或者秀一下美食或者恩爱。网易新闻也是，看新闻，看评论，看NBA，看轻松一刻。 乐此不疲。 直到有一天，我在这里看到一篇文章，就是讲关...
乖乖就像她的名字一样，从小在家听父母，在校服从老师安排，是家长们眼里别人家的“乖宝宝”。有了长辈们的一手包办，乖乖平安健康的长到十八岁。这一年她高考失利，发挥失常，成绩并不理想，在父母的安排下报了师范类学校，英语专业。九月份，乖乖满心欢喜的去了学校，她天真的以为大学生活一定...
又见周一 虽然我不知道我还会在这个公司多久，我也不知道我还能在这个公司和你和大家保持这样的状态多久，但不管是累是开心委屈烦躁难过，我都很珍惜能看到你的每一天。 可以和你一起上班的每一个周一我都不讨厌。 我想，从一开始ck对你的误会。到现在她自己都忘记叮嘱过我不要告诉你她和T...iOS与H5的交互（四种） - 简书
iOS与H5的交互（四种）
之前项目中有一部分内容和H5的小伙伴协同开发的，使用了各种与H5的交互，现在有时间整理出来，和大家分享一下。
这篇文章会介绍这么几个内容：
1、Html调用OC的方法。
2、Html向OC传值，单个值与多个值。
3、OC调用Html的方法。
4、OC向Html传值，多个值。
为了能让小伙伴们能够深入体会，作为Html小白，我就从网上现学现卖的。
Html都是我自己写的，可能会有很多不雅观的地方，还请各位看官多多包含～
第一步，新建一个项目TestHtml5。
第二步，新建三个文件分别为
主体内容，包含各个按钮及其方法的实现。
可以将方法写在这里并调用，然而为了大家方便查看方法，我没有使用这个文件，我把内容都放在File.html中了。
设置html的样式等。
第三步，新建一个继承于NSObject的CustomJSObject对象，导入&JavaScriptCore/JavaScriptCore.h&头文件，并定义一个CustomJSProtocol。
第四步，我们先进行Html的编码。
&!DOCTYPE html&
&title id = "title"&Title of this page&/title&
&!--样式从File.css文件中获取--&
&link rel="stylesheet" type="text/css" href="File.css"&
标签，css中设置样式时，会根据id来设置--&
&p id = "wql"&This is my first try to write Html5 file.&/p&
加粗的文本，css中设置样式时，会根据id来设置--&
&b id = "myp"&This text is bold&/b&
&br/&&br/&&br/&&br/&
按钮，点击按钮触发helloWQL()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：点击后触发OC的方法--&
&button type="button" onclick = "helloWQL()"&点击出弹框&/button&
定义各个方法--&
&script type="text/javascript"&
//调用native的helloWQL方法，native对象由OC注入
function helloWQL(){
native.helloWQL();
第五步，在CustomJSProtocol中新添加方法helloWQL。然后在CustomJSObject中实现helloWQL方法,并写好相关回调。
第六步，在ViewController中编码，加载本地的Html。
//加载本地的html文件
- (void)loadWebView
self.mainWebView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 100, PhoneScreen_WIDTH, PhoneScreen_HEIGHT-100)];
self.mainWebView.delegate =
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"File" ofType:@"html"];
NSString *htmlCont = [NSString stringWithContentsOfFile:htmlPath
encoding:NSUTF8StringEncoding
error:nil];
[self.mainWebView loadHTMLString:htmlCont baseURL:baseURL];
[self.view addSubview:self.mainWebView];
第七步，在完成html加载的时候，也就是webViewDidFinishLoad方法中进行context注入：
- (void)webViewDidFinishLoad:(UIWebView *)webView
//加载完成后注入object，让我们可以得到html的点击事件
[self addCustomAction];
- (void)addCustomAction
//获取context，这里的path是固定的
JSContext *context = [self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//自定义的JS对象，需要注入到context中
CustomJSObject *object = [[CustomJSObject alloc]initWithSuccessCallback:^(NSDictionary *dic) {
if ([[dic.allKeys firstObject] isEqualToString:@"helloWQL"]) {
//html调用OC的方法
NSLog(@"HelloWQLDic:%@",dic);
[self webViewClickButtonAction];
} faileCallback:^(NSDictionary *dic) {
NSLog(@"FailDic:%@",dic);
//这里要使用native，html那边调用的是native
context[@"native"] =
- (void)webViewClickButtonAction
NSLog(@"OC 接收到 H5按钮点击事件");
此时我们点击html的按钮就能够调用OC的方法了。
小伙伴们会不会有点云里雾里的，我觉得口头描述会有一点复杂，我就直接做了一张图，请笑纳：
流程梳理.png
看看点击按钮会有什么效果：
点击效果.png
第八步，从Html传值给OC。
整体的流程和调用方法一致的，需要注意的是：传值的时候，请注意方法名的大小写，尤其是传多个参数时，第二个参数的名字要大写开头。
&!DOCTYPE html&
&title id = "title"&Title of this page&/title&
&!--样式从File.css文件中获取--&
&link rel="stylesheet" type="text/css" href="File.css"&
标签，css中设置样式时，会根据id来设置--&
&p id = "wql"&This is my first try to write Html5 file.&/p&
加粗的文本，css中设置样式时，会根据id来设置--&
&b id = "myp"&This text is bold&/b&
&br/&&br/&&br/&&br/&
按钮，点击按钮触发helloWQL()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：点击后触发OC的方法--&
&button type="button" onclick = "helloWQL()"&点击出弹框&/button&
&br/&&br/&
按钮，点击该按钮会触发sendValueFromHtml()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：将某个值传给OC，我们这里分别传了一个值、两个值--&
&button type="button" onclick = "sendValueFromHtml()"&点击传值&/button&
&br/&&br/&
定义各个方法--&
&script type="text/javascript"&
//调用native的helloWQL方法，native对象由OC注入
function helloWQL(){
native.helloWQL();
function sendValueFromHtml(){
//需要注意的是传两个值的时候，第二个参数应该以大写字母开头（WithValueTwo）。
//正确 sendValueFromHtmlToOCWithValue:(NSString*)valueOne WithValueTwo:(NSString*)valueTwo
//错误 sendValueFromHtmlToOCWithValue:(NSString*)valueOne withValueTwo:(NSString*)valueTwo
native.sendValueFromHtmlToOCWithValue('This is send one Value');
native.sendValueFromHtmlToOCWithValueWithValueTwo('Good','Boy');
传值的效果：
传值效果.png
第九步：OC调用Html的方法。
这个比较简单需要Html为我们预留方法即可。我写了一个按钮，按钮触发以下方法：
//调用html的方法
- (void)callHtmlMethodAction:(UIButton*)sender
JSContext *context = [self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
CustomJSObject *object = [CustomJSObject new];
NSString *textJS = [NSString stringWithFormat:@"methodForOC()"];
[context evaluateScript:textJS];
context[@"native"] =
看看File.html文件：
&!DOCTYPE html&
&title id = "title"&Title of this page&/title&
&!--样式从File.css文件中获取--&
&link rel="stylesheet" type="text/css" href="File.css"&
标签，css中设置样式时，会根据id来设置--&
&p id = "wql"&This is my first try to write Html5 file.&/p&
加粗的文本，css中设置样式时，会根据id来设置--&
&b id = "myp"&This text is bold&/b&
&br/&&br/&&br/&&br/&
按钮，点击按钮触发helloWQL()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：点击后触发OC的方法--&
&button type="button" onclick = "helloWQL()"&点击出弹框&/button&
&br/&&br/&
按钮，点击该按钮会触发sendValueFromHtml()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：将某个值传给OC，我们这里分别传了一个值、两个值--&
&button type="button" onclick = "sendValueFromHtml()"&点击传值&/button&
&br/&&br/&
按钮，点击该按钮会触发getValueFromOC()方法，按钮上的文本是“从OC拿值”--&
该按钮的目的是：点击按钮后，从OC获取某个值--&
&button type="button" onclick = "getValueFromOC()"&从OC拿值&/button&
定义各个方法--&
&script type="text/javascript"&
//调用native的helloWQL方法，native对象由OC注入
function helloWQL(){
native.helloWQL();
function sendValueFromHtml(){
//需要注意的是传两个值的时候，第二个参数应该以大写字母开头（WithValueTwo）。
//正确 sendValueFromHtmlToOCWithValue:(NSString*)valueOne WithValueTwo:(NSString*)valueTwo
//错误 sendValueFromHtmlToOCWithValue:(NSString*)valueOne withValueTwo:(NSString*)valueTwo
native.sendValueFromHtmlToOCWithValue('This is send one Value');
native.sendValueFromHtmlToOCWithValueWithValueTwo('Good','Boy');
//这个方法html并不调用，而是给OC调用的
function methodForOC(){
alert('这个是Html的方法，OC调的到吗？');
主要看后面几行，我们调的是那个methodForOC方法。
看一下效果：
OC调Html方法.png
第十步：点击html的按钮，然后从OC获取值。
主体流程：点击html按钮，触发OC方法，然后从OC传值给Html。
Html内容：
&!DOCTYPE html&
&title id = "title"&Title of this page&/title&
&!--样式从File.css文件中获取--&
&link rel="stylesheet" type="text/css" href="File.css"&
&!--响应的方法从File.js文件中获取--&
&!--&script type="text/javascript" src="File.js"&&/script&--&
标签，css中设置样式时，会根据id来设置--&
&p id = "wql"&This is my first try to write Html5 file.&/p&
加粗的文本，css中设置样式时，会根据id来设置--&
&b id = "myp"&This text is bold&/b&
&br/&&br/&&br/&&br/&
按钮，点击按钮触发helloWQL()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：点击后触发OC的方法--&
&button type="button" onclick = "helloWQL()"&点击出弹框&/button&
&br/&&br/&
按钮，点击该按钮会触发sendValueFromHtml()方法，按钮上的文本是“点击出弹框”--&
该按钮的目的是：将某个值传给OC，我们这里分别传了一个值、两个值--&
&button type="button" onclick = "sendValueFromHtml()"&点击传值&/button&
&br/&&br/&
按钮，点击该按钮会触发getValueFromOC()方法，按钮上的文本是“从OC拿值”--&
该按钮的目的是：点击按钮后，从OC获取某个值--&
&button type="button" onclick = "getValueFromOC()"&从OC拿值&/button&
定义各个方法--&
&script type="text/javascript"&
//调用native的helloWQL方法，native对象由OC注入
function helloWQL(){
native.helloWQL();
function sendValueFromHtml(){
//需要注意的是传两个值的时候，第二个参数应该以大写字母开头（WithValueTwo）。
//正确 sendValueFromHtmlToOCWithValue:(NSString*)valueOne WithValueTwo:(NSString*)valueTwo
//错误 sendValueFromHtmlToOCWithValue:(NSString*)valueOne withValueTwo:(NSString*)valueTwo
native.sendValueFromHtmlToOCWithValue('This is send one Value');
native.sendValueFromHtmlToOCWithValueWithValueTwo('Good','Boy');
//需要从OC那里拿值，之后会触发OC的sendValueToHtml方法
function getValueFromOC(){
native.sendValueToHtml();
//接收从OC传过来的值，需要OC调用该方法，并传入值
function getUserNameAndAge(ocValueOne,ocValueTwo){
alert('name:'+ocValueOne+' '+'age:'+ocValueTwo);
//这个方法html并不调用，而是给OC调用的
function methodForOC(){
alert('这个是Html的方法，OC调的到吗？');
传值的核心代码：
if ([[dic.allKeys firstObject] isEqualToString:@"sendValueToHtml"]){
//从OC传值给html
NSLog(@"sendValueToHtml:%@",dic);
NSString *name = @"WQL";
NSString *age = @"22";
NSString *textJS = [NSString stringWithFormat:@"getUserNameAndAge('%@','%@')",name,age];
[context evaluateScript:textJS];
哈哈，“口说无凭”，直接上图：
OC传值给Html
流程梳理完毕，就是上效果图了：
Html从OC获取多个值
这个做的有点瑕疵，弹框不知道为什么取消不了。好尴尬....但是数据确实传给了Html那边。如果有知道原因的小伙伴，请留言哈～
整体流程就是这样了。我们实现了各种和H5的交互，感觉也没有那么难哈～
此外，如果运行代码时，点击按钮没有效果，请clean一下，H5好像是有缓存的。
有什么意见或建议还请各位大神不吝指教～
今天愚人节，但学习我们是认真的！
百战程序员_ Java1573题 QQ群：034603 掌握80%年薪20万掌握50%年薪10万 全程项目穿插, 从易到难，含17个项目视频和资料持续更新，请关注www.itbaizhan.com 国内最牛七星级团队马士兵、高淇等11位十年开发经验专...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCore框架主要是用来实现iOS与H5的交互.当然了,最早我曾经写过iOS浅谈...
iOS 全局禁止横屏，但UIWebView 全屏播放视频，横屏，解决办法 UIWebview在播放网页视频的时候我们需要进行是否全屏状态的监听。 一般的需求是在播放视频时候需要横屏，退出全屏的时候不能横屏，但是UIWebview没有给出响应的方法， 1：其他界面不支持横屏：...
公司：宁波大发化纤有限公司 姓名：冯玉停 期数：六项精进224期感谢二组学员，234期感谢三组志工，260期感谢一组志工 [日精进打卡第217天] 一、[知~学习] 背诵六项精进大纲1遍，共717遍； 背诵大学开篇1遍，共681遍。 持诵《孝经》通篇0遍，共100遍； 持诵...
来源自玉伯的专访 1.
拿来主义。懂得从现有成熟开源项目中去挑选符合自己需求的项目，直接拿来用。程序员容易犯一个病，就是什么东西都想自己造，或者对别人造的，浅尝辄止就判断别人的不行。真正的拿来主义，需要一颗谦卑的心。在「拿」的过程中，需要去看文档，甚至去读源码，这些过程，...
“只有领会过孤独与流离，才会真正懂得如何去维系与珍惜。也只有实践过相爱之痛的人，才会理解如何把情感与欲望转化为领悟。不再是情爱煎熬的此消彼长。而是生起慈悲之心。 ” 看了一部好看的电影。Liry说本来是关于爱与青春的电影，却让我想起了死亡。 我倒没想那么多，只是单纯的...
赚钱社区部落 几年前有人要你推广“微信平台”的时候，你嗤之以鼻说：一个聊天工具能对我有什么好处？
当有人介绍要你推广“淘宝”的时候，你不以为然的说：谁会在看不见的店里买东西？
五年前有人要你推广“支付宝”，你更加怀疑的说：...　　过去这些年，HTML5 颠覆了 PC 互联网的格局，优化了移动互联网的体验，接下来，HTML5 将颠覆原生 App 世界。这听起来有点危言耸听，但若认真分析 HTML5 的发展史，你会发现，这个世界的发展趋势确实就是这样。
　　熟知历史才能预知未来，先让我们来看看 HTML5 为什么诞生、这 8 年是怎么过来的。
　　一、 HTML5 的诞生
　　自 W3C 于 1999 年发布 HTML4 后，Web 世界快速发展，一片繁荣。人们一度认为 HTML 标准不需要升级了。一些致力于发展 Web App 的公司另行成立了 WHATWG 组织，直到 2007 年，W3C 从 WHATWG 接手相关工作，重新开始发展 HTML5。
　　HTML5 的发展史，有用户的需求在推动，有技术开发者的需求在推动，更有巨大的商业利益在推动。
　　在互联网的早期，对用户而言，能打开浏览器接入到互联网世界就是一个神奇的事情，但互联网发展到 2005 年前后，开始出现下一个变化，就是宽带互联。
　　随着宽带的普及和电脑性能的增强，人们不再满足于单纯的通过互联网看新闻、收发邮件，消耗更高带宽的娱乐产品开始出现，就是流视频和网页游戏。其实视频和游戏是古老的需求，在互联网不普及的时候，需求的满足方式是离线传输的 VCD 和游戏光盘;后来互联网逐渐普及，人们更改了使用方式，通过下载软件+本地媒体播放器来看视频，下载体积较大的端游玩游戏。
　　但是对消费者体验更好的新方式还是出现并颠覆了以前的一切，那就是流媒体和网页游戏。Youtube 等公司把握住潮流飞速崛起，各种页游公司也如雨后春笋。
　　但是 HTML 标准没有把握住产业的变化及时演进，浏览器产品也未升级，这块新需求被浏览器插件满足了，那就是 Flash。这个部署在亿万浏览器里的商业插件俨然成为事实标准。2005 年 Adobe 巨资收购 Macromedia，把 Flash 收归旗下，紧接着大幅推广 FLV 流媒体和 action script 语言，很明显这桩收购可以列为 IT 并购的经典案例，FLV 流媒体和 Flash 游戏风靡互联网，Adobe 在新的产业升级中攫取了大量的利润。
　　除了 Flash 这个商业产品成为了事实标准，W3C 还面临一个尴尬，就是另一个私有扩展协议的制造者—IE。IE 当时在桌面浏览器占有垄断地位，并且扩展了大量的 IE Only 语法，开发者完全不知道这些语言是谁定义的。整个 web 世界，就被两家公司微软 +Adobe 绑架了。
　　很多 IT 巨头都坐不住了，尤其是苹果和 Google。PC 操作系统的世界难有突破，Web 浏览器被苹果寄予厚望，而且第一代 iPhone 只支持网页，那时还没有 Appstore，Safari 是乔布斯非常看重的产品;新贵 Google 虽然大量赞助 Mozilla，但并未对 IE 的地位产生实质影响，收购了 YouTube 后发现底层被 Adobe 控制，也是非常难过，而且 Google 每年给 IE 的搜索框和 Adoble FLV
缴纳的费用真不是小数目。
　　既然大家都是 W3C 的主席单位，好吧，我们重新开始做 HTML5 吧。
　　是的，HTML5 其实就是这么诞生的。那是 2007 年，IE 和 Flash 由盛转衰的转折点。
　　二、 HTML5 第一阶段： Web 增强与破垄断
　　自 HTML5 诞生以来，一共经历了两个阶段，分别是 Web 增强和移动互联网。我们先从 Web 增强说起。
　　web 体验的丰富增强主要表现在：1. webapp，比如2. 流媒体;3. 游戏。我们就这 3 个方面来讲 HTML5 做了什么。
　　1. webApp
　　HTML5 新增了离线存储、更丰富的表单(比如 Input type=date)、js 线程、socket 王乐、标准扩展 embed、以及很多 css3 新语法…
　　2. 流媒体
　　HTML5 新增了 audio、video
　　3. 游戏
　　HTML5 新增了 canvas、webgl
　　当然还有 Google 努力在 HTML5 中推进 Header 和 Section 等标签，以利于搜索引擎分析，这些不多述。
　　HTML5 补充流媒体和游戏能力后，加上苹果强势拒绝在 iOS 上引入 Flash，成功的遏制了 Flash 的发展，然后就该遏制 IE 私有语法了。
　　在 HTML5 标准的升级过程中，苹果和 Google 同时也看到了浏览器市场重新洗牌的机会，他们一方面参与 HTML5 的规范，一边在浏览器产品上发力。Apple 首先开始大力发展 Safari，建立 WebKit 开源项目，Mac、iOS、Windows 多平台齐发力;Google 起初是赞助 Mozilla 开发 Firefox，后来自己开发了 v8 引擎，合并 WebKit，于 2008 年正式推出 Chrome。“IE 的私有规范
+Flash 不是标准，我们才是标准”这样的口号在新一代浏览器大战中打响，IE 瞬间成为千夫所指的垄断代表，甚至成了阻碍 Web 发展的**(当时 IE6 已数年未更新，并且丝毫不惧 Firefox 的发展)。
　　偏偏微软此时也出了晕招，推出了一系列即不完整支持规范又互相不兼容的 IE7、8、9、10，彻底失去了开发者的心。
　　Adobe 的 Flash 被遏制，与 Web 霸主的位子擦肩而过;IE 的私有标准被遏制，并且造成 IE 市场份额不停下滑，直到 IE 最新的移动版本反过来开始支持 WebKit 私有语法，真是令人唏嘘。不知道 HTML6 是不是该打倒 WebKit 垄断了。
　　三、 HTML5 第二阶段： 移动互联网
　　随着 Chrome 和 Safari 的高歌猛进，以及 IE+Flash 的衰落，HTML5 告一段落，进入了下一个时代——移动互联网。HTML5 的跨平台优势在移动互联网时代被进一步凸显。HTML5 是唯一一个通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平台的跨平台语言。Java 和 Flash 都曾梦想这个位置，但梦断于 iOS。此时人们纷纷开始研究基于 HTML5 开发跨平台手机应用。很多人当时认为，原生应用只是过渡，就像当年从C/S结构转变为B/S结构一样。而且学习
Objective-C 和 Java 很费劲，我既然会网页开发，为何不试试 HTML5。
　　W3C 此时成立了 Device API 工作组，为 HTML5 扩展了 Camera、GPS 等手机特有的 API，然而麻烦的是，移动互联网初期的迭代太快了，手机 OS 在不停的扩展硬件 API，陀螺仪、距离感应器、气压计。。。每年手机 OS 都有大版本更新。而 W3C 作为一个数百家会员单位共同决策的组织，从标准草案的提出到达成一致是非常复杂的过程，跟不上移动互联网初期的快速迭代。
　　PhoneGap 的出现，给开发者打开了一扇窗。很多人期待 PhoneGap 不停扩展 API，来补充浏览器的不足。Adobe 看到 PhoneGap 仿佛看到了重振江湖地位的希望，但在 Adobe 收购 PhoneGap 后，又发现这个东西可商用性不足，而且开源使得 Adobe 无法像 Flash 那样获取商业利益，于是就把 PhoneGap 捐给了 Apache，改名为 Cordova。
　　因为各种原因，Cordova 的定位最终没有成为浏览器的强化，而走向了混合式开发。基于当时的背景，他们认为原生是不可替代的，“原生 +HTML5”的混合模式更有意义。所以现在 Cordova 的使用模型是“原生工程师 +HTML5 工程师”一起协作完成 App。
　　这时 Facebook 加入了 W3C，牵头成立了 Mobile Web 工作组。Facebook 是混 Web 圈的，并且在手机 OS 上没有自己的领地，他不喜欢被苹果和 Google 掌控的原生应用生态系统。Mobile Web 这个工作组的重要目标就是让 HTML5 开发的网页应用达到原生应用的体验。然而，事与愿违，它不努力也就算了，结果是努力了却失败了。2012 年，Facebook 放弃了 HTML5 的新闻充斥了全世界的 IT 媒体，HTML5
瞬间被打入冷宫。
　　Facebook 为何放弃 HTML5?核心是当时基于 HTML5 真的做不出好的移动 App。对比 Twritter 等竞争对手的原生 App，Facebook 的 HTML5 版本实在无法让用户满意。比如 Push 功能，到现在 HTML5 的推送和原生的推送体验差距依然巨大，更不用说 HTML5 应用的页面切换白屏、下拉刷新/侧滑菜单不流畅等众多问题。看着原生工程师轻松实现摇一摇、二维码、语音输入、分享到朋友圈等功能，更是让 HTML5
工程师感觉自己站错了队。
　　即使 Facebook 不喜欢被控制，也不能拿被用户抛弃来冒险。而且 Facebook 并没有掌握关键点—手机浏览器内核。如果浏览器不跟上，徒然定一堆标准草案落不了地。
　　而浏览器在手机上的表现是什么呢?先看 Google，Chrome 性能虽高，但 Android 上的浏览器却并非 Chrome，而是 WebKit 改出来的一个蹩脚的 Android 浏览器;再看苹果，iOS 上不允许其他浏览器引擎上架 App Store，而且其他使用 Safari 引擎的应用也无法调用苹果自己的 JavaScript 加速引擎 Nitro。结果是苹果和 Google 不但不在浏览器上积极实现 HTML5 关于移动 App
所需的规范，反而对 HTML5 做出种种限制。
　　不管是当时硬件能力不足，还是手机 OS 厂商的故意限制，总之结果就是：在移动互联网的初期，一定是原生应用生态系统的天下，iOS 和 Android 首先自己的地盘稳固后，产业才会向下个阶段升级。
　　Facebook 也好，PhoneGap 也好，想在移动互联网初期就分一杯羹是分不到的，但坚持下来，机会往往会出现。
　　四、 HTML5 这回真的来了
　　终于，在 2014 年 10 月底，W3C 宣布 HTML5 正式定稿。这个时间，不晚不早，硬件性能更强、手机 OS 迭代速度下降。
　　随着 HTML5 标准定稿，一切纷争将告一段落，现在，属于 HTML5 的时代到来了。
　　有人说，光标准定稿没用啊，配套起来了吗?HTML5 做的应用究竟能否匹敌原生 App?答案是，HTML5 不但可以匹敌原生 App，甚至它天然的很多特性超越了原生 App。
　　我们先谈谈 HTML5 原来不如原生应用的地方，业内俗称 HTML5 有“性工能”障碍。即 HTML5 性能不如原生、开发工具不如原生、能力调用不如原生。
　　这几个问题导致开发者无法使用 HTML5 做出与原生一样的 App。然而，不管是硬件升级还是 OS 厂商策略变化，以及相关软件技术的成熟，已解决了 HTML5 的“性工能”障碍。
　　1. 硬件升级
　　2011 年，iPhone 4s 的 CPU 是 A5，现在 iPhone 6 是 A8，按苹果的历次发布会的说法，速度共提升了 7.5 倍。这 3 年间 7.5 倍的速度提升，抹平了太多 HTML5 的性能问题。
　　2. 苹果、Google 的策略变化
　　Google 在 2013 年底发布的 Android 4.4，内置的 Webview 不再是蹩脚的 Android WebKit 浏览器，而是 Chromium，性能大幅提升。从最新的 Android5.0 开始，Webview 可以通过 Google Play Store 实时更新，和 Chrome 的升级保持一致，用户就可以不刷机享受到最新的浏览器引擎;再看 Apple 方面，2012 年 iPhone 5 发布后，HTML5 在 iOS
上的表现已令人满意，Safari 独家的 JavaScript 加速引擎 Nitro 不再那么重要，不过在 iOS 8 发布后，苹果还是很识趣地取消了三方程序调用 Nitro 的限制，现在任意浏览器或应用调用 iOS 的 UIWebview 都可以利用 Nitro 加速，这样在前端使用 JS 做大型运算也成为可能。两大手机操作系统霸主和浏览器巨头的态度发生了变化，使得 HTML5 在手机上的发展不再受限，而且这个变化不可逆只能继续向前，这种变化势必会产生深远的影响。
　　3. 软件技术的成熟
　　PhoneGap 的发展虽然放缓了，但其他产品技术却成熟了。2014 年的 iWeb 大会上，众多厂商的产品提供了面向开发者免费或开源的 HTML5 性工能障碍的解决方案。
　　(注：编者作为从业人员，也会在分析各种方案时提到我们公司的方案，但编者会客观不夸张的陈述方案，而且该方案是纯免费的，没有商业销售嫌疑。)
　　DCloud 公司在 iWeb 大会上发布了系统的 HTML5“性工能缺失”的解决方案，包括：
　　a) 性能：提升 HTML5 性能的手机端引擎，让侧滑菜单、下拉刷新等动态交互卡顿的问题得以解决;
　　b) 工具：HTML5 开发 IDE 产品 HBuilder, 超快的编程利器;
　　c) 能力：把 40 万原生 API 封装成 JavaScript 对象，以解决 HTML5 能力不足问题的 Native.js 技术;
　　d) 最接近原生体验的高性能框架：MUI 框架，体积只有几十K，加载、运行远快于一般框架。
　　基于该方案开发的 HTML5 应用完全可以达到原生 App 的功能和体验。
使用 HBuilder 开发 HTML5 应用
　　英特尔公司发布了 Crosswalk 引擎，可以让 Android 4.0-4.3 的手机上的应用打包 Chromium 引擎而不是 Android WebKit。毕竟目前市场上存在大量 Android 4.0-4.3 的手机，同时统一的 webview 也避免了兼容性的烦恼。
　　在专业方向上很多公司也做出了不错的成绩。触控的 Cocos2d-html5、Egret runtime 和 Ludei CocoonJS 强化了 Canvas 的表现，让 HTML5 游戏体验更好;UC、猎豹等手机浏览器都强化了音视频播放的表现。
　　不管是硬件升级、软件成熟，还是操作系统厂商策略变化，都在强力推动 HTML5 的爆发。
　　不过要注意，我说的 HTML5 爆发，不是指手机浏览器会替代桌面成为应用入口。有人说 HTML5 不好，因为用户讨厌打开浏览器输入 URL 的过程。我想说这种想法是对 HTML5 的片面理解。HTML5!=传统浏览器，虽然编程语言还是 HTML、Javascript、CSS，但发行方式绝不是传统网站那么简单。HTML5 应用的入口，反而很少是启动浏览器输入 URL，它可以是存在于手机桌面的图标、也可以来自超级 App (如微信朋友圈)、以及搜索引擎、应用市场、广告联盟。。。到处都是它的入口。它的入口，比原生
App 更多。
　　五、 原生 App 的颠覆
　　HTML5 的“性工能”障碍得到解决，可以接近原生 App 的效果，所以它就可以替代原生 App 吗?很多人认为，即使 HTML5 会发展的比现在好，也将是与原生 App 各占一部分市场的格局，要求不高的长尾应用会使用 HTML5，而主流应用仍是原生 App 的天下。
　　但我认为这样的想法很危险，就像 Apple 成立前，HP 的高层告诉沃兹：谁会在家里摆一台电脑呢?未来 HTML5 肯定会颠覆原生 App。“性工能”障碍的消除，只是 HTML5 的劣势被削弱，但劣势被消除后，它的优势就会大放异彩，HTML5 的优势是什么?我们分别就开发者和最终用户来看。
　　HTML5 对开发者的 7 大优势
　　 跨平台：
　　在多屏年代，开发者的痛苦指数非常高，人人都期盼 HTML5 能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实 DOS 的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。
　　快速迭代：
　　移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。
　　持续交付：
　　很多人有这样的体会，一个原生应用上线 Appstore，突然有一个大 bug，只好连夜加班修复，然后静静等待 2 周或更长时间的 Apple 审核，这 2 个星期被用户的涂抹淹死，市场上一片差评，用户大量流失。等新应用被审核上线了，用户已经卸载了。但是，HTML5 没有这些问题，你可以实时更新，有问题立即响应。
　　大幅下降成本：
　　创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的 App 和竞争对手使用 HTML5 开发的 App 没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。
　　开源生态系统发达：
　　HTML5 前端是开放的正反馈循环生态系统，大量的开源库可以使用，开发应用变得更轻松、更敏捷，当然这也体现在了快速迭代和成本下降上。不过更重要的是，这种开放的正反馈循环生态系统未来的生命力是比原生生态系统更强劲的。
　　开放的数据交换：
　　HTML 是以 page 为单元开放代码的，它无需专门开发 SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据， 也更容易通过跨应用协作来满足最终用户需求。
　　更容易推广、更容易爆发：
　　导流入口多：HTML5 应用导流非常容易，超级 App (如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是 HTML5 的流量入口。而原生 App 的流量入口只有应用市场。聪明的 HTML5 开发者当然会玩转各种流量入口从而取得更强的优势。
　　流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到 Appstore，绝对没有那么多流量，超级 App 带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。
　　导流效率高：除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。
　　可精准导流到二级页：我们都知道搜索引擎可以直接进入到。
　　HTML5 对最终用户的 3 大优势
　　大幅降低使用门槛
　　为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因用户太“懒”。让用户更方便的满足需求，有时效果好于更多的满足需求。
　　用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠覆。
　　不管是 App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。
　　实时更新、差量更新的优秀体验
　　HTML5 应用可以绕开应用市场的限制进行自主实时更新，用户可以快速享受新服务。
　　而且这种更新完全可以是差量更新，比如某个 HTML 页面或某个 js 文件有问题，只更新这个几k的小文件就可以了，这比原生应用的更新体验好太多。
　　跨应用的使用体验
　　目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心很影响效率和体验。用户想出差三亚，先打开去哪 App 订票，然后切回桌面，再找到并打开天气 App，搜索输入三亚，再切到桌面，找到并打开航旅纵横 App，输入航班号值机，哦对了，航班号多少来着，再切到桌面，找到并打开去哪 App 看航班号，最后找到并打开租车 App，输入租车地点，然后再切回桌面。。。
　　在原生应用体系下，用户只能这样。但在 HTML5 体系下，他不需要切回桌面，他可以在 App 间方便的直接跳来跳去，而不是使用一个一个孤岛 A他更不用重复录入数据，应用间可以方便的互相传递数据。
　　这种模式需要一点想象力，但未来迟早会来。
　　分析至此，我们可以明显的看出，不管是站在最终用户角度、还是站在开发者角度，HTML5 必将取代原生应用当前的位置。并由此引发一系列颠覆。
　　六、 还有什么会被改变?
　　HTML5 的爆发，原生 App 生态系统的颠覆，是一场产业革命，很多角色都会受到影响，我们来预测一番。
　　新型 HTML5 引擎战火将烧起
　　标准的 HTML5 引擎并不能解决 HTML5 的所有问题，拥有大流量入口的互联网巨头，莫不在思考内嵌更优秀的增强引擎。腾讯推出了 X5 浏览器引擎，就是看中这个机会。目前各路浏览器厂商、应用市场厂商、甚至 rom 厂商，都在努力整合更优质的浏览器引擎。假使微信内嵌的 Webview 可以运行更优秀的 canvas 游戏、假使 360 手机助手可以发行即点即用的 HTML5 应用并且能力体验与原生一致、假使小米 rom 内置更强大的 webview
使得所有 HTML5 应用在小米手机上运行的更流畅。。。
　　一个巨头开始行动，所有巨头都会闻风而动，没错，这场战役会是移动互联网世界的二次世界大战。
　　应用发行市场将洗牌
　　由于超级 App 的巨大流量能轻易成为 HTML5 应用的入口，并且会形成大者更大的效应，传统的应用商店、甚至线下预装，这些流量不足和效率偏低的发行模式将被挤出市场主流。本身也是超级 App 的大流量应用商店，如果转型得当，也将以发行 HTML5 应用为主。
　　广告和统计市场
　　原生的广告和统计 SDK 提供商会面临尬尴，Google、百度等基于网页的广告和统计服务会取得更大的优势。开发者不再需要打包 SDK，引入一个 Script 即可。
　　开源技术将在移动互联网领域更加流行
　　HTML 的开放性造就了大量的开源产品，也反向促进了 HTML 的繁荣。在 Github 上有大量的 JS 框架，而原生的开源代码数量相比甚少。而未来移动互联网世界将因为开源而发展的更迅速，这里也同样存在类 Github 厂商的机遇。
　　开发工具的变化
　　早期 HTML 只需要记事本写几个 Tag，中期的 HTML、JS、CSS 比较复杂，需要更高级的文本编辑器，但 HTML5 到来后，它的代码量、复杂度、开发模型将与原生开发看齐，需要类似 XCode、Eclipse 等专业的 IDE 工具来解决开发、调试的问题。一些以会使用记事本写代码为荣的开发者，将面临思路转换甚至被更高效的开发者淘汰。
　　性能分析调优
　　目前很多针对原生应用的性能分析调优工具或服务，未来也面临转型，HTML5 应用的性能分析调优是另一个世界。
　　混淆与产权保护
　　HTML5 是开放代码的，好处也带来弊端，有些东西开发者希望暴露，但有些东西开发者希望保护。混淆技术就变得更有商业机会。PC Web 上 Gmail 的混淆就做的不错。除了 JS 混淆，离线数据加密相信也有不少空间。
　　安全厂商的新机会
　　HTML5 的强大会引发很多安全问题，并且解决思路与原生不一样，业内有可能会出现新的安全厂商领导者。
　　七、 结语
　　写到结尾，感觉话题有点大了。其实未来如何发展是没人能准确预测的，变量非常多。但我想让用户和开发者都更方便的趋势是不会错的。
Android 和IOS 混合开发,一套代码两处运行-----Flutter
转载自:https://www.jianshu.com/p/8baa8ed2414d什么是Flutter日，在2018世界移动大会上，Google发布了Flutter的第一个Beta...
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jac...
iOS 如何用oc代码在苹果沙盒里面创建一个html界面
用代码在项目用代码创建一个html界面病存于苹果系统的沙盒里面
例子如下：
NSArray *paths = NSSearchPathForDirectoriesInDomains(...
当你选择编程语言时你在选择什么
我的微信订阅号“程序视界”有个“有问有答”栏目，上次发了“问答 | 我适合做软件开发吗”，这次我们来回答这个问题：我应该学哪种语言？...
移动App开发（包含iOS和Android转型）
上一篇从框架的角度介绍了iOS开发，本来这一节是要讲autolayout的，但是由于刚开始，可能很多移动端开发的同学，有的学android的，有的是从事iOS的，根据公司业务的调整，可能会存在互相的转...
之前有做过防止用户非法使用公司软件的组件（软件授权），其中基于windows系统获取设备唯一标志，上任开发者获取的唯一标识之一CPU ID已经不再唯一产生的Bug，便是参考此文修复。现记录之。
获取手机设备的相关信息，如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。
imei: 设备的国际移动设备身份码
imsi: 设备的国际移...
&em&HTML5&/em&响应式通用企业网站织梦模板(自适应支持移动端) 立即下载
上传者: flywoody...&em&PC+&/em&手机端源码asp 5C币 18下载
手机端企业网站静态页面 3C币 168下载
国外小清新&em&HTML5&/em&模板,适合手机浏览、web版、智能手机版、移动版,适合各种机型 ...小清新优秀文章新闻博客类织梦dedecms模板(带手机端)&em&+PC+&/em&移动端+利于SEO优化 立即...
移动设备（手机）的唯一ID有哪些
在移动广告领域，设备的ID 是用来追踪一个人的最重要的标识。
对于APP自身产品而言，使用设备唯一ID可以追踪到用户从下载到激活、注册、使用、流失、回归的全流程数...
没有更多推荐了，