iOS内实现h5原生开发

介绍

Xcode可以直接引入h5的界面，实现原生界面内嵌h5开发。其实这里不止iOS可以这样做，安卓也可以引用同样的h5界面，实现界面使用同一份h5代码。

为什么要写h5的界面呢，原因是第一Xcode很卡，画图效果也不如h5方便。第二是调试h5直接通过浏览器调试就行了，不像Xcode每次编译跑起来真是卡的一批，时间又长。所以我就研究了这一套本地h5开发的逻辑，既能很好的实现业务逻辑的开发，又能方便开发，统一多端，效率大大提升。

步骤如下

把目录导入到Xcode中，选择Create folder references点击完成

引入h5目录效果如上

下面从实现界面和实现逻辑两个部分讲解。

实现界面

上面是实现的h5界面，通过webview引入项目，可以看到效果和原生几乎一样。

当然需要达到和原生效果一样，还要对h5的界面做一些配置。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
复制代码

上面的配置规定了页面的不能缩放，数字不会直接显示号码的样式，还要状态栏的显示颜色为黑色

/* 禁用长按 */
body {-webkit-touch-callout:none;/*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早起浏览器*/-moz-user-select:none;/*火狐浏览器*/-ms-user-select:none;/*IE浏览器*/user-select:none;/*用户是否能够选中文本*/}html{font-family:PingFangSC-Regular;
}
复制代码

上面是一些通用的css配置，我放到了style.css里面，一是禁止用户长按显示放大显示器的效果，二是统一使用苹方字体。

有了以上配置，基本就可以好好实现界面的开发了，开发h5的流程没有和正常h5开发没有什么流程。

iOS引入资源的方式如下

let configuration = WKWebViewConfiguration()
configuration.preferences = WKPreferences()
configuration.preferences.javaScriptEnabled = true
configuration.userContentController = WKUserContentController()let webview = WKWebView.init(frame: self.view.bounds, configuration: configuration)
self.view.addSubview(webview)
webview.navigationDelegate = self
webview.load(URLRequest.init(url: URL.init(fileURLWithPath: Bundle.main.path(forResource: "licheng", ofType: "html", inDirectory: "h5")!)))
复制代码

webview引入licheng.html，通过urlrequest请求资源，渲染到当前的webview界面上，由于是本地直接加载，不存在网络延迟的问题，所以加载速度很快，几乎和原生界面一样。

下面讲讲逻辑部分，比如网络，点击跳转，传值等。

实现逻辑

之前的博客也有讲过wkwebview混合开发，怎么实现传值的方式。主要过程就是实现js和原生交互，有了交互外加一层封装，就可以方便的通过接口实现我们传值功能。

添加一个name的handler，h5可以通过发送这个handler，调用原生的代理方法

func addJsFunc(_ name: String, _ callback:@escaping ((Any)->Void)) {wkconfiguration.userContentController.add(self, name: name)jsFuncArr.append(JsFuncModel.init(name: name, callback: callback))
}
复制代码

h5发送handler

window.webkit.messageHandlers.openvc.postMessage({name:'aa', sex:'male', age:21})复制代码

原生代理方法接收，匹配到相应的name，执行原生的callback

public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {print(message.name)print(message.body)for jsFunc in jsFuncArr {if jsFunc.name == message.name {jsFunc.callback(message.body)break}}
}
复制代码

以上是添加一个handler的方式，可以使js调用原生并传值。这样就能实现界面之间的跳转的action，以及js一些传值动作的执行了。

下面实现原生传值给js环境

func addJsObj(_ key: String, _ value: String) {wkwebview.evaluateJavaScript("vm.\(key) = \(value)", completionHandler: nil)
}
复制代码

通过kv的方式设置vm的属性值，vm是我们vue全局环境的实例。我们的h5的组件是通过vue完成双向绑定的，通过设置vm的属性的值，可以把data迅速的渲染到我们的页面上。这里引入vue这个框架的好处是，我们不用那么频繁的操作dom了，有vue做mvvm的架构，界面的渲染真是比原生实现轻松太多了。

以上是原生通过evaluateJavaScript传值给js环境，这样就能实现在原生实现网络请求回来的数据，直接给到h5界面去渲染。或者原生的一些动作可以通知到h5去执行。

注意这里网络请求是放在原生环境实现的，原因是浏览器和后台部署都是不支持跨域访问的，这个问题可以具体google。

通过上面的开发基本上可以实现h5的原生开发了，因为h5是打包到项目里面的，所以性能很好。我对这一套渲染和传值的逻辑进行了封装，放在了JWebViewController里面，继承该类就可以使用了。代码参考iOSh5vue

注意事项

顶层文件夹名字要命名为h5，因为JWebViewController底层封装写死了h5的目录。
在页面返回时，要做合适的时机调用clearJs方法，这样vc才会被析构。不然会出现内存泄露。
相关逻辑都封装在JWebViewController里面了，需要继承JWebViewController，实现业务逻辑的部分。