日常开发中，我们经常要在app中嵌入webview, 在此介绍一下原生与webview的交互，用到的是WKWebView
- 创建WKWebView
//引入框架
import WebKit
class WebDetailViewController: UIViewController,WKScriptMessageHandler,WKNavigationDelegate,WKUIDelegate {
var wkWebview : WKWebView?
override func viewDidLoad() {
super.viewDidLoad()
//地址：
let url = URL.init(string: "https://www.baidu.com")
//请求：
let request = URLRequest(url: url!);
// 用户交互信息管理
let userContent = WKUserContentController.init()
//Touchealth 可以自定义，主要为了和h5交互提供标识
userContent.add(self, name: "Touchealth")
/*
js端直接使用以下代码发送消息给原生
window.webkit.messageHandlers.Touchealth.postMessage(message);
*/
//初始化
let config = WKWebViewConfiguration.init();
config.userContentController = userContent;
self.wkWebview = WKWebView.init(frame:CGRect.init(x: 0, y: 0, width: SCREENWIDTH, height: SCREENHEIGHT==812 ? SCREENHEIGHT-88 : SCREENHEIGHT-64), configuration: config);
self.view.addSubview(self.wkWebview!);
//不要忘记实现代理
self.wkWebview?.navigationDelegate = self;
self.wkWebview?.uiDelegate = self;
self.wkWebview?.load(request)
self.wkWebview?.sizeToFit()
//添加进度观察者 为了实现顶部加载提示条
if self.wkWebview != nil {
self.wkWebview?.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil);
}
}
}
- 代理方法 调用js 方法 发送数据给 webview, 实现传送登录token，领取代金券的id等信息。 传送的信息格式 可以和 web开发人员自己定。
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
//发送消息给web
//这里只发送系统版本iOS
let jsFunc = "appDidSendData('iOS')"
self.wkWebview?.evaluateJavaScript(jsFunc, completionHandler: nil);
//可以自定义数据格式：
// let data = {"token": "dsjkk","platform" : "iOS"}
//要把data转为 字符串
}
- web端接收数据 和发送数据
//web端实现以下方法
function appDidSendData(data){
//把app端传过来的data转为json对象
//do someting 逻辑处理 登录状态处理等
}
//发送数据
var message = {
"id" : 100
...
}
window.webkit.messageHandlers.Touchealth.postMessage(message);
- app端接收web端数据(通过代理方法)
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
//message.body 即为web端传送数据
//转换message.body使用
}
- 创建 进度条
//通过观察者模式监听
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
if keyPath == "estimatedProgress"{
self.progressView?.setProgress(Float((self.wkWebview?.estimatedProgress)!), animated: true);
if (self.wkWebview?.estimatedProgress)! >= Double(1){
// self.autherView.alpha = 1
UIView.animate(withDuration: 0.3, delay: 0.5, options: .curveEaseInOut, animations: {
self.progressView?.alpha = 0;
}, completion: { (finished) in
self.progressView?.progress = 0;
})
}
}
}
func createProgressView (){
self.progressView = UIProgressView.init(frame: CGRect.init(x: 0, y: 0, width: SCREENWIDTH, height: 3));
self.progressView?.progressTintColor = UIColor.hexadecimalColor(hexadecimal: "#8c8c8c");//改变 变长那部分颜色；
self.progressView?.trackTintColor = UIColor.clear;//改变背景色
self.progressView?.progress = 0;
self.view.addSubview(self.progressView!);
}
//最后别忘了移除观察者
