Swift - HTML5

2023-08-02 原文

最近越来越流行使用HTML5进行跨平台应用开发，先不说运行效率如何。从人力成本来说，只要写一套html页面就可以打包发布到安卓和iOS等多个平台，确实会省下不少时间和人力（这个领导最喜欢了）。

下面简单介绍下如何把HTML5编写的页面编译成iOS应用，以及如何让页面与Swift代码进行交互。

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 = 
          NSBundle 
          .mainBundle().pathForResource( 
          "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 = 
          NSURL 
          (fileURLWithPath:path!) 
         
request = 
          NSURLRequest 
          ( 
          URL 
          :url) 
         
          //将浏览器视图全屏(在内容区域全屏,不占用顶端时间条) 
         
theWebView: 
          UIWebView 
          = 
          (frame: 
          UIScreen 
          .mainScreen().applicationFrame) 
         
//let theWebView:WKWebView = WKWebView(frame:UIScreen.mainScreen().applicationFrame) 
         
//禁用页面在最顶端时下拉拖动效果 
         
theWebView.scrollView.bounces = 
          false 
         
//加载页面 
         
theWebView.loadRequest(request) 
         
self 
          .view.addSubview(theWebView) 
         
} 
         
didReceiveMemoryWarning() { 
         
.didReceiveMemoryWarning() 
         
} 
         
          }

（2）下面是使用WKWebView的样例：

 
         import 
         UIKit 
        
WebKit 
        
class 
         ViewController 
         : 
         UIViewController 
         { 
        
         var 
         theWebView: 
         WKWebView 
         ? 
        
override 
         func 
         viewDidLoad() { 
        
super 
         .viewDidLoad() 
        
.viewDidLoad() 
        
let 
         path = 
         NSBundle 
         .mainBundle().pathForResource( 
         "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 = 
         NSURL 
         (fileURLWithPath: path!) 
        
request = 
         NSURLRequest 
         ( 
         URL 
         : url) 
        
theWebView = 
         (frame: 
         UIScreen 
         .mainScreen().bounds) 
        
theWebView!.loadRequest(request) 
        
self 
         .view.addSubview(theWebView!) 
        
} 
        
didReceiveMemoryWarning() { 
        
.didReceiveMemoryWarning() 
        
} 
        
         }

3，swift代码与页面js互相调用（使用WKWebView）
下面通过一个简单样例演示js与原生代码如何进行相互调用以及参数传递。当点击一个商品图片时，会弹出一个iOS的消息框。当用户选择确定后，又会调用页面js方法，把商品添加到购物车里面。

--- Swift代码 ViewController.swift ---

 
         25 
        
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
         33 
       
         34 
       
         35 
       
         36 
       
         37 
       
         38 
       
         39 
       
         40 
       
         41 
       
         42 
       
         43 
       
         44 
       
         45 
       
         46 
       
         47 
       
         48 
       
         49 
       
         50 
       
         51 
       
         52 
       
         53 
       
         54 
       
         55 
       
         56 
       
         57 
       
         58 
       
      import 
         UIKitottom: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 
         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, 
        
) 
        
url = 
         NSURL 
         (fileURLWithPath: path!) 
        
: url) 
        
         //创建供js调用的接口 
        
theConfiguration = 
         WKWebViewConfiguration 
         () 
        
theConfiguration.userContentController.addScriptMessageHandler( 
         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" 
         ) 
        
(frame: 
         .view.frame, 
        
configuration: theConfiguration) 
        
theWebView!.loadRequest(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, 
        
didReceiveScriptMessage message: 
         WKScriptMessage 
         ) { 
        
sentData = message.body 
         as 
         ! 
         NSDictionary 
        
//判断是确认添加购物车操作 
        
if 
         (sentData[ 
         "method" 
         ] 
         ? 
         String 
         == 
         "addToCarCheck" 
         ){ 
        
//获取商品名称 
        
itemName = sentData[ 
         "name" 
         String 
        
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: 
         UIAlertControllerStyle 
         . 
         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: 
         UIAlertActionStyle 
         Cancel 
         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: 
         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: 
         UIAlertActionStyle 
         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 
        
         print 
         ( 
         "点击了确定" 
         ) 
        
//调用页面里加入购物车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) 
        
.presentViewController(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） ---

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

原文出自： www.hangge.com 转载请保留原文链接： http://www.hangge.com/blog/cache/detail_876.html

Swift - HTML5的更多相关文章

使用HTML5做的导航条详细步骤

这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
详解HTML5中的picture元素响应式处理图片

这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5利用canvas实现颜色容差抠图功能

这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
HTML5拖拽功能实现的拼图游戏

本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
HTML5实现直播间评论滚动效果的代码

这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
用canvas做一个DVD待机动画的实现代码

这篇文章主要介绍了用canvas做一个DVD待机动画的实现代码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用Html5多媒体实现微信语音功能

这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下
HTML5 播放 RTSP 视频的实例代码

目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码，需要的朋友参考下吧
html5 拖拽及用 js 实现拖拽功能的示例代码

这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
HTML5自定义视频播放器源码

这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

随机推荐

Swift UITextField,UITextView,UISegmentedControl,UISwitch

下面我们通过一个demo来简单的实现下这些控件的功能.首先,我们拖将这几个控件拖到storyboard,并关联上相应的属性和动作.如图:关联上属性和动作后,看看实现的代码:
swift UISlider,UIStepper

我们用两个label来显示slider和stepper的值.再用张图片来显示改变stepper值的效果.首先,这三个控件需要全局变量声明如下然后,我们对所有的控件做个简单的布局:最后,当slider的值改变时,我们用一个label来显示值的变化,同样,用另一个label来显示stepper值的变化,并改变图片的大小:实现效果如下:
preferredFontForTextStyle字体设置之更改

即：
Swift没有异常处理，遇到功能性错误怎么办？

本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至dio@foxmail.com举报，一经查实，本站将立刻删除。
字典实战和UIKit初探

ios中数组和字典的应用Applicationschedule类别子项类别名称优先级数据包contactsentertainment接触UIKit学习用Swift调用CocoaTouchimportUIKitletcolors=[]varbackView=UIView(frame:CGRectMake(0.0,0.0,320.0,CGFloat(colors.count*50)))backView
swift语言IOS8开发战记21 Core Data2

上一话中我们简单地介绍了一些coredata的基本知识，这一话我们通过编程来实现coredata的使用。还记得我们在coredata中定义的那个Model么，上面这段代码会加载这个Model。定义完方法之后，我们对coredata的准备都已经完成了。最后强调一点，coredata并不是数据库，它只是一个框架，协助我们进行数据库操作，它并不关心我们把数据存到哪里。
swift语言IOS8开发战记22 Core Data3

上一话我们定义了与coredata有关的变量和方法，做足了准备工作，这一话我们来试试能不能成功。首先打开上一话中生成的Info类，在其中引用头文件的地方添加一个@objc，不然后面会报错，我也不知道为什么。
swift实战小程序1天气预报

在有一定swift基础的情况下，让我们来做一些小程序练练手，今天来试试做一个简单地天气预报。然后在btnpressed方法中依旧增加loadWeather方法.在loadWeather方法中加上信息的显示语句：运行一下看看效果，如图：虽然显示出来了，但是我们的text是可编辑状态的，在storyboard中勾选Editable，再次运行：大功告成，而且现在每次单击按钮，就会重新请求天气情况，大家也来试试吧。
【iOS学习01】swift ? and ! 的学习

如果不初始化就会报错。
swift语言IOS8开发战记23 Core Data4

接着我们需要把我们的Rest类变成一个被coredata管理的类，点开Rest类，作如下修改：关键字@NSManaged的作用是与实体中对应的属性通信，BinaryData对应的类型是NSData，CoreData没有布尔属性，只能用0和1来区分。进行如下操作，输入类名：建立好之后因为我们之前写的代码有些地方并不适用于coredata，所以编译器会报错，现在来一一解决。