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，实现业务逻辑的部分。