iOS-Hybrid App入门实战

Hybrid App概述

移动端APP种类可分为三类：Web APP（网页应用）、Hybrid APP（混合应用）、Native App（原生应用）。Web App开发成本低、维护更新简单、支持跨平台，Native App则用户体验好、功能强大，Hybrid App是二者的结合，继承了各自优点，通常App主体框架采用原生界面，部分功能模块采用网页。Hybrid App和Native App一般都会上架到应用商店，手机下载安装后才能使用。Android应用商场较多，例如腾讯应用宝、360手机助手、百度手机助手、华为应用市场等，iOS应用商场则只有App Store。

Hybrid App使用原则：兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

Web可以充分发挥的优势有：

快速更新：敏捷开发、bug修复、动态更新...
减少开发成本：一处开发，多端运行（iOS、Android、PC）

Native可以充分发挥的优势有：

优化用户体验、提高App性能：预加载、动画效果、视觉渲染...
访问手机功能：摄像头、GPS、语音、短信、蓝牙...

iOS 开发环境准备

开发iOS原生应用需要苹果相关的设备，首先必须要有一台苹果电脑或者装有黑苹果系统的非苹果机，不推荐使用黑苹果开发iOS App，开发容易出现很多莫名其妙的问题。其次开发iOS App还要有iPhone或者iPad，开发软件为Xcode，它是苹果官方指定的iOS App开发工具。

目前苹果电脑种类有iMac、MacBook、Mac Pro、Mac mini，都能开发iOS App，便宜推荐Mac mini、办公或居家推荐iMac、性能至上推荐Mac Pro、携带方便推荐MacBook。
目前最新款iPhone有iPhone 11 Pro、iPhone 11、IPhone (SE)、iPhone X(R)，iPad有iPad Pro、iPad、iPad Air、iPad mini。
Xcode包含iOS Simulator、Instruments、iOS SDK、ipa打包等，支持的开发语言为Objective-C和Swift。
苹果开发文档地址为https://developer.apple.com，包含相关下载软件和源码、开发文档、开发者账号、App Store上架等内容。
iOS开发需要mac OS、Xcode、iOS三者版本相匹配，本次实战版本：macOS Mojave 10.14.6、Xcode 11、iOS 13.1.2。网址https://developer.apple.com/documentation/xcode-release-notes可查看三者对应关系。
Xcode最新版可从App Store直接下载安装，旧版需要从网址https://developer.apple.com/download/more/处下载安装。

实战：创建iOS原生项目并加载Web界面

本次实战将从零开始演示如何创建一个iOS原生项目，并加载Web界面，效果展示为：

具体步骤为：

打开Xcode，创建iOS项目，选择Tabbed App。
在Storyboard中修改底部菜单栏名称，修改成首页和个人中心，并在首页中添加WKWebView。
在第一个视图界面对应的FirstViewController.m中，导入头文件#import <WebKit/WebKit.h>，加载远程Web Url：

NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.xxx.com"]];      //www.xxx.com为目标地址，xxx可选
[self.webView loadRequest:request];

加载本地Web方式：

NSURL *url = [[NSBundle mainBundle] URLForResource:@“demo” withExtension:@"html"];      //demo.html为本地Web文件名
[self.webView loadRequest:[NSURLRequest requestWithURL:url]];

核心：iOS与Vue的交互

本次实战课程的核心是如何实现iOS Native界面与Vue Web界面的功能交互，在Hybrid App这是一个常见问题。在本课程案例中，充分介绍了iOS Native中两种Web组件（UIWebView、WKWebView）与Vue Web的交互实现方式。

Native调用Vue方法示例为：

点击Native界面的背景颜色切换按钮，Web界面背景颜色和字体颜色会根据按钮提示发生相应变化。

Vue调用Native方法示例为：

点击Web界面的分享按钮，会弹出Native的分享界面，其分享标题由Vue传递而来。

在UIWebView中：

OC调用JS：

OC调用代码

[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"change(\"%d\")",btn.selected]];

或者

JSContext *context=[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:[NSString stringWithFormat:@"change(\"%d\")",btn.selected]];

JS代码

<script>
export default {
  mounted() {
    window.change = this.change;
  },
  data() {
    return {
      isWhite: true
    };
  },
  methods: {
    change(isWhite) {
      this.isWhite = isWhite == 1 ? true : false;
    }
  }
};
</script>

JS调用OC：

OC代码

JSContext *context=[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
__weak typeof(self) weakSelf = self;
context[@"share"] = ^() {
    NSArray *args = [JSContext currentArguments];
    dispatch_async(dispatch_get_main_queue(), ^{
        [weakSelf shareWithTitle:[NSString stringWithFormat:@"%@",args[0]]];
    });
};

JS调用代码

<script>
export default {
  methods: {
    shareClick() {
      share("原标题：全国1000家景区门票免费、打折！最划算黄金周来了！");
    }
  }
};
</script>

在WKWebView中：

OC调用JS：

OC调用代码

[self.webView evaluateJavaScript:[NSString stringWithFormat:@"change(\"%d\")",btn.selected] completionHandler:nil];

JS代码

<script>
export default {
  mounted() {
    window.change = this.change;
  },
  data() {
    return {
      isWhite: true
    };
  },
  methods: {
    change(isWhite) {
      this.isWhite = isWhite == 1 ? true : false;
    }
  }
};
</script>

JS调用OC：

OC代码

WKWebViewConfiguration *configuration = self.webView.configuration;
[configuration.userContentController addScriptMessageHandler:self name:@"share"];

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([message.name isEqualToString:@"share"]) {
        [self shareWithTitle:message.body];
     }
}

JS调用代码

<script>
export default {
  methods: {
    shareClick() {
      window.webkit.messageHandlers.share.postMessage("活动规则");
    }
  }
};
</script>

总结

自iOS 12.0起，UIWebView已被废弃，上架审核将不通过，推荐使用WKWebView。
iOS核心是WKWebViewConfiguration、WKScriptMessageHandler，JS核心是window.webkit.messageHandlers.share.postMessage。
不推荐使用Url拦截方式，参数解析麻烦。
使用WKWebView需要导入头文件：#import <WebKit/WebKit.h>。
mounted中把被调用的Vue方法添加到window上。
也可以使用三方框架WebViewJavascriptBridge、DSBridge等。
Android和iOS跨平台：Ionic、React Native、Flutter等。