平台开发 Html5 Hybrid

最新推荐文章于 2023-11-04 22:24:51 发布

Akries

最新推荐文章于 2023-11-04 22:24:51 发布

阅读量872

点赞数

分类专栏： ios开发文章标签：平台显示开发 uiwebview html5

ios开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/lwme/p/ios-call-objc-camera-from-javascript-in-uiwebview.html 转载出处

UIWebView 是开发中常见的视图显控件,多数情况下,被用来显示html格式的内容.
除了HTML以外，UIWebView还支持iWork, Office等文档格式：

Excel (.xls)
Keynote (.key.zip)
Numbers (.numbers.zip)
Pages (.pages.zip)
PDF (.pdf)
Powerpoint (.ppt)
Word (.doc)
Rich Text Format (.rtf)
Rich Text Format Directory(.rtfd.zip)
Keynote ‘09 (.key)
Numbers ‘09 (.numbers)
Pages ‘09 (.pages)

载入这些文档的方法也和html一样：
NSString *path = [[NSBundle mainBundle] pathForResource:”test.doc” ofType:nil];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

HTML5技术及框架
移动设备浏览器的功能越来越强大，包括对HTML5、CSS3的支持，提供丰富的JavaScript API用于调用设备各种功能，使得开发出来的Web App非常接近原生App。

HTML5技术有如下优点：

跨平台兼容性：不受移动平台及设备的限制，不需要单独针对iOS或Android平台、不同尺寸的设备编写特定的代码
快速的开发效率、快速更新及发布效率
低技术门槛及维护成本：只需要掌握HTML5/CSS/JavaScript
当然，HTML5也有它的缺点：

访问设备特定功能的API非常有限：局限于浏览器运行环境，可用的API远远少于原生应用
性能低于原生应用导致用户体验较差：特别是某一些绚丽的效果，或者是互动性很强的功能
随着HTML5的流行，出现了许多优秀的HTML5框架，它们可以使开发变得更加简单，进一步提高开发效率：

jQuery Mobile：http://jquerymobile.com/
jQTouch：http://jqtjs.com/
Sencha Touch：http://www.sencha.com/products/touch
NimbleKit：http://www.nimblekit.com/
The-M-Project：http://www.the-m-project.net/
Jo：http://joapp.com/
DHTMLX Touch：http://dhtmlx.com/touch/

Hybrid开发方式
Native App需要较高的技术水平，虽然性能优越用户体验较好，但跨平台兼容性差，而且开发、维护成本太高，难以适应快速更新的需求变化；而Web App技术门槛低，良好的跨平台兼容性，开发、维护成本低，但是性能低导致用户体验较差。

Native App开发方法适合于游戏等需要良好用户体验的应用，而Web App开发方法适合没有太多交互的应用。这两种方法就像两个极端，而一般性应用并不是特别需要其中一种方法带来的好处，于是就产生了结合这两种开发方法的折中方案：Hybrid开发方法。

针对一般性应用，使用Hybrid开发方法，开发者就能使用跨平台的HTML5技术开发大部分的应用程序代码，又能在需要的时候使用一些设备的功能，充分结合了Native App开发方法和Web App开发方法的长处，在提供良好用户体验的同时，大大降低开发和维护的成本以及提高效率。

Hybrid开发方式也有一些框架/工具：

Xamarin：http://xamarin.com/ 含iOS平台的MonoTouch, Android平台的MonoDroid，甚至还有mac桌面app
PhoneGap：http://phonegap.com/ 它的核心Cordova已贡献给Apache
Sencha Architect：http://www.sencha.com/products/architect
Titanium (js –> native)：http://www.appcelerator.com/platform/titanium-platform/
AppMobi XDK：http://www.appmobi.com/
AppCan：http://appcan.cn/
其中，Xamarin可以采用纯C#代码开发iOS/Android应用。而PhoneGap则是针对不同平台的WebView进行封装和扩展，使开发人员可以通过Javascript访问设备的一些功能。

当然，使用这些框架/工具需要一定的学习成本，如果对Objective-C和HTML5相关技术比较熟悉，也可以完全不用依赖于这些框架进行开发。

