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