iOSNative-Web交互學習心得

2019-11-14 19:29:59

字體：大中小

來源：轉載

供稿：網友

Web和Native的交互，也就是iOS object-C與javascript之間的交互；核心代碼是

[webView stringByEvaluatingJavascriptFromString:@"xxxxxxxxxx"];

這里主要用到的就是iOS WebKit加載網絡頁面，功能有獲取用戶位置信息，拍照，判斷當前手機網絡連接類型的功能（拍照和獲取當前用戶地理位置需要真機環境下）所以需要導入以下幾個框架：

這里需要注意的是iOS8以后獲取位置地理信息需要在info.plist文件中手動添加：

NSLocationWhenInUseUsageDescriptionNSLocationAlwaysUsageDescription

設置他們的鍵值為YES；

那么現在我們的準備工作就做好了；

首先加載本地的Html文件：這里因為需要調用系統相機所以添加代理UIWebViewDelegate,UINavigationControllerDelegate, UIImagePickerControllerDelegate

@interface ViewController ()<UIWebViewDelegate,UINavigationControllerDelegate, UIImagePickerControllerDelegate>

{

NSString *callback;

}

@PRoperty (nonatomic,strong) UIWebView *webView;

@property (nonatomic,strong) MapViewController *map;

@end

@implementation ViewController


- (void)viewDidLoad {    [super viewDidLoad];        _webView = [[UIWebView alloc]initWithFrame:self.view.bounds];    [self.view addSubview:_webView];    _webView.delegate = self;    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"api" ofType:@"html"];    NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];    [_webView loaDHTMLString:fileContent baseURL:nil];    }

現在開始上干貨了：WebViewDelegate代理方法

//js調用iOS- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{    NSString *requestString = [[request URL] absoluteString];    //jS協議頭    NSString *protocol = @"js-call://";    //請求的字符串符合協議頭    if ([requestString hasprefix:protocol]) {        //從協議頭后的位置截取字符串到最后        NSString *requestContent = [requestString substringFromIndex:[protocol length]];        //將/分隔的字符串轉換成數組        NSArray *vals = [requestContent componentsSeparatedByString:@"/"];        if ([[vals objectAtIndex:0] isEqualToString:@"camera"]) {            callback = [vals objectAtIndex:1];            [self doAction:UIImagePickerControllerSourceTypeCamera];        } else if([[vals objectAtIndex:0] isEqualToString:@"photolibrary"]) {            callback = [vals objectAtIndex:1];            [self doAction:UIImagePickerControllerSourceTypePhotoLibrary];        } else if([[vals objectAtIndex:0] isEqualToString:@"album"]) {            callback = [vals objectAtIndex:1];            [self doAction:UIImagePickerControllerSourceTypeSavedPhotosAlbum];        }        else if([[vals objectAtIndex:0] isEqualToString:@"location"]) {            callback = [vals objectAtIndex:1];            [self sendlocationInformation];        }        else if([[vals objectAtIndex:0] isEqualToString:@"netType"]) {            callback = [vals objectAtIndex:1];            [self sendNetWorkType];                    }                               else {            [webView stringByEvaluatingJavaScriptFromString:@"alert('未定義/lwme.VEVb.com');"];        }        return NO;    }    return YES;}

點擊加載的Web頁面的按鈕，native端響應事件：

- (void)doAction:(UIImagePickerControllerSourceType)sourceType{    UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];    imagePicker.delegate = self;    if ([UIImagePickerController isSourceTypeAvailable:sourceType]) {        imagePicker.sourceType = sourceType;    } else {        UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"照片獲取失敗" message:@"沒有可用的照片來源" delegate:nil cancelButtonTitle:@"確定" otherButtonTitles:nil, nil];        [av show];        return;    }    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {        UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker];        [popover presentPopoverFromRect:CGRectMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 3, 10, 10) inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];    } else {        [self presentViewController:imagePicker animated:YES completion:nil];    }}