UIWebView与Javascript交互
UIWebView提供了stringByEvaluatingJavaScriptFromString方法，它将Javascript代码嵌入到页面中运行，并将运行结果返回。

1
2
3
4
NSString *result1 = [webView stringByEvaluatingJavaScriptFromString:@”alert(‘lwme.cnblogs.com’);”]; // 弹出提示，无返回值
NSString *result2 = [webView stringByEvaluatingJavaScriptFromString:@”location.href;”]; // 返回页面地址
NSString *result3 = [webView stringByEvaluatingJavaScriptFromString:@”document.getElementById(‘lwme’).innerHTML;”]; // 返回页面某个标记内容
NSString *result4 = [webView stringByEvaluatingJavaScriptFromString:@”document.getElementById(‘lwme’).innerHTML = ‘lwme.cnblogs.com’;”]; // 设置页面某个标记内容
需要注意的是：

js的执行时间不能超过10秒，否则UIWebView将停止执行脚本。
js分配的内存限制为10M，如果超过此限制，UIWebView将引发异常。
另外需要注意，运行部分脚本时需要确定页面是否加载完成(DOMContentLoaded)。

当然，stringByEvaluatingJavaScriptFromString只是Native向UIWebView中的网页单向的通信，UIWebView中的网页向Native通信则需要通过UIWebView的协议webView:shouldStartLoadWithRequest:navigationType:。

首先，创建一个文件命名为test.html，内容如下：

1
2
测试
测试2
然后，在Native实现如下代码：

@implementation LwmeTestViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 设置delegate并加载html
self.webView.delegate = self;
NSString *filePath = [[NSBundle mainBundle] pathForResource:@”test” ofType:@”html”];
NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:fileContent baseURL:nil];
}
- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *requestString = [[request URL] absoluteString];
NSString *protocol = @”js-call://”;
if ([requestString hasPrefix:protocol]) {
NSString *requestContent = [requestString substringFromIndex:[protocol length]];
NSArray *vals = [requestContent componentsSeparatedByString:@”/”];
if ([vals[0] isEqualToString:@”test”]) { //test方法
[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@”alert(‘地址：%@’);”, vals[1]]];
}
else {
[webView stringByEvaluatingJavaScriptFromString:@”alert(‘未定义’);”];
}
return NO; // 对于js-call://协议不执行跳转
}
return YES;
}
这样就完成了简单的通信，UIWebView中的网页需要访问设备的功能都可以在webView:shouldStartLoadWithRequest:navigationType:编写相应的代码来实现。

在UIWebView中调用摄像头、相册、图库
iOS 6以上版本的Mobile Safari支持在网页中调用摄像头，只需要放置以下代码：

1

但是iOS 5的浏览器还不支持这个功能，如果需要调用摄像头，则依然需要通过Hybrid开发方式来实现。

首先，创建一个文件命名为camera.html，定义三个按钮分别用于获取摄像头、图库、相册：

function cameraCallback(imageData) {
    var img = createImageWithBase64(imageData);
    document.getElementById("cameraWrapper").appendChild(img);
}
function photolibraryCallback(imageData) {
    var img = createImageWithBase64(imageData);
    document.getElementById("photolibraryWrapper").appendChild(img);
}
function albumCallback(imageData) {
    var img = createImageWithBase64(imageData);
    document.getElementById("albumWrapper").appendChild(img);
}
function createImageWithBase64(imageData) {
    var img = new Image();
    img.src = "data:image/jpeg;base64," + imageData;
    img.style.width = "50px";
    img.style.height = "50px";
    return img;
}

拍照图库相册

拍照

图库

相册

Native实现代码如下：

**#import “LwmeViewController.h”
#import “NSData+Base64.h”**
// Base64代码从 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.h 和 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.m 获取

@interface LwmeViewController ()

Akries

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
平台开发 Html5 Hybrid

http://www.cnblogs.com/lwme/p/ios-call-objc-camera-from-javascript-in-uiwebview.html 转载出处UIWebView 是开发中常见的视图显控件,多数情况下,被用来显示html格式的内容. 除了HTML以外，UIWebView还支持iWork, Office等文档格式：Excel (.xls) Keynote
复制链接

扫一扫