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可以充分发挥的优势有：

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

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

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

iOS 开发环境准备

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

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

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

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

具体步骤为：

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

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

4. 加载本地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的交互实现方式。

1. Native调用Vue方法示例为：

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

2. Vue调用Native方法示例为：

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

   
   

在UIWebView中：

1. 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代码

​

2. 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调用代码

在WKWebView中：

1. OC调用JS：

   • OC调用代码

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

   • JS代码

   ​

2. 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调用代码

总结

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