首页 > 学院 > 开发设计 > 正文

UIWebView操作

2019-11-14 18:13:58
字体:
来源:转载
供稿:网友

网络开发中,当公司已经使用 HTML5 技术实现同时适应 Android 和 iOS 等多个平台的网页时,这时往往需要我们 iOS 平台能够嵌入网页并进行各种交互,那我们应该怎么做来实现这种需求呢?

这里我们考虑的方案就是:使用 UIWebView 网页控件

 

然而考虑使用 UIWebView 进行混合编程的场景特点有:

(1)排版复杂:通常包括图片和文字的混排,还有可能包括链接需要支持点击操作。如果自己用原生控件拼装实现,由于界面元素过多,做起来会很困难。就算是使用 CoreText 来实现,也需要自己实现相当多的复杂排版逻辑。

(2)界面的变动需求频繁:例如淘宝 App 的彩票页面,可能常常需要更新界面以推出不同的活动。采用 UIWebView 嵌套页面实现后,这类页面不需要向 App Store 提交新的版本就可以动态地更新,而原生控件实现的界面很难达到如此高的灵活性。

(3)界面对用户的交互需求不复杂:因为 UIWebView 实现的交互效果与原生效果相比还是会大打折扣,所以这类界面通常都没有复杂的交互效果。这也是主流 App 大多采用混合 UIWebView 来实现界面而不是使用纯 UIWebView 来实现界面的原因之一,另外的原因是纯 UIWebView 实现的性能也没原生的好,而且纯 UIWebView 实现的话根本无法通过 App Store 的审核,他会建议您搞 Web App。

 

本随笔简单介绍如何使用 UIWebView 网页控件:

(1)简单浏览器

(2)页面交互;可以考虑使用模版引擎库 GRMustache:https://github.com/groue/GRMustache,方便阅读和更改渲染内容

(3)页面调用 OC 方法;可以考虑使用 JS 与 OC 交互库「WebViewjavascriptBridge」:https://github.com/marcuswestin/WebViewJavascriptBridge,方便 JS 与 OC 之间发送消息进行交互

 

效果如下:

 

 

ViewController.h

1 #import <UIKit/UIKit.h>2 3 @interface ViewController : UITableViewController4 @PRoperty (copy, nonatomic) NSArray *arrSampleName;5 6 - (instancetype)initWithSampleNameArray:(NSArray *)arrSampleName;7 8 @end 

ViewController.m

 1 #import "ViewController.h" 2 #import "SimpleBrowserViewController.h" 3 #import "PageInteractionViewController.h" 4 #import "PageCallOCFunctionViewController.h" 5  6 @interface ViewController () 7 - (void)layoutUI; 8 @end 9 10 @implementation ViewController11 - (void)viewDidLoad {12     [super viewDidLoad];13     14     [self layoutUI];15 }16 17 - (void)didReceiveMemoryWarning {18     [super didReceiveMemoryWarning];19     // Dispose of any resources that can be recreated.20 }21 22 - (instancetype)initWithSampleNameArray:(NSArray *)arrSampleName {23     if (self = [super initWithStyle:UITableViewStyleGrouped]) {24         self.navigationItem.title = @"UIWebView 操作";25         self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStylePlain target:nil action:nil];26         27         _arrSampleName = arrSampleName;28     }29     return self;30 }31 32 - (void)layoutUI {33     34 }35 36 #pragma mark - UITableViewController相关方法重写37 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {38     return 0.1;39 }40 41 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {42     return 1;43 }44 45 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {46     return [_arrSampleName count];47 }48 49 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {50     static NSString *cellIdentifier = @"cell";51     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];52     if (!cell) {53         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];54     }55     cell.textLabel.text = _arrSampleName[indexPath.row];56     return cell;57 }58 59 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {60     switch (indexPath.row) {61         case 0: {62             SimpleBrowserViewController *simpleBrowserVC = [SimpleBrowserViewController new];63             [self.navigationController pushViewController:simpleBrowserVC animated:YES];64             break;65         }66         case 1: {67             PageInteractionViewController *pageInteractionVC = [PageInteractionViewController new];68             [self.navigationController pushViewController:pageInteractionVC animated:YES];69             break;70         }71         case 2: {72             PageCallOCFunctionViewController *pageCallOCFunctionVC = [PageCallOCFunctionViewController new];73             [self.navigationController pushViewController:pageCallOCFunctionVC animated:YES];74             break;75         }76         default:77             break;78     }79 }80 81 @end 

