1. 移动端跨平台技术原理
gibsonfeng@sng.tencent

2. WHY WE NEED IT
• 移动互联网时代，多端开发
– iOS 客户端
– Android 客户端
– 移动浏览器端
– 其他非主流移动平台，如 WP 等

3. WHY WE NEED IT
• 多端开发带来的问题
– 开发和维护成本成倍增加；
– 开发团队需要多次修复同样的缺陷；
– 针对某个平台报告的缺陷可能会被另一个平台忽视掉；
– 不同平台的 App 行为可能会有预料之外的细微差异；
– 性能优化成本高昂并且与平台相关。

4. 常见的跨平台技术概览
• web
– 也被称为 Hybird （混合模式）
• 代码转换
– 将一个平台的代码直接转成另一个平台的
• 编译
– 编译成二进制文件（中间代码），类似 java
• 虚拟机
– 通过将某个语言的虚拟机移植到不同平台上来运行

5. Hybird Web
• 典型案例：
– phonegap / cordova
– wechat
– mqq api
• pros & cons
– 技术门槛低，快速学习，快速开发
– 性能不佳，不适合重应用

6. 代码转换
• 典型案例
– java->objc (google inbox by j2objc )
– objc->java (MyAppConverter)
• pros & cons
– 代码转换在性能优化上比较难处理
– 转换后的代码调试也不方便

7. 编译
• 典型案例
– RoboVM ，可以将 Java 字节码编译为可在
iOS 下运行的机器码
– apportable 可以直接将 Swift/Objective-C 编
译为机器码
• 这种模式在游戏中应用较多

8. 虚拟机
• 典型案例
– NativeScript
– React Native
– cocos2d-xx, unity 3D
• 对比 hybird web
– hybird 相当于在 app 里面开一个浏览器
– react native 相当于在 app 里面开一个 js vm

9. Dropbox 的跨平台实现
• UI 使用平台原生，分别开发
• UI 无关（数据，网络，线程等），使用 C+
+ 实现共享库
• iOS 平台 objc 能很方便调用 C++
• Android 平台通过 NDK 使用 C++

10. Hybird Web in iOS 详解
• 最根本的： webview
– 所谓 webview ，实质是在原生 app 中打开一个内嵌浏
览器，具体到 iOS 平台就是使用 UIWebView 这个控件
。
• 最重要的： webview <=> app
– web=>app ， web 获得 app 原生的能力
– app=>web ， app 调用或获得 web 的反馈

11. Hybird Web in iOS 详解
• web 与 app 的双向通信，即 webview 的 js 和 app
的 objc 之间的桥接。
• 桥接的实现： JavascriptCore
– Apple 开放了一个叫做 JavascriptCore 的框架，此框架
最早在 OSX10.2 就存在，但到了 2013 年在 OSX10.9
上才发布其调用的 API ，而后又在 iOS7 上公
开， iOS6 上是私有 API ，可能不过审。

12. Hybird Web in iOS 详解
• JavascriptCore 提供了以下几个 API ：
– JSContext
– JSExport
– JSValue

13. Hybird Web in iOS 详解
• JSContext 是 JavascriptCore 的主入口；
• 它代表了 JS 的运行时环境；
• 在其中可以定义对象、方法等；
• 这些实体（对象、方法）的生命周期在 JSContext 被释放
的时候才结束。
• 可用指定的 JSVirtualMachine 来创建 JSContext ；
• 每个 JSVM 都会独立运行在一个线程上。

14. Hybird Web in iOS 详解
• 我们可用通过 JSContext 的 evaluateScript 方法
来定义我们的 JS 方法，而且是通过字符串定义代
码

15. Hybird Web in iOS 详解
• 正如上文所述， JSContext 代表了一个 JS 运行环境，
• 我们的示例代码，就是在这个单独创建的 JSContext 运行
环境的，
• 实际上 UIWebView 实例也有它自己的 JSContext 运行环
境，
• 为了修改 webview 上的内容，我们需要访问 UIWebView
的 JSContext 。

16. Hybird Web in iOS 详解
• 但 Apple 就是一个闷骚男，虽然已经公开了
JavascriptCore 的 API ，但又不提供直接访问
UIWebView’s JSContext 的方法。
• 幸好“ key-value” 把我们救了回来 :

17. Hybird Web in iOS 详解
• 然后，我们可以通过 JSValue 来获取 JSContext 中 js 方
法的引用和执行的结果：
• JavascriptCore 会自动转换 JSValue 的对象类型，
• 比如这里 isValidNumber 返回的 boolean ，
• 同时还支持 NSString, NSDate, NSDictionary, NSArray 等
。

18. Hybird Web in iOS 详解
• 另外，我们还可以增加异常捕捉

19. Hybird Web in iOS 详解
• 通过 JSExport 可以将 objc 的方法暴露给 JS
• addContact 这个方法是在 BNRContactAppJS 协议中声
明的， BNRContactAppJS 又源自于 JSExport ，
• 所以 addContact 方法将会暴露给 JS 环境，而其他方法则
对 JS 环境而言是隐藏的。

21. Hybird Web in iOS 总结
• 从 objc 调用 js ：
– JSContext 的 evaluateScriptf 方法
– JSValue 的 callWithArguments 方法
• 捕捉 JS 执行的异常；
• 从 WebView 实例获取 JSContext ；
• 通过 JSExport 将 objc 方法暴露给 js 调用。

22. Thanks