ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网络编程 >> IOS开发 >> iOS 与 JS 交互手册 - JavaScriptCore

iOS 与 JS 交互手册 - JavaScriptCore(1/2)

来源:网络整理     时间:2018-10-25     关键词:

本篇文章主要介绍了" iOS 与 JS 交互手册 - JavaScriptCore",主要涉及到方面的内容,对于IOS开发感兴趣的同学可以参考一下: 在前端快速发展的今天,JavaScript 在移动端的应用也越来越广泛,作为 iOS 开发者来说,与 JavaScript 进行交互也是不大不小的一个方面,尤其...

在前端快速发展的今天,JavaScript 在移动端的应用也越来越广泛,作为 iOS 开发者来说,与 JavaScript 进行交互也是不大不小的一个方面,尤其是一些 web 内嵌页,UIWebView 和 WKWebView 对 JavaScript 语言来说就像一个黑盒,出现问题使用 Objective-C 和 Swift 很难进行调试。

我最近就遇到一个这方面的问题,在各种浏览器和 Android 上都没问题,偏偏在 UIWebView 里面有一个 Vue 的组件数据绑定异常,和前端同事搞了一上午,排查过程就不多说了,处理结果就是换了一种 Vue 数据绑定的写法,这个 Bug 的形成原因和最终解决方案对我而言简直就像玄学了,所以本文也不是要讨论这个,当然有了解的朋友希望可以留言给我讲解一下。

这个 Bug 是这样的,一个顶部 Tabs,比如说 5 个,默认打开第一个页面,点击 Tabs 状态刷新实现切换。

第一个页面有一个 Vue 组件,称为 title,正确的值是 138XXX,初始页面正常,切换页面后第 2 -5 的 title 显示的全部是 138XXX+正确的值。

然后切换回 1 也就是初始页面,显示的值成了 138XXX138XXX。

最终解决的办法是将

查了一下区别就是单向绑定和双向绑定,但是 title 这个值没有被修改过。

在排查过程中,前端同事不能通过 Chrome 之类的工具调试,我这边也不能随心所欲的拿到 JavaScript 的方法和变量帮他调试,所以只能猜测原因一点一点改内嵌页的代码,非常麻烦。所以我整理了一下 JavaScriptCore 使用方法,水了这篇文章。

经 @lsvih 同学指点,safari > develop > xxx iPhone > inspect 可以很方便的调试 WebView,粗略看了一下,基本和 Chrome 差不多,对前端开发者非常友好,是我孤陋寡闻了,在此感谢!

当然,作为一个有追求的 iOSer,学习和 JavaScript 交互自然不会单单是为了成为前端控制台,所以下面的内容还是有些用处的。

本文涉及讲解的地方不多,注释挺详细的,直接上代码,适合作为手册使用。

属性的交互

// 创建 js 运行环境
let context = JSContext()!
// 捕获运行异常
context.exceptionHandler = { (js, exception) in
    print(exception!.toObject())
}
// 执行 js 代码
let value = context.evaluateScript("2 + 3")!
print(value.toObject()) // 5
// 定义 js 变量
context.evaluateScript("var array = [1, 2 ,3]")
// 获取 js 变量
let array = context.objectForKeyedSubscript("array")!
print(array// 1,2,3
// 判断 jsvalue 类型
if array.isArray {
    print("array 是数组"// array 是数组
}
else if array.isObject {
    print("array 是对象")
}
else if array.isString {
    print("array 是字符串")
}
else if array.isUndefined {
    print("array 未定义")
}
// 获取变量属性
let arrayLenght = array.objectForKeyedSubscript("length")!
print(arrayLenght.toInt32()) // 3
let arrayLenght2 = array.forProperty("length")
print(arrayLenght.toInt32()) // 3
// 获取 js 数组中的元素
// js 数组存取越界时会自动扩容数组长度,不会崩溃,但同时获取的元素有可能是 undefined 或者是 null
print(array.atIndex(1)) // 2
print(array.objectAtIndexedSubscript(2)) // 3
print(array.objectAtIndexedSubscript(3)) // undefined
// 向 js 数组插入元素
array.setObject("this", atIndexedSubscript: 4// 1,2,3,,this
array.setValue("js", at: 6// 1,2,3,,this,,js
array.setObject("is", atIndexedSubscript: 5// 1,2,3,,this,is,js
// jsvalue 转数组
var arr = array.toArray()!
arr[3] = "swift"
// swift 数组转 jsvalue
let jsArr = JSValue(object: arr, in: context)!
// swift 数组传入 js
context.setObject(jsArr, forKeyedSubscript: "arr" as (NSCopying & NSObjectProtocol)!)
let element = context.evaluateScript("arr[2]")!
print(element) // 3

方法调用和传参

// 创建 js 运行环境
let context = JSContext()!
/************************* swift 调用 js 方法 *****************************/
// 定义 js run 方法
let jsRunCode = """
var run = function (animal) {
  var str = animal + '正在跑'
  console.log(str)
  return str
}
"""

// 在运行环境中插入 js 方法
context.evaluateScript(jsRunCode)
// 获取 run 方法
let runFunc = context.objectForKeyedSubscript("run")!
// swift 中执行 run 方法
let result1 = runFunc.call(withArguments: ["猪"])!
print(result1) //猪正在跑
// js中执行 run 方法
let result2 = context.evaluateScript("run('牛')")!
print(result2) //牛正在跑
/************************* js 调用 swift block *****************************/
// 闭包创建 js 对象
let person = {(name: String, age: Int) -> JSValue in
    let obj = JSValue(newObjectIn: context)!
    obj.setObject(name, forKeyedSubscript: "name" as NSCopying & NSObjectProtocol)
    obj.setValue(age, forProperty: "age")
    return obj
}
// 写入 js 对象
context.setObject(person("max"18), forKeyedSubscript: "person" as NSCopying & NSObjectProtocol)
// 验证写入成功
let blockCode = """
var growUp = function(person) {
    person.age += 1
    return person
}
var type = typeof person
var result = growUp(person)
"""

context.evaluateScript(blockCode)
let type = context.evaluateScript("type")!
let result = context.evaluateScript("result")!
print(type) // object
print("name = \(result.objectForKeyedSubscript("name")) and age =  \(result.forProperty("age"))" ) // name = Optional(max) and age =  Optional(19)
/************************* js 调用 swift 方法 *****************************/
// 定义 swift 要响应的方法
func swiftResponser(animal: String) -> String {
    return animal + "正在飞"
}
// 定义要执行的 js 方法,及被调起的 swift 方法
let jsFlyCode = """
function fly(animal){
return swiftResponser(animal)
}
"""

context.evaluateScript(jsFlyCode)
// 向 js 传入 swift 方法
let block: @convention(block) (JSValue) -> String = { animal in
    return swiftResponser(animal: animal.toString()!)
}
let funcName = "swiftResponser" as (NSCopying & NSObjectProtocol)!
context.setObject(unsafeBitCast(block, to: AnyObject.self), forKeyedSubscript: funcName)
// 在 js 中执行 swift 方法
let result3 = context.evaluateScript("fly('鸟')")!
print(result3) //鸟正在飞

类的交互

相关图片

相关文章