最近越来越流行使用HTML5进行跨平台应用开发，先不说运行效率如何。从人力成本来说，只要写一套html页面就可以打包发布到安卓和iOS等多个平台，确实会省下不少时间和人力（这个领导最喜欢了）。
下面简单介绍下如何把HTML5编写的页面编译成iOS应用，以及如何让页面与Swift代码进行交互。（本文代码已升级至Swift3）
（1）下面是使用UIWebView的样例：
（2）下面是使用WKWebView的样例：
3，swift代码与页面js互相调用（使用WKWebView）
下面通过一个简单样例演示js与原生代码如何进行相互调用以及参数传递。当点击一个商品图片时，会弹出一个iOS的消息框。当用户选择确定后，又会调用页面js方法，把商品添加到购物车里面。
28
18
源码下载：
1，使用UIWebView还是WKWebView来加载html页面
原来我们一直使用UIWebView来加载web页面。从iOS8起，苹果提供了WKWebView用来代替UIWebView。
原来我们一直使用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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import
UIKit
WebKit
class
ViewController
:
UIViewController
{
override
func
viewDidLoad() {
super
.viewDidLoad()
let
path =
Bundle
.main.path(forResource:
"index"
,ofType:
".html"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
inDirectory:
"HTML5"
)
url =
URL
(fileURLWithPath:path!)
request =
URLRequest
(url:url)
//将浏览器视图全屏(在内容区域全屏,不占用顶端时间条)
frame =
CGRect
(x:0,y:20,width:
UIScreen
.main.bounds.width,
height:
.main.bounds.height)
theWebView =
UIWebView
(frame:frame)
//禁用页面在最顶端时下拉拖动效果
theWebView.scrollView.bounces =
false
//加载页面
theWebView.loadRequest(request)
self
.view.addSubview(theWebView)
}
didReceiveMemoryWarning() {
.didReceiveMemoryWarning()
}
}
|
（2）下面是使用WKWebView的样例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import
UIKit
import
WebKit
class
ViewController
:
UIViewController
{
override
func
viewDidLoad() {
super
.viewDidLoad()
let
path =
Bundle
.main.path(forResource:
"index"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,ofType:
".html"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
inDirectory:
"HTML5"
)
url =
URL
(fileURLWithPath:path!)
request =
URLRequest
(url:url)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,不占用顶端时间条)
frame =
CGRect
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,width:
UIScreen
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
height:
.main.bounds.height)
theWebView:
WKWebView
=
(frame:frame)
//禁用页面在最顶端时下拉拖动效果
theWebView.scrollView.bounces =
false
//加载页面
theWebView.load(request)
self
.view.addSubview(theWebView)
}
didReceiveMemoryWarning() {
.didReceiveMemoryWarning()
}
}
|
3，swift代码与页面js互相调用（使用WKWebView）
下面通过一个简单样例演示js与原生代码如何进行相互调用以及参数传递。当点击一个商品图片时，会弹出一个iOS的消息框。当用户选择确定后，又会调用页面js方法，把商品添加到购物车里面。
--- Swift代码 ViewController.swift ---
| UIKit
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(249,
WKScriptMessageHandler
var
?
viewDidLoad() {
.viewDidLoad()
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(249,
)
(fileURLWithPath:path!)
(url:url)
//创建供js调用的接口
theConfiguration =
WKWebViewConfiguration
()
theConfiguration.userContentController.add(
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,name:
"interOp"
)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(249,不占用顶端时间条)
frame =
CGRect
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,width:
UIScreen
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
.main.bounds.height)
theWebView =
(frame:frame,configuration: theConfiguration)
//禁用页面在最顶端时下拉拖动效果
theWebView!.scrollView.bounces =
false
//加载页面
theWebView!.load(request)
.view.addSubview(theWebView!)
}
//响应处理js那边的调用
userContentController(_ userContentController:
WKUserContentController
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
didReceive message:
WKScriptMessage
) {
print
(message.body)
sentData = message.body
as
!
Dictionary
<
String
>
//判断是确认添加购物车操作
if
(sentData[
"method"
] ==
"addToCarCheck"
){
//获取商品名称
itemName = sentData[
"name"
]!
alertController =
UIAlertController
(title:
"系统提示"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
message:
"确定把\(itemName)添加到购物车吗？"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
preferredStyle: .alert)
cancelAction =
UIAlertAction
"取消"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,style: .cancel,handler:
nil
)
okAction =
"确定"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,style: .
default
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,handler: {
action
in
(
"点击了确定"
)
//调用页面里加入购物车js方法
.theWebView!.evaluateJavaScript(
"addToCar('\(itemName)')"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
completionHandler:
)
})
alertController.addAction(cancelAction)
alertController.addAction(okAction)
.present(alertController,animated:
true
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,completion:
)
}
}
didReceiveMemoryWarning() {
.didReceiveMemoryWarning()
}
}
|
--- html页面 index.html（这里只展示主要js代码，还用到了jQuery） ---
<script>
$(
function
() {
//点击商品添加到购物车
$(
".goodsItem"
).click(
() {
var
itemName = $(
this
).children(
"img"
)[0].alt;
message = {
"method"
:
"addToCarCheck"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
"name"
:itemName};
window.webkit.messageHandlers.interOp.postMessage(message);
});
});
//添加到购物车
addToCar(itemName){
//这里只是简单的给数量+1,用来演示
num = parseInt($(
"#cartNums"
).text());
).text(num+1);
}
</script>
|
源码下载：
HTML5.zip（2015-09-22 Swift2）
hangge_876.zip（2016-10-15 Swift3 最新版）
原文出自： www.hangge.com 转载请保留原文链接： http://www.hangge.com/blog/cache/detail_876.html