- 需求:
- 在UIWebView中通过HTML和js代码来显示界面.
- 点击按钮或是做其他交互时,能够调用oc原生的库来处理事件.(打开照相功能,打开相册选择图片,定位).
- 实现
1.显示html页面
<body>
<h1>这是一段内容</h1>
<input type="button" value="照相" onclick="zhaoxiang()" />
<input type="button" value="相册" onclick="quzhaopian()" />
<input type="button" value="定位" onclick="check()" />
</body>
写完了html代码以后,就应该在oc中添加一个UIWebView.并设置它的代理
mywebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, wscream, hscream-64)];
//获取html的路径
NSString * path = [[NSBundle mainBundle] bundlePath];
baseURL = [NSURL fileURLWithPath:path];
NSString * htmlFile = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:(NSUTF8StringEncoding) error:nil];
//加载html文件
[mywebView loadHTMLString:htmlString baseURL:baseURL];
mywebView.delegate = self;//设置代理
[self.view addSubview:mywebView];
那么此时运行程序就会看到这样的情况了
导航栏是我手贱加上去的
2.定位功能:首先要导入一系列的包,用的时百度地图的api
7个包
注意:AppDelegate.m要改为AppDelegate.mm
然后在
application: didFinishLaunchingWithOptions:
方法中对BMKMapManager进行初始化:
_mapManager = [[BMKMapManager alloc]init];
BOOL ret = [_mapManager start:@"这里写上你申请的key" generalDelegate:self];
在viewDidLoad中初始化定位服务和反查服务(虽然本文中没反查),并设置两个服务的delegate.
_locService = [[BMKLocationService alloc]init];
_locService.delegate = self;
//启动LocationService
[_locService startUserLocationService];
_geocodesearch = [[BMKGeoCodeSearch alloc] init];
_geocodesearch.delegate = self;// 此处记得不用的时候需要置nil，否则影响内存的释放
在js中添加一个按钮触发定位:(在这里先贴出所有的js代码)
<script language="javascript">
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
function check() {
loadURL("youdao:abc");
}
function zhaoxiang() {
loadURL("zhaoxiang:abc");
}
function quzhaopian() {
loadURL("quzhaopian:abc");
}
</script>
然后我们就要从oc方面来处理js发送的请求了,设置了UIWebView的代理以后,就可以实现下面的这个方法了.这个方法是在加载请求的时候会调用.
- (BOOL)webView: shouldStartLoadWithRequest:navigationType:
//我们可以通过判断URL来知道是那个按钮的点击
if ([[url scheme] isEqualToString:@"youdao"]) {
//做定位的事情
}
3.拍照和取相册图片功能.(因为功能类似就一起说了)
//如果是照相功能
if ([[url scheme] isEqualToString:@"zhaoxiang"]) {
UIImagePickerController *piakcer = [UIImagePickerController new];
//先判断是否有拍照的权限
if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){
[piakcer setSourceType:UIImagePickerControllerSourceTypeCamera];
[piakcer setVideoQuality:UIImagePickerControllerQualityTypeLow];
piakcer.delegate = self;
piakcer.showsCameraControls = YES;
[self presentViewController:piakcer animated:YES completion:nil];
}else{//如果没有权限则弹窗提示
UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"温馨提示"
message:@"没有照相权限"
delegate:nil
cancelButtonTitle:@"ok"
otherButtonTitles:nil, nil];
[alert show];
}
return NO;
}
//如果是取图片功能
if ([[url scheme] isEqualToString:@"quzhaopian"]) {
UIImagePickerController *piakcer = [UIImagePickerController new];
[piakcer setSourceType:UIImagePickerControllerSourceTypePhotoLibrary];
[piakcer setVideoQuality:UIImagePickerControllerQualityTypeLow];
piakcer.delegate = self;
[self presentViewController:piakcer animated:YES completion:nil];
return NO;
}
实现UIImagePickerController的代理方法
//取消选择图片
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
[picker dismissViewControllerAnimated:YES completion:nil];
}
//选择了图片
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{
UIImage *image = [info objectForKey:UIImagePickerControllerEditedImage];
if (!image)
{
image = [info objectForKey:UIImagePickerControllerOriginalImage];
}
//将图片进行编码,
NSString *stringImage = [self htmlForJPGImage:image];
imgView.image = image;
[self.view bringSubviewToFront:imgView];
//将图片显示到UIWebView中
NSString * js = [NSString stringWithFormat:@"var p = document.createElement('p'); p.innerText = '';document.body.appendChild(p);var e = document.createElement('img'); var obj =document.body.appendChild(e);e.src=\"%@\";e.border='0';e.width='100';e.height='100'; e.onload='AutoResizeImage(250,250,this)';e.alt='200 X 300';",stringImage];
[mywebView stringByEvaluatingJavaScriptFromString:js];
[picker dismissViewControllerAnimated:YES completion:nil];
}
补充:浏览器显示图片有两种方法:1.通过URL直接获得资源路径显示.2.通过图片编码显示.
//编码图片
- (NSString *)htmlForJPGImage:(UIImage *)image
{
NSData *imageData = UIImageJPEGRepresentation(image,1.0);
NSString *imageSource = [NSString stringWithFormat:@"data:image/jpg;base64,%@",[imageData base64Encoding]];
return imageSource;
}
