日常開(kāi)發(fā)中澈段，我們經(jīng)常要在app中嵌入webview, 在此介紹一下原生與webview的交互，用到的是WKWebView
- 創(chuàng)建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")
//請(qǐng)求：
let request = URLRequest(url: url!);
// 用戶交互信息管理
let userContent = WKUserContentController.init()
//Touchealth 可以自定義橄登，主要為了和h5交互提供標(biāo)識(shí)
userContent.add(self, name: "Touchealth")
/*
js端直接使用以下代碼發(fā)送消息給原生
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!);
//不要忘記實(shí)現(xiàn)代理
self.wkWebview?.navigationDelegate = self;
self.wkWebview?.uiDelegate = self;
self.wkWebview?.load(request)
self.wkWebview?.sizeToFit()
//添加進(jìn)度觀察者 為了實(shí)現(xiàn)頂部加載提示條
if self.wkWebview != nil {
self.wkWebview?.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil);
}
}
}
- 代理方法 調(diào)用js 方法 發(fā)送數(shù)據(jù)給 webview, 實(shí)現(xiàn)傳送登錄token抓歼，領(lǐng)取代金券的id等信息讥此。 傳送的信息格式 可以和 web開(kāi)發(fā)人員自己定。
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
//發(fā)送消息給web
//這里只發(fā)送系統(tǒng)版本iOS
let jsFunc = "appDidSendData('iOS')"
self.wkWebview?.evaluateJavaScript(jsFunc, completionHandler: nil);
//可以自定義數(shù)據(jù)格式：
// let data = {"token": "dsjkk","platform" : "iOS"}
//要把data轉(zhuǎn)為 字符串
}
- web端接收數(shù)據(jù) 和發(fā)送數(shù)據(jù)
//web端實(shí)現(xiàn)以下方法
function appDidSendData(data){
//把a(bǔ)pp端傳過(guò)來(lái)的data轉(zhuǎn)為json對(duì)象
//do someting 邏輯處理 登錄狀態(tài)處理等
}
//發(fā)送數(shù)據(jù)
var message = {
"id" : 100
...
}
window.webkit.messageHandlers.Touchealth.postMessage(message);
- app端接收web端數(shù)據(jù)(通過(guò)代理方法)
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
//message.body 即為web端傳送數(shù)據(jù)
//轉(zhuǎn)換message.body使用
}
- 創(chuàng)建 進(jìn)度條
//通過(guò)觀察者模式監(jiān)聽(tīng)
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");//改變 變長(zhǎng)那部分顏色谣妻；
self.progressView?.trackTintColor = UIColor.clear;//改變背景色
self.progressView?.progress = 0;
self.view.addSubview(self.progressView!);
}
//最后別忘了移除觀察者