拍照，獲取相冊的代理方法：

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{    if ([[info objectForKey:UIImagePickerControllerMediaType] isEqualToString:@"public.image"]) {        UIImage *originalImage = [info objectForKey:UIImagePickerControllerOriginalImage];                UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"正在處理圖片..." message:@"/n/n"                                                    delegate:self                                           cancelButtonTitle:nil                                           otherButtonTitles:nil, nil];                UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc]                                            initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];        loading.center = CGPointMake(139.5, 75.5);        [av addSubview:loading];        [loading startAnimating];        [av show];                dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{            NSString *base64 = [UIImageJPEGRepresentation(originalImage,0.5) base64EncodedStringWithOptions:0];            [self performSelectorOnMainThread:@selector(doCallback:) withObject:base64 waitUntilDone:NO];                                                [av dismissWithClickedButtonIndex:0 animated:YES];        });    }        [picker dismissViewControllerAnimated:YES completion:nil];}- (void)doCallback:(NSString *)data{    [_webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@('%@');", callback, data]];}

Web頁面的HTML代碼信息：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>微信JS-SDK Demo</title>  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">  <link rel="stylesheet" href="CSS/style_demo.css">  <script>  function openLocation(){      window.location.href="js-call://location/locationCallback";  }  function chooseImage(){      window.location.href="js-call://photolibrary/photolibraryCallback";  }  function goCamera(){      window.location.href="js-call://camera/cameraCallback";  }  function getNetType(){      window.location.href="js-call://netType/netTypeCallback";  }  function openAlbum(){        window.location.href="js-call://album/albumCallback";  }   function cameraCallback(imageData) {      var img = createImageWithBase64(imageData);      document.getElementById("camera_image_div").appendChild(img);  }  function photolibraryCallback(imageData) {      var img = createImageWithBase64(imageData);      document.getElementById("choose_image_div").appendChild(img);  }  function albumCallback(imageData) {      var img = createImageWithBase64(imageData);      document.getElementById("open_image_div").appendChild(img);  }    function createImageWithBase64(imageData) {      var img = new Image();      img.src = "data:image/jpeg;base64," + imageData;      img.style.width = "200px";      img.style.height = "200px";      return img;  }    </script></head><body ontouchstart="">    <div class="wxapi_container">        <div class="lbox_close wxapi_form">      <h3 id="menu-image">圖像接口</h3>      <span class="desc">地理位置</span>      <button class="btn btn_primary" id="openLocation" onclick="openLocation()">地理位置</button>      <span id="spLoc" class="desc"></span>      <span class="desc">選擇圖片</span>      <button class="btn btn_primary" id="chooseImage" onclick="chooseImage()">選擇圖片</button>      <div id="choose_image_div"></div>      <span class="desc">拍照</span>      <button class="btn btn_primary" id="takePic" onclick="goCamera()">拍照</button>      <div id="camera_image_div"></div>      <span class="desc">網絡連接類型</span>      <button class="btn btn_primary" id="netType" onclick="getNetType()">網絡連接類型</button>      <span id="spNet" class="desc"></span>      <span class="desc">相冊</span>      <button class="btn btn_primary" id="openAlbum" onclick="openAlbum()">打開相冊</button>      <div id="open_image_div"></div>            <div id="hidpicdiv" style="display: none;">            <img id="hidpic" src="" width="200" height="200"/>        </div>    </div>    </div></body>

獲取當前用戶位置信息和判斷當前手機的連接網絡類型：

- (void)sendNetWorkType{        if ([NetWorkType getNetworkTypeFromStatusBar]==0) {        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"網絡連接類型" message:@"當前無網絡連接" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];                [alert show];    }    if ([NetWorkType getNetworkTypeFromStatusBar]==1) {        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"網絡連接類型" message:@"當前2G連接" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];                [alert show];    }    if ([NetWorkType getNetworkTypeFromStatusBar]==2) {        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"網絡連接類型" message:@"當前為3G連接" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];                [alert show];    }    if ([NetWorkType getNetworkTypeFromStatusBar]==3) {        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"網絡連接類型" message:@"當前為4G連接" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];                [alert show];    }    if ([NetWorkType getNetworkTypeFromStatusBar]==5) {        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"網絡連接類型" message:@"當前為WIFI連接" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];                [alert show];    }}- (void)sendlocationInformation{    _map = [[MapViewController alloc]init];        _map.modalPresentationStyle = UIModalPresentationFullScreen;            [self presentViewController:_map animated:YES completion:nil];        }

獲取當前用戶的位置信息：

頭文件導入：

#import <MapKit/MapKit.h>#import <CoreLocation/CoreLocation.h>

加載地圖：

@interface MapViewController ()<MKMapViewDelegate,CLLocationManagerDelegate>{    NSString *locationStr;}@property (nonatomic,strong) MKMapView *mapView;@property (nonatomic,strong) CLLocationManager *locationManager;@end@implementation MapViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    _mapView = [[MKMapView alloc]initWithFrame:self.view.frame];    [self.view addSubview:_mapView];        UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];        backButton.frame = CGRectMake((self.view.bounds.size.width)/2-40, 20, 80, 30);    [backButton setTitle:@"返回" forState:UIControlStateNormal];    [backButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];    backButton.backgroundColor = [UIColor cyanColor];        backButton.titleLabel.textAlignment = NSTextAlignmentCenter;    [backButton addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];    [_mapView addSubview:backButton];    // 1.跟蹤用戶位置(顯示用戶的具體位置)    self.mapView.userTrackingMode = MKUserTrackingModeFollow;        // 2.設置地圖類型    self.mapView.mapType = MKMapTypeStandard;        // 3.設置代理    self.mapView.delegate = self;        _locationManager = [[CLLocationManager alloc] init];    _locationManager.delegate = self;    //設置定位精度    _locationManager.desiredAccuracy=kCLLocationAccuracyBest;    //定位頻率,每隔多少米定位一次    CLLocationDistance distance=1.0;//1米定位一次    _locationManager.distanceFilter=distance;    _locationManager.desiredAccuracy=kCLLocationAccuracyBest;    if([_locationManager respondsToSelector:@selector(requestWhenInUseAuthorization)]) {        [_locationManager requestWhenInUseAuthorization];    }    [_locationManager startUpdatingLocation];    }#pragma mark - MKMapViewDelegate/** *  當用戶的位置更新，就會調用 * *  @param userLocation 表示地圖上藍色那顆大頭針的數據 */- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation{    CLLocationCoordinate2D center = userLocation.location.coordinate;        // 設置地圖的顯示范圍, 讓其顯示到當前指定的位置    MKCoordinateSpan span = MKCoordinateSpanMake(0, 0);//這個顯示大小精度自己調整    MKCoordinateRegion region = MKCoordinateRegionMake(center, span);    [mapView setRegion:region animated:YES];}//可以通過模擬器設置一個虛擬位置，否則在模擬器中無法調用此方法-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray *)locations{    CLLocation *location=[locations firstObject];//取出第一個位置    CLLocationCoordinate2D coordinate=location.coordinate;//位置坐標           locationStr = [NSString stringWithFormat:@"經度：%f,緯度：%f,海拔：%f,航向：%f,行走速度：%f",coordinate.longitude,coordinate.latitude,location.altitude,location.course,location.speed];    //如果不需要實時定位，使用完即使關閉定位服務    [_locationManager stopUpdatingLocation];}- (void)back{    [self dismissViewControllerAnimated:YES completion:nil];}

判斷當前手機網絡連接的類型：

這里我寫了一個類方法，因為我們判斷當前用戶使用的網絡連接方式可以從狀態欄信息中獲取：

在.h中：

@interface NetWorkType : NSObjecttypedef enum {        NETWORK_TYPE_NONE= 0,        NETWORK_TYPE_2G= 1,        NETWORK_TYPE_3G= 2,        NETWORK_TYPE_4G= 3,        NETWORK_TYPE_5G= 4,//  5G目前為猜測結果        NETWORK_TYPE_WIFI= 5,    }NETWORK_TYPE;+(NETWORK_TYPE)getNetworkTypeFromStatusBar;@end

在.m:

#import "NetWorkType.h"#import "AppDelegate.h"@implementation NetWorkType+(NETWORK_TYPE)getNetworkTypeFromStatusBar {                UIapplication *app = [UIApplication sharedApplication];        NSArray *subviews = [[[app valueForKey:@"statusBar"] valueForKey:@"foregroundView"] subviews];        NSNumber *dataNetworkItemView = nil;                for (id subview in subviews) {                if([subview isKindOfClass:[NSClassFromString(@"UIStatusBarDataNetworkItemView") class]])     {                        dataNetworkItemView = subview;                        break;                    }            }        NETWORK_TYPE nettype = NETWORK_TYPE_NONE;        NSNumber * num = [dataNetworkItemView valueForKey:@"dataNetworkType"];        nettype = [num intValue];                return nettype;    }@end