swift 原生给h5发消息_Swift - 使用HTML5进行iOS开发(将HTML5打包成iOS应用)
下面简单介绍下如何把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应用)相关推荐
- swift 原生给h5发消息_Swift-WKWebView与JavaScript的细节,H5页面跳转原生界面
大家(也包括我)要学会 明白一件事情(注意断句,哈哈).优秀的程序猿会将问题简单化. 世界上有10种人,一种是先把问题复杂化,然后在一点点的做减法:另一种是先把问题简单化,然后在慢慢的做加法:(好了该 ...
- h5 uniapp实现文件流,链接的下载,或者打包成压缩文件
需要下载以下几个包 axios npm i axios --save JSZip(压缩) npm install jszip --save file-saver(导出文件) npm install f ...
- uniapp把H5打包成ios
ios没有全屏,通过设置引导页加大屏幕 webview的路由和H5要一一对应 页面跳转时传参uni.navigateTo要先编码参数再解码escape和unescape webview接收参数@onP ...
- 将uniapp打包成h5放在安卓webview中(解决uniapp引入第三方地图卡顿问题)
本来是使用uniapp进行开发,然后打包成安卓软件的,因为是用了地图模块(基于天地图),因为uniapp框架的限制,只能使用webview组件引入地图文件,然后出现一个问题,发现地图在浏览器中打开很流 ...
- iOS开发系列--通知与消息机制
http://www.cocoachina.com/ios/20150318/11364.html 概述 在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户感兴趣 ...
- 最简单最快捷发将网站打包成webApp
将网站打包成webApp 前言 将LIEFox打包成APP这个灵感,也多亏了某数字1,他们也推出了一个APP,说具有VIP免权限的功能,就信了他的邪,发现下载后,和网页版的没啥区别,要收费还是要收费, ...
- [共享]iOS开发系列--Swift语言
2019独角兽企业重金招聘Python工程师标准>>> iOS开发系列--Swift语言 概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服 ...
- iOS开发系列--Swift语言
概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...
- php如何制定跳转到app原生页面,js实现界面向原生界面发消息并跳转功能
本文实例为大家分享了js界面向原生界面发消息并跳转的具体代码,供大家参考,具体内容如下 步骤一 在idea中,打开rn项目下的./Android/app,这个过程需要一点儿时间,可能还需要下载grad ...
最新文章
- Python编程基础:第八节 判断语句If Statements
- 定义一个属性_CocosCreator脚本属性个性化定制——下拉列表属性、滑动条属性
- eBay Notification介绍
- Oracle Explain Plan,hint解释与示例
- DXUT框架剖析(5)
- Largest Submatrix SPOJ - MINSUB (单调栈)
- 微信小程序入门指南——程序员计算器设计(一)
- Solidity编程语言
- 离散数学---序偶,笛卡尔积,自反,闭包
- PG distinct与distinct on
- Primitives vs Objects
- 谈一谈单片机开发的几种调试方案
- 视频剪辑学习笔记(1)
- CPU中的寄存器和地址概念
- sse 指令xmm寄存器和内存互相复制的问题
- 字节跳动在Spark SQL上的核心优化实践
- 计算机技术与软件专业技术资格(水平)考试—— 软考中级 网络工程师笔记six
- adonis 开发 01
- python画e指数函数_python实现画出e指数函数的图像
- 【list】C++ ——实现链表反转逆序
热门文章
- java 获取当前月份减1_java String 日期 转成 Date, 月份减1
- python保存和加载数组
- 【python asyncio 运行报错】:raise RuntimeError(‘There is no current event loop in thread %r‘)
- python刷题+leetcode(第三部分)
- Python 大规模异步新闻爬虫、google翻译、百度翻译、有道翻译、百度指数
- 王爽 汇编语言第三版 第11章 标志寄存器
- Java加密与解密的艺术~DES实现
- mesos marathon mysql_Mesos和Marathon简介
- C++学习之路 | PTA乙级—— 1074 宇宙无敌加法器 (20 分)(精简)
- 江西省2019计算机二级报名日期,2020年3月江西计算机等级报名时间、报名入口【2019年12月18日-27日】...