PrefixHeader.pch

1 #define kTitleOfSimpleBrowser @"简单浏览器"2 #define kTitleOfPageInteraction @"页面交互"3 #define kTitleOfPageCallOCFunction @"页面调用 OC 方法"4 5 #define kapplication [UIApplication sharedApplication] 

SimpleBrowserViewController.h

 1 #import <UIKit/UIKit.h> 2  3 @interface SimpleBrowserViewController : UIViewController <UISearchBarDelegate, UIWebViewDelegate> 4 @property (strong, nonatomic) UISearchBar *searchBar; 5 @property (strong, nonatomic) UIWebView *webView; 6 @property (strong, nonatomic) UIToolbar *toolbar; 7 @property (strong, nonatomic) UIBarButtonItem *barBtnBack; 8 @property (strong, nonatomic) UIBarButtonItem *barBtnForward; 9 10 @end 

SimpleBrowserViewController.m

  1 #import "SimpleBrowserViewController.h"  2   3 @interface SimpleBrowserViewController ()  4 - (void)webViewBack;  5 - (void)webViewForward;  6 - (void)layoutUI;  7 - (void)sendRequest:(NSString *)requestURLStr;  8 - (void)changeBarButtonStatus;  9 @end 10  11 @implementation SimpleBrowserViewController 12  13 - (void)viewDidLoad { 14     [super viewDidLoad]; 15      16     [self layoutUI]; 17 } 18  19 - (void)didReceiveMemoryWarning { 20     [super didReceiveMemoryWarning]; 21     // Dispose of any resources that can be recreated. 22 } 23  24 - (void)webViewBack { 25     [_webView goBack]; 26 } 27  28 - (void)webViewForward { 29     [_webView goForward]; 30 } 31  32 - (void)layoutUI { 33     self.navigationItem.title = kTitleOfSimpleBrowser; 34     self.automaticallyAdjustsScrollViewInsets = NO; //是否自动适应滚动视图的内嵌入;默认为YES,这里设置为NO,避免网页控件中_UIWebViewScrollView的UIWebBrowserView位置偏移 35      36     CGRect rect = [[UIScreen mainScreen] bounds]; 37     static const CGFloat heightOfStatusBarAndNavigationBar = 64.0; 38     CGFloat widthOfScreen = rect.size.width; 39     CGFloat heightOfScreen  = rect.size.height; 40      41     //添加搜索栏 42     _searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0.0, heightOfStatusBarAndNavigationBar, widthOfScreen, 44.0)]; 43     _searchBar.delegate = self; 44     _searchBar.placeholder = @"请输入以file://或http开头的地址"; 45     [self.view addSubview:_searchBar]; 46      47     //添加工具栏和左右按钮(回退和前进) 48     _toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0, heightOfScreen - 44.0, 49                                                            widthOfScreen, 44.0)]; 50     rect = CGRectMake(0.0, 0.0, 32.0, 32.0); 51     UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom]; 52     btnBack.frame = rect; 53     [btnBack setImage:[UIImage imageNamed:@"LastPageNormal"] forState:UIControlStateNormal]; 54     [btnBack setImage:[UIImage imageNamed:@"LastPageDisabled"] forState:UIControlStateDisabled]; 55     [btnBack addTarget:self 56                 action:@selector(webViewBack) 57       forControlEvents:UIControlEventTouchUpInside]; 58     _barBtnBack = [[UIBarButtonItem alloc] initWithCustomView:btnBack]; 59     _barBtnBack.enabled = NO; 60      61     UIBarButtonItem *barBtnSpacing=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; 62      63     UIButton *btnForward = [UIButton buttonWithType:UIButtonTypeCustom]; 64     btnForward.frame = rect; 65     [btnForward setImage:[UIImage imageNamed:@"NextPageNormal"] forState:UIControlStateNormal]; 66     [btnForward setImage:[UIImage imageNamed:@"NextPageDisabled"] forState:UIControlStateDisabled]; 67     [btnForward addTarget:self 68                    action:@selector(webViewForward) 69          forControlEvents:UIControlEventTouchUpInside]; 70     _barBtnForward = [[UIBarButtonItem alloc] initWithCustomView:btnForward]; 71     _barBtnForward.enabled = NO; 72      73     _toolbar.items = @[ _barBtnBack, barBtnSpacing, _barBtnForward ]; 74     [self.view addSubview:_toolbar]; 75      76     //添加网页控件 77     CGFloat heightOfWebView = heightOfScreen - _searchBar.frame.origin.y - _searchBar.frame.size.height - _toolbar.frame.size.height; 78     _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0, heightOfStatusBarAndNavigationBar + _searchBar.frame.size.height, 79                                                            widthOfScreen, heightOfWebView)]; 80     _webView.dataDetectorTypes = UIDataDetectorTypeAll; 81     _webView.delegate = self; 82     [self.view addSubview:_webView]; 83 } 84  85 - (void)sendRequest:(NSString *)requestURLStr { 86     if (requestURLStr.length > 0) { 87         NSURL *requestURL; 88          89         //加载bundle中的文件;网页控件打开本地pdf、Word文件依靠的并不是他自身解析,而是依靠MIME Type识别文件类型并调用对应应用打开 90         if ([requestURLStr hasprefix:@"file://"]) { 91             NSRange range = [requestURLStr rangeOfString:@"file://"]; 92             NSString *fileName = [requestURLStr substringFromIndex:range.length]; 93             requestURL = [[NSBundle mainBundle] URLForResource:fileName 94                                                  withExtension:nil]; 95         } else { 96             //加载百度搜索网站的内容 97             if (![requestURLStr hasPrefix:@"http"]) { 98                 requestURLStr = [NSString stringWithFormat:@"https://www.baidu.com/s?wd=%@", requestURLStr]; 99             }100             //最终加载的还是HTTP或者HTTPS协议的网站内容,进行编码操作101             requestURLStr = [requestURLStr stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];102             requestURL = [NSURL URLWithString:requestURLStr];103         }104         105         //加载请求地址内容106         [_webView loadRequest:[NSURLRequest requestWithURL:requestURL]];107     }108 }109 110 - (void)changeBarButtonStatus {111     _barBtnBack.enabled = _webView.canGoBack;112     _barBtnForward.enabled = _webView.canGoForward;113 }114 115 #pragma mark - UIWebViewDelegate116 - (void)webViewDidStartLoad:(UIWebView *)webView {117     kApplication.networkActivityIndicatorVisible = YES;118 }119 120 - (void)webViewDidFinishLoad:(UIWebView *)webView {121     kApplication.networkActivityIndicatorVisible = NO;122     [self changeBarButtonStatus];123 }124 125 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {126     NSLog(@"Error: %@", error);127     kApplication.networkActivityIndicatorVisible = NO;128     UIAlertView *alertVCustom = [[UIAlertView alloc] initWithTitle:@"提示信息"129                                                            message:@"网络连接错误"130                                                           delegate:nil131                                                  cancelButtonTitle:@"确定"132                                                  otherButtonTitles:nil, nil];133     [alertVCustom show];134 }135 136 #pragma mark - UISearchBarDelegate137 - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {138     [self sendRequest:searchBar.text];139     [_searchBar resignFirstResponder];140 }141 142 @end 

PageInteractionViewController.h

1 #import <UIKit/UIKit.h>2 3 @interface PageInteractionViewController : UIViewController<UIWebViewDelegate>4 @property (strong, nonatomic) UIWebView *webView;5 6 @end 

PageInteractionViewController.m

 1 #import "PageInteractionViewController.h" 2  3 @interface PageInteractionViewController () 4 - (void)layoutUI; 5 - (void)sendRequest; 6 @end 7  8 @implementation PageInteractionViewController 9 10 - (void)viewDidLoad {11     [super viewDidLoad];12     13     [self layoutUI];14     15     [self sendRequest];16 }17 18 - (void)didReceiveMemoryWarning {19     [super didReceiveMemoryWarning];20     // Dispose of any resources that can be recreated.21 }22 23 - (void)layoutUI {24     self.navigationItem.title = kTitleOfPageInteraction;25     self.automaticallyAdjustsScrollViewInsets = NO; //是否自动适应滚动视图的内嵌入;默认为YES,这里设置为NO,避免网页控件中_UIWebViewScrollView的UIWebBrowserView位置偏移26     27     CGRect rect = [[UIScreen mainScreen] bounds];28     static const CGFloat heightOfStatusBarAndNavigationBar = 64.0;29     //添加网页控件30     _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0, heightOfStatusBarAndNavigationBar,31                                                            rect.size.width, rect.size.height - heightOfStatusBarAndNavigationBar)];32     _webView.dataDetectorTypes = UIDataDetectorTypeAll;33     _webView.delegate = self;34     self.automaticallyAdjustsScrollViewInsets = NO;35     [self.view addSubview:_webView];36 }37 38 - (void)sendRequest {39     NSString *htmlStr=@"<html>/40                             <head><title>KenmuHuang's Blog</title></head>/41                             <body style=/"color:#0044AA;/">/42                                 <h3 id=/"header/">I'm KenmuHuang</h3>/43                                 <p>More coding, more thinking. Stay hungry, stay foolish.</p>/44                                 <span>http://www.VEVb.com/huangjianwu/</span>/45                             </body>/46                         </html>";47     [_webView loaDHTMLString:htmlStr baseURL:nil];48 }49 50 #pragma mark - UIWebViewDelegate51 - (void)webViewDidStartLoad:(UIWebView *)webView {52     kApplication.networkActivityIndicatorVisible = YES;53 }54 55 - (void)webViewDidFinishLoad:(UIWebView *)webView {56     kApplication.networkActivityIndicatorVisible = NO;57     NSLog(@"%@",[_webView stringByEvaluatingJavaScriptFromString:@"document.title"]); //打印内容为html的title标签内容:KenmuHuang's Blog58     NSLog(@"%@",[_webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('header').innerHTML='KenmuHuang//'s Blog';"]); //必须使用双反斜杆来转译单引号59 }60 61 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {62     NSLog(@"Error: %@", error);63     kApplication.networkActivityIndicatorVisible = NO;64     UIAlertView *alertVCustom = [[UIAlertView alloc] initWithTitle:@"提示信息"65                                                            message:@"网络连接错误"66                                                           delegate:nil67                                                  cancelButtonTitle:@"确定"68                                                  otherButtonTitles:nil, nil];69     [alertVCustom show];70 }71 72 @end 

RedirectURL.js

 1 function showSheet(title, cancelButtonTitle, destructiveButtonTitle, otherButtonTitle) { 2     var url = 'KMActionSheet://?'; 3     var paramas = title + '&' + cancelButtonTitle + '&' + destructiveButtonTitle; 4     if(otherButtonTitle) { 5         paramas += '&' + otherButtonTitle; 6     } 7     window.location.href = url + encodeURIComponent(paramas); 8 } 9 10 var header = document.getElementById('header');11 if(header) {12     header.onclick = function(){13         showSheet('系统提示', '取消', '确定', null);14     };15

PageCallOCFunctionViewController.h

1 #import <UIKit/UIKit.h>2 3 @interface PageCallOCFunctionViewController : UIViewController<UIWebViewDelegate>4 @property (strong, nonatomic) UIWebView *webView;5 6 @end 

PageCallOCFunctionViewController.m

  1 #import "PageCallOCFunctionViewController.h"  2   3 @interface PageCallOCFunctionViewController ()  4 - (void)layoutUI;  5 - (void)sendRequest;  6 - (void)showActionSheetWithTitle:(NSString *)title cancelButtonTitle:(NSString *)cancelButtonTitle destructiveButtonTitle:(NSString *)destructiveButtonTitle otherButtonTitle:(NSString *)otherButtonTitle;  7 @end  8   9 @implementation PageCallOCFunctionViewController 10  11 - (void)viewDidLoad { 12     [super viewDidLoad]; 13      14     [self layoutUI]; 15      16     [self sendRequest]; 17 } 18  19 - (void)didReceiveMemoryWarning { 20     [super didReceiveMemoryWarning]; 21     // Dispose of any resources that can be recreated. 22 } 23  24 - (void)layoutUI { 25     self.navigationItem.title = kTitleOfPageCallOCFunction; 26     self.automaticallyAdjustsScrollViewInsets = NO; //是否自动适应滚动视图的内嵌入;默认为YES,这里设置为NO,避免网页控件中_UIWebViewScrollView的UIWebBrowserView位置偏移 27      28     CGRect rect = [[UIScreen mainScreen] bounds]; 29     static const CGFloat heightOfStatusBarAndNavigationBar = 64.0; 30     //添加网页控件 31     _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0, heightOfStatusBarAndNavigationBar, 32                                                            rect.size.width, rect.size.height - heightOfStatusBarAndNavigationBar)]; 33     _webView.dataDetectorTypes = UIDataDetectorTypeAll; 34     _webView.delegate = self; 35     self.automaticallyAdjustsScrollViewInsets = NO; 36     [self.view addSubview:_webView]; 37 } 38  39 - (void)sendRequest { 40     NSString *htmlStr=@"<html>/ 41     <head><title>KenmuHuang's Blog</title></head>/ 42     <body style=/"color:#0044AA;/">/ 43     <h3 id=/"header/">I'm KenmuHuang, click me to show action sheet.</h3>/ 44     <p>More coding, more thinking. Stay hungry, stay foolish.</p>/ 45     <span>http://www.VEVb.com/huangjianwu/</span>/ 46     </body>/ 47     </html>"; 48     [_webView loadHTMLString:htmlStr baseURL:nil]; 49 } 50  51 - (void)showActionSheetWithTitle:(NSString *)title cancelButtonTitle:(NSString *)cancelButtonTitle destructiveButtonTitle:(NSString *)destructiveButtonTitle otherButtonTitle:(NSString *)otherButtonTitle{ 52     UIActionSheet *actionSheet=[[UIActionSheet alloc] initWithTitle:title 53                                                            delegate:nil 54                                                   cancelButtonTitle:cancelButtonTitle 55                                              destructiveButtonTitle:destructiveButtonTitle 56                                                   otherButtonTitles:otherButtonTitle, nil]; 57     [actionSheet showInView:self.view]; 58 } 59  60 #pragma mark - UIWebViewDelegate 61 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { 62     BOOL isStartLoad = YES; 63     if ([request.URL.scheme isEqualToString:@"kmactionsheet"]) { //request.URL.scheme 返回全小写的内容 64         NSString *paramContent = request.URL.query; 65         NSArray *arrParam = [[paramContent stringByRemovingPercentEncoding] componentsSeparatedByString:@"&"]; 66         NSString *otherButtonTitle = nil; 67         if (arrParam.count > 3) { 68             otherButtonTitle = arrParam[3]; 69         } 70          71         [self showActionSheetWithTitle:arrParam[0] 72                      cancelButtonTitle:arrParam[1] 73                 destructiveButtonTitle:arrParam[2] 74                       otherButtonTitle:otherButtonTitle]; 75         isStartLoad = NO; 76     } 77     return isStartLoad; 78 } 79  80 - (void)webViewDidStartLoad:(UIWebView *)webView { 81     kApplication.networkActivityIndicatorVisible = YES; 82 } 83  84 - (void)webViewDidFinishLoad:(UIWebView *)webView { 85     kApplication.networkActivityIndicatorVisible = NO; 86      87     //加载用于重定向地址的JavaScript内容 88     NSString *jspath = [[NSBundle mainBundle] pathForResource:@"RedirectURL.js" ofType:nil]; 89     NSString *jsContent = [NSString stringWithContentsOfFile:jsPath 90                                                     encoding:NSUTF8StringEncoding 91                                                        error:nil]; 92     [_webView stringByEvaluatingJavaScriptFromString:jsContent]; 93 } 94  95 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error { 96     NSLog(@"Error: %@", error); 97     kApplication.networkActivityIndicatorVisible = NO; 98     UIAlertView *alertVCustom = [[UIAlertView alloc] initWithTitle:@"提示信息" 99                                                            message:@"网络连接错误"100                                                           delegate:nil101                                                  cancelButtonTitle:@"确定"102                                                  otherButtonTitles:nil, nil];103     [alertVCustom show];104 }105 106 @end 

AppDelegate.h

1 #import <UIKit/UIKit.h>2 3 @interface AppDelegate : UIResponder <UIApplicationDelegate>4 5 @property (strong, nonatomic) UIWindow *window;6 @property (strong, nonatomic) UINavigationController *navigationController;7 8 @end 

AppDelegate.m

 1 #import "AppDelegate.h" 2 #import "ViewController.h" 3  4 @interface AppDelegate () 5  6 @end 7  8 @implementation AppDelegate 9 10 11 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {12     _window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];13     ViewController *viewController = [[ViewController alloc]14                                       initWithSampleNameArray:@[ kTitleOfSimpleBrowser,15                                                                  kTitleOfPageInteraction,16                                                                  kTitleOfPageCallOCFunction ]];17     _navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];18     _window.rootViewController = _navigationController;19     //[_window addSubview:_navigationController.view]; //当_window.rootViewController关联时,这一句可有可无20     [_window makeKeyAndVisible];21     return YES;22 }23 24 - (void)applicationWillResignActive:(UIApplication *)application {25 }26 27 - (void)applicationDidEnterBackground:(UIApplication *)application {28 }29 30 - (void)applicationWillEnterForeground:(UIApplication *)application {31 }32 33 - (void)applicationDidBecomeActive:(UIApplication *)application {34 }35 36 - (void)applicationWillTerminate:(UIApplication *)application {37 }38 39 @end

  


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表