Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用)

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看281 回复回复2 收藏收藏1 分享淘帖 转播转播 分享分享 微信
查看: 281|回复: 2
收起左侧

Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用)

[复制链接]
瑶池 发表于 2016-9-21 08:09:27 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

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

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

使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 1

Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) - 敏捷大拇指 - 使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 1





1、使用UIWebView还是WKWebView来加载HTML页面

原来我们一直使用UIWebView来加载web页面。从iOS8起,苹果提供了WKWebView用来代替UIWebView。

虽然WKWebView不支持缓存和NSURLProtocol 拦截了,但其加载速度比UIWebView提升差不多一倍的, 内存使用上面反而还少了一半。同时也增加了加载进度条属性,而不像原来要使用假的进度条。原生代码与页面js互相调用也更加方便。  

所有在缓存要求不高的情况下,建议使用WKWebView,用户体验也会更好。




2、使用UIWebView和WKWebView加载HTML页面

我们可以整个应用都使用HTML5来编写,或者只有某几个页面使用HTML。

先把HTML5的页面导入到项目中来,然后再使用UIWebView或WKWebView加载显示。(除了导入到本地工程里,把html页面放在服务器上远程加载也是可以的)

使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 2

Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) - 敏捷大拇指 - 使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 2


(注意:添加文件的时候有两种方式:“Create groups”和“Create folder references”。如果你的HTML页面有层次结构,比如CSS、JS、图片都放在各自的子文件夹中。要选择后面那个方式“Create folder references”。如果选第一个,虽然在Xcode组织树看来都是好的,但实际所有加入到项目的文件都会在mainBundle根路径下,这样文件引用就会出问题。)

使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 3

Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) - 敏捷大拇指 - 使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 3




2.1、下面是使用UIWebView的样例:

[Swift] 纯文本查看 复制代码
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.2、下面是使用WKWebView的样例:

[Swift] 纯文本查看 复制代码
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方法,把商品添加到购物车里面。

使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 4

Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) - 敏捷大拇指 - 使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用) 4




3.1、Swift代码 ViewController.swift

[Swift] 纯文本查看 复制代码
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()
    }
}




3.2、HTML页面 index.html(这里只展示主要JS代码,还用到了jQuery)

[HTML] 纯文本查看 复制代码
<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>





4、源代码下载:

Swift全栈:使用HTML5进行iOS Swift开发(将HTML5打包成iOS应用).zip (2.23 MB, 下载次数: 0)

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

不是我教你诈 发表于 2016-9-22 01:40:49 | 显示全部楼层
不错。果断收藏!
 楼主| 瑶池 发表于 2016-9-22 02:59:33 | 显示全部楼层

喜欢就转发分享推荐给朋友啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
关闭

站长推荐 上一条 /3 下一条

热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表