Swift - 使用HTML5进行iOS开发(将HTML5打包成iOS应用)
原来我们一直使用UIWebView来加载web页面。从iOS8起,苹果提供了WKWebView用来代替UIWebView。
references”。如果你的html页面有层次结构,比如css,js,图片都放在各自的子文件夹中。要选择后面那个方式“Create
folder
references”。如果选第一个,虽然在Xcode组织树看来都是好的,但实际所有加入到项目的文件都会在mainBundle根路径下,这样文件
引用就会出问题。)
(1)下面是使用UIWebView的样例:
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
|
import UIKit import WebKit class ViewController : UIViewController { override func viewDidLoad() { super .viewDidLoad() let path = NSBundle .mainBundle().pathForResource( "index" , ofType: ".html" , inDirectory: "HTML5" ) let url = NSURL (fileURLWithPath:path!) let request = NSURLRequest ( URL :url) //将浏览器视图全屏(在内容区域全屏,不占用顶端时间条) let theWebView: UIWebView = UIWebView (frame: UIScreen .mainScreen().applicationFrame) //let theWebView:WKWebView = WKWebView(frame:UIScreen.mainScreen().applicationFrame) //禁用页面在最顶端时下拉拖动效果 theWebView.scrollView.bounces = false //加载页面 theWebView.loadRequest(request) self .view.addSubview(theWebView) } override func didReceiveMemoryWarning() { super .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
|
import UIKit import WebKit class ViewController : UIViewController { var theWebView: WKWebView ? override func viewDidLoad() { super .viewDidLoad() super .viewDidLoad() let path = NSBundle .mainBundle().pathForResource( "index" , ofType: "html" ,inDirectory: "HTML5" ) let url = NSURL (fileURLWithPath: path!) let request = NSURLRequest ( URL : url) theWebView = WKWebView (frame: UIScreen .mainScreen().bounds) theWebView!.loadRequest(request) self .view.addSubview(theWebView!) } override func didReceiveMemoryWarning() { super .didReceiveMemoryWarning() } } |
3,swift代码与页面js互相调用(使用WKWebView)
下面通过一个简单样例演示js与原生代码如何进行相互调用以及参数传递。当点击一个商品图片时,会弹出一个iOS的消息框。当用户选择确定后,又会调用页面js方法,把商品添加到购物车里面。
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
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 UIKit import WebKit class ViewController : UIViewController , WKScriptMessageHandler { var theWebView: WKWebView ? override func viewDidLoad() { super .viewDidLoad() let path = NSBundle .mainBundle().pathForResource( "index" , ofType: "html" ,inDirectory: "HTML5" ) let url = NSURL (fileURLWithPath: path!) let request = NSURLRequest ( URL : url) //创建供js调用的接口 let theConfiguration = WKWebViewConfiguration () theConfiguration.userContentController.addScriptMessageHandler( self , name: "interOp" ) theWebView = WKWebView (frame: self .view.frame, configuration: theConfiguration) theWebView!.loadRequest(request) self .view.addSubview(theWebView!) } //响应处理js那边的调用 func userContentController(userContentController: WKUserContentController , didReceiveScriptMessage message: WKScriptMessage ) { let sentData = message.body as ! NSDictionary //判断是确认添加购物车操作 if (sentData[ "method" ] as ? String == "addToCarCheck" ){ //获取商品名称 let itemName = sentData[ "name" ] as ! String let alertController = UIAlertController (title: "系统提示" , message: "确定把\(itemName)添加到购物车吗?" , preferredStyle: UIAlertControllerStyle . Alert ) let cancelAction = UIAlertAction (title: "取消" , style: UIAlertActionStyle . Cancel , handler: nil ) let okAction = UIAlertAction (title: "确定" , style: UIAlertActionStyle . Default , handler: { action in print ( "点击了确定" ) //调用页面里加入购物车js方法 self .theWebView!.evaluateJavaScript( "addToCar('\(itemName)')" , completionHandler: nil ) }) alertController.addAction(cancelAction) alertController.addAction(okAction) self .presentViewController(alertController, animated: true , completion: nil ) } } override func didReceiveMemoryWarning() { super .didReceiveMemoryWarning() } } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script> $( 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); } </script> |
源码下载:HTML5.zip
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_876.html
Swift - 使用HTML5进行iOS开发(将HTML5打包成iOS应用)的更多相关文章
- 李洪强iOS开发之零基础学习iOS开发】【02-C语言】01-概述
前面已经给大家介绍了iOS开发相关的一些基础知识,其实iOS开发就是开发iPhone\iPad上的软件,而要想开发一款软件,首先要学习程序设计语言.iOS开发需要学习的主要程序设计语言有:C语言.C+ ...
- iOS开发技巧 - Size Class与iOS 8多屏幕适配(一)
0. 背景: 在iOS开发中,Auto Layout(自动布局)能解决大部分的屏幕适配问题. 但是当iPhone 6和iPhone 6 Plus发布以后, Auto Layout已经不能解决复杂的屏幕 ...
- Chrome Apps将可以打包成iOS或Android应用
Chrome Apps 将可以在 iOS 和 Android 设备上独立运行了.开发者只要使用 Google今天 提供的工具集(toolchain)将自己的 Web App 打包,并将生成的应用上传到 ...
- 把H5打包成IOS APP其实可以很简单!签名?越狱?都不需要!
很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...
- [iOS]如何把App打包成ipa文件,然后App上架流程[利用Application Loader]
摘自:http://www.cnblogs.com/wangqi1221/p/5240281.html 在上一篇博客已经讲过上传项目了,但是有的时候,需要我们进行打包成ipa包到别的手机上跑(但是前提 ...
- Android开发把项目打包成apk
做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件--APK(Android Package),其后缀名为" ...
- MFC Activex 开发、ocx打包成cab、部署、测试、自动升级
小小抱怨下:也许是MFC现在用的人少的缘故.在国内和国外都基本上找不到什么全的资料.特别是ocx打包成Cab时的安装文件inf的编写方面,国内基本上是copy,抄的还一知半解.查找个资源真心的累啊.现 ...
- Android开发把项目打包成apk-(转)
做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件--APK(Android Package),其后缀名为" ...
- (转)Android开发把项目打包成apk
转:http://blog.csdn.net/luoyin22/article/details/7862742 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们 ...
随机推荐
- leetcode208 happynumber
19 is a happy number 12 + 92 = 82 82 + 22 = 68 62 + 82 = 100 12 + 02 + 02 = 1 class Solution {public ...
- 强大的Mockito测试框架(转)
1.自动生成Mock类在需要Mock的属性上标记@Mock注解,然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.i ...
- switch case ,while, do while,enum
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace C_编辑 ...
- HtmlAgilityPack 抓取页面的乱码处理
HtmlAgilityPack 抓取页面的乱码处理 用来解析 HTML 确实方便.不过直接读取网页时会出现乱码. 实际上,它是能正确读到有关字符集的信息,怎么会在输出时,没有取到正确内容. 因此,读两 ...
- Linux下Django开发学习(一)
一,环境配置: 环境:Ubuntu 14.04 LTS, Python 2.7, Django 1.8 安装Python : Ubuntu自带python2.7,不用安装 安装pip:sudo ap ...
- Win10玩魔兽争霸不能全屏显示的设置教程
Win10玩魔兽争霸不能全屏显示的设置教程: 1.右击桌面左下角的windows图标,显示图片内容,然后点击运行: 2.点击运行,有个输入框,输入regedit,点击确认: 3.显示win10注册表, ...
- IP数据包结构
Linux 网络编程——IP 数据报格式详解 http://www.linuxidc.com/Linux/2015-04/116149.htm
- Java字节码中的方法调用
invokestatic,用于static修饰的方法.任何时候调用的时候只需要类名+方法名即可,无需new.JVM直接将其映射到方法区,执行速度极快.当该方法需要参数的时候,invokestatic会 ...
- 【笨木头Lua专栏】基础补充08:协同程序之resume-yield间的数据返回
这次要介绍几个事实上非常easy,可是一定要小心的返回值规则. 笨木头花心贡献,哈?花心?不,是用心~ 转载请注明.原文地址: http://www.benmutou.com/archives/173 ...
- Android SurfaceView实战 带你玩转flabby bird (下)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43063331,本文出自:[张鸿洋的博客] 1.概述 在Android Surfa ...