下面簡單介紹下如何把HTML5編寫的頁面編譯成iOS應用，以及如何讓頁面與Swift代碼進行交互。(本文代碼已升級至Swift3)

1，使用UIWebView還是WKWebView來加載html頁面

原來我們一直使用UIWebView來加載web頁面。從iOS8起，蘋果提供了WKWebView用來代替UIWebView。

雖然WKWebView不支持緩存和NSURLProtocol 攔截了，但其加載速度比UIWebView提升差不多一倍的, 內存使用上面反而還少了一半。同時也增加了加載進度條屬性，而不像原來要使用假的進度條。原生代碼與頁面js互相調用也更加方便。

所有在緩存要求不高的情況下，建議使用WKWebView，用戶體驗也會更好。

2，使用UIWebView和WKWebView加載html頁面

我們可以整個應用都使用HTML5來編寫，或者只有某幾個頁面使用HTML。

先把HTML5的頁面導入到項目中來，然后再使用UIWebView或WKWebView加載顯示。(除了導入到本地工程里，把html頁面放在服務器上遠程加載也是可以的)

(注意：添加文件的時候有兩種方式：“Create groups”和“Create folder references”。如果你的html頁面有層次結構，比如css，js，圖片都放在各自的子文件夾中。要選擇后面那個方式“Create folder references”。如果選第一個，雖然在Xcode組織樹看來都是好的，但實際所有加入到項目的文件都會在mainBundle根路徑下，這樣文件引用就會出問題。)

(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)

//將瀏覽器視圖全屏(在內容區域全屏,不占用頂端時間條)

let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width,

height:UIScreen.main.bounds.height)

let theWebView = UIWebView(frame:frame)

//禁用頁面在最頂端時下拉拖動效果

theWebView.scrollView.bounces = false

//加載頁面

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)

//將瀏覽器視圖全屏(在內容區域全屏,不占用頂端時間條)

let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width,

height:UIScreen.main.bounds.height)

let theWebView:WKWebView = WKWebView(frame:frame)

//禁用頁面在最頂端時下拉拖動效果

theWebView.scrollView.bounces = false

//加載頁面

theWebView.load(request)

self.view.addSubview(theWebView)

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

}

3，swift代碼與頁面js互相調用(使用WKWebView)

下面通過一個簡單樣例演示js與原生代碼如何進行相互調用以及參數傳遞。當點擊一個商品圖片時，會彈出一個iOS的消息框。當用戶選擇確定后，又會調用頁面js方法，把商品添加到購物車里面。

--- 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)

//創建供js調用的接口

let theConfiguration = WKWebViewConfiguration()

theConfiguration.userContentController.add(self, name: "interOp")

//將瀏覽器視圖全屏(在內容區域全屏,不占用頂端時間條)

let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width,

height:UIScreen.main.bounds.height)

theWebView = WKWebView(frame:frame, configuration: theConfiguration)

//禁用頁面在最頂端時下拉拖動效果

theWebView!.scrollView.bounces = false

//加載頁面

theWebView!.load(request)

self.view.addSubview(theWebView!)

}

//響應處理js那邊的調用

func userContentController(_ userContentController:WKUserContentController,

didReceive message: WKScriptMessage) {

print(message.body)

let sentData = message.body as! Dictionary

//判斷是確認添加購物車操作

if(sentData["method"] == "addToCarCheck"){

//獲取商品名稱

let itemName = sentData["name"]!

let alertController = UIAlertController(title: "系統提示",

message: "確定把\(itemName)添加到購物車嗎？",

preferredStyle: .alert)

let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)

let okAction = UIAlertAction(title: "確定", style: .default, handler: {

action in

print("點擊了確定")

//調用頁面里加入購物車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頁面 index.html(這里只展示主要js代碼，還用到了jQuery) ---

$(function() {

//點擊商品添加到購物車

$(".goodsItem").click(function() {

var itemName = $(this).children("img")[0].alt;

var message = {"method":"addToCarCheck","name":itemName};

window.webkit.messageHandlers.interOp.postMessage(message);

});

});

//添加到購物車

function addToCar(itemName){

//這里只是簡單的給數量+1,用來演示

var num = parseInt($("#cartNums").text());

$("#cartNums").text(num+1);

}

源碼下載：

總結

以上是生活随笔為你收集整理的swift 原生给h5发消息_Swift - 使用HTML5进行iOS开发（将HTML5打包成iOS应用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。