下面簡(jiǎn)單介紹下如何把HTML5編寫的頁(yè)面編譯成iOS應(yīng)用姑蓝，以及如何讓頁(yè)面與Swift代碼進(jìn)行交互蔬芥。
1，使用UIWebView還是WKWebView來(lái)加載html頁(yè)面
原來(lái)我們一直使用UIWebView來(lái)加載web頁(yè)面。從iOS8起宴霸，蘋果提供了WKWebView用來(lái)代替UIWebView姆坚。
雖然WKWebView不支持緩存和NSURLProtocol 攔截了澳泵，但其加載速度比UIWebView提升差不多一倍的, 內(nèi)存使用上面反而還少了一半。同時(shí)也增加了加載進(jìn)度條屬性兼呵，而不像原來(lái)要使用假的進(jìn)度條兔辅。原生代碼與頁(yè)面js互相調(diào)用也更加方便腊敲。
所有在緩存要求不高的情況下，建議使用WKWebView维苔，用戶體驗(yàn)也會(huì)更好碰辅。
2，使用UIWebView和WKWebView加載html頁(yè)面
我們可以整個(gè)應(yīng)用都使用HTML5來(lái)編寫介时，或者只有某幾個(gè)頁(yè)面使用HTML没宾。
先把HTML5的頁(yè)面導(dǎo)入到項(xiàng)目中來(lái)，然后再使用UIWebView或WKWebView加載顯示沸柔。（除了導(dǎo)入到本地工程里循衰，把html頁(yè)面放在服務(wù)器上遠(yuǎn)程加載也是可以的）
（注意：添加文件的時(shí)候有兩種方式：“Create groups”和“Create folder references”。如果你的html頁(yè)面有層次結(jié)構(gòu)勉失，比如css羹蚣，js，圖片都放在各自的子文件夾中乱凿。要選擇后面那個(gè)方式“Create folder references”顽素。如果選第一個(gè)，雖然在Xcode組織樹(shù)看來(lái)都是好的徒蟆，但實(shí)際所有加入到項(xiàng)目的文件都會(huì)在mainBundle根路徑下胁出，這樣文件引用就會(huì)出問(wèn)題。）
1）下面是使用UIWebView的樣例：
'''
import UIKit
import WebKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let path = Bundle.main.path(forResource: "index", ofType: ".html",
inDirectory: "HTML5")
let url = URL(fileURLWithPath:path!)
let request = URLRequest(url:url)
//將瀏覽器視圖全屏(在內(nèi)容區(qū)域全屏,不占用頂端時(shí)間條)
let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width,
height:UIScreen.main.bounds.height)
let theWebView = UIWebView(frame:frame)
//禁用頁(yè)面在最頂端時(shí)下拉拖動(dòng)效果
theWebView.scrollView.bounces = false
//加載頁(yè)面
theWebView.loadRequest(request)
self.view.addSubview(theWebView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
'''
（2）下面是使用WKWebView的樣例：
import UIKit
import WebKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let path = Bundle.main.path(forResource: "index", ofType: ".html",
inDirectory: "HTML5")
let url = URL(fileURLWithPath:path!)
let request = URLRequest(url:url)
//將瀏覽器視圖全屏(在內(nèi)容區(qū)域全屏,不占用頂端時(shí)間條)
let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width,
height:UIScreen.main.bounds.height)
let theWebView:WKWebView = WKWebView(frame:frame)
//禁用頁(yè)面在最頂端時(shí)下拉拖動(dòng)效果
theWebView.scrollView.bounces = false
//加載頁(yè)面
theWebView.load(request)
self.view.addSubview(theWebView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
3段审，swift代碼與頁(yè)面js互相調(diào)用（使用WKWebView）
下面通過(guò)一個(gè)簡(jiǎn)單樣例演示js與原生代碼如何進(jìn)行相互調(diào)用以及參數(shù)傳遞全蝶。當(dāng)點(diǎn)擊一個(gè)商品圖片時(shí)，會(huì)彈出一個(gè)iOS的消息框寺枉。當(dāng)用戶選擇確定后抑淫，又會(huì)調(diào)用頁(yè)面js方法，把商品添加到購(gòu)物車?yán)锩妗?/p>
--- Swift代碼 ViewController.swift ---
import UIKit
import WebKit?
class ViewController: UIViewController, WKScriptMessageHandler{? ? ? ??
?var theWebView:WKWebView?? ? ? ?
?override func viewDidLoad() {? ? ? ??
super.viewDidLoad()? ? ? ? ? ? ? ?
?let path = Bundle.main.path(forResource: "index", ofType: ".html", ?inDirectory: "HTML5")? ? ? ??
let url = URL(fileURLWithPath:path!)? ? ? ??
let request = URLRequest(url:url)? ? ? ? ? ? ? ??
?//創(chuàng)建供js調(diào)用的接口? ? ? ??
let theConfiguration = WKWebViewConfiguration()? ? ? ??
theConfiguration.userContentController.add(self, name: "interOp")? ? ? ? ? ? ? ??
//將瀏覽器視圖全屏(在內(nèi)容區(qū)域全屏,不占用頂端時(shí)間條)? ? ? ?
?let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width, height:UIScreen.main.bounds.height)? ? ? ??
theWebView = WKWebView(frame:frame, configuration: theConfiguration)? ? ? ??
//禁用頁(yè)面在最頂端時(shí)下拉拖動(dòng)效果? ? ? ??
theWebView!.scrollView.bounces = false? ? ? ?
?//加載頁(yè)面? ? ? ??
theWebView!.load(request)? ? ? ??
self.view.addSubview(theWebView!)? ??
}? ? ? ??
?//響應(yīng)處理js那邊的調(diào)用? ?
?func userContentController(_ userContentController:WKUserContentController, didReceive message: WKScriptMessage) {? ? ? ??
print(message.body)? ? ? ??
let sentData = message.body as! Dictionary
//判斷是確認(rèn)添加購(gòu)物車操作
if(sentData["method"] == "addToCarCheck"){
//獲取商品名稱
let itemName = sentData["name"]!
let alertController = UIAlertController(title: "系統(tǒng)提示",
message: "確定把\(itemName)添加到購(gòu)物車嗎姥闪？",
preferredStyle: .alert)
let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)
let okAction = UIAlertAction(title: "確定", style: .default, handler: {
action in
print("點(diǎn)擊了確定")
//調(diào)用頁(yè)面里加入購(gòu)物車js方法
self.theWebView!.evaluateJavaScript("addToCar('\(itemName)')",
completionHandler: nil)
})
alertController.addAction(cancelAction)
alertController.addAction(okAction)
self.present(alertController, animated: true, completion: nil)
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
--- html頁(yè)面 index.html（這里只展示主要js代碼始苇，還用到了jQuery） ---
$(function() {
//點(diǎn)擊商品添加到購(gòu)物車
$(".goodsItem").click(function() {
var itemName = $(this).children("img")[0].alt;
var message = {"method":"addToCarCheck","name":itemName};
window.webkit.messageHandlers.interOp.postMessage(message);
});
});
//添加到購(gòu)物車
function addToCar(itemName){
//這里只是簡(jiǎn)單的給數(shù)量+1,用來(lái)演示
var num = parseInt($("#cartNums").text());
$("#cartNums").text(num+1);
}
原文出自：www.hangge.com? 轉(zhuǎn)載請(qǐng)保留原文鏈接：http://www.hangge.com/blog/cache/detail_876.html
