跨平台技术总结与学习

从2010年左右，智能手机兴起。移动端开发开始活跃，移动互联网发展十余年，伴随着 Android、iOS 等智能手机的不断普及，移动端已逐步取代 PC 端，成为兵家必争之地。

为什么需要跨平台技术

• 原生开发成本高

众所周知，Android 应用采用 Java 或 Kotlin 编写，iOS 应用采用 Objective-C 或 Swift 编写，Web 端采用 HTML /CSS/JavaScript 编写。当需要开发支持多端的应用，每一端都需要独立研发、测试，一直到上线，以及后续的维护工作，工作量成倍增涨，势必延长研发周期。

• 原生开发技术不统一
• 不能做动态化

跨平台开发的优缺点

优点	缺点
节省人力、开发成本	性能低于原生
节省开发时间	用户体验低于原生
多端的一致性	包体积变大
易上手	跨平台框架自身bug、缺陷

Write Once, Run Anywhere

大厂使用的移动端框架

https://segmentfault.com/a/1190000022961111?utm_source=sf-similar-article

传统移动端开发

传统的app的开发就是指原生开发，需要ios工程师和安卓工程师各自进行，ios开发一份，安卓开发一份，安卓使用的是JAVA或者是Kotlin，ios使用的是Objective-C或者是SWIFT，这种开发模式也是最常见的开发模式，从智能手机诞生到今天，一直是最主流的开发模式。

Android	Ios
JAVA/;Kotlin	Objective-C / Swift

技术演进

webApp

Web App 是指基于 Web 的应用，运行于网络和标准浏览器上，相当于一个网页然后加一个 App 的壳。2014 年 HTML5 的标准规范制定完成，记得当时在网络上 Web App 大有取代 Native App 的气势，但 Web App 有以下缺点：

• 性能低，操作体验不好。
• 无法调用原生 API，很多功能无法实现。
• 依赖于网络，网速慢时体验很差，并且没有离线功能，优化不好的话会消耗流量
• 只能做为一个临时的入口，用户留存率低

WebApp PWA（Progressive Web App，渐进式增强 Web 应用）

PWA（Progressive Web App）意为渐进式增强 Web 应用，它不是一门技术，而是一个概念，他的意思就是使用多种技术来增强 Web App 的功能. 其核心为了增加webapp 的用户体验。 总结起来，PWA 的主要的能力就是离线、推送、桌面访问，可以说 PWA 赋予 Web App 原生的体验，但是 PWA 一直不温不火的原因主要有以下几点：

• 用 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 web 技术实现离线加载和缓存
• 实现了推送和通知
• 可以直接添加到手机的桌面上
• 使用 Service Worker 可以进行后台同步
• 浏览器对 PWA 技术支持还不够全面， 不是每一款游览器都能 100% 的支持 PWA
• 国内一些手机厂商对 Android 系统各种魔改，对 PWA 的兼容性不好，甚至不支持 PWA
• 平台的竞争，iOS 对 PWA 的支持力度远远低于 Android，所以 PWA 在 iOS 上的体验打了折扣。PWA 面对类似的微信小程序和快应用的竞争中，并没有优势。

Hybrid App

随着 Web 技术和移动设备的快速发展，Hybrid 技术已经成为一种最主流最常见的方案。一套好的 Hybrid架构方案 能让 App 既能拥有极致的体验和性能，同时也能拥有 Web技术 灵活的开发模式、跨平台能力以及热更新机制

• Hybrid App的本质，其实是在原生的 App 中，使用 WebView 作为容器直接承载 Web页面。因此，最核心的点就是 Native端 与 H5端 之间的双向通讯层，其实这里也可以理解为我们需要一套跨语言通讯方案，来完成 Native(Java/Objective-c/...) 与 JavaScript 的通讯。这个方案就是我们所说的 JSBridge，而实现的关键便是作为容器的 WebView，一切的原理都是基于 WebView 的机制。

Hybrid App 技术分析

• JSBridge 的接入为两个部分:

JS部分(bridge): 在JS环境中注入 bridge 的实现代码，包含了协议的拼装/发送/参数池/回调池等一些基础功能。 Native部分(SDK): 在客户端中 bridge 的功能映射代码，实现了URL拦截与解析/环境信息的注入/通用功能映射等功能。 JSBridge

Hybrid App 虽然开发效率高，可以跨平台，但是 Hybrid 体验比不上原生，对于需要快速试错、快速占领市场的团队来说，Hybrid App 是一个不错的选择，后期团队稳定下来后，最好还是要做体验更好的原生 APP 或者使用其他体验更好的跨平台技术。

原生与js交互

Android	Ios
JavaScriptCore	addJavascriptInterface

以iOS 为例

import JavaScriptCore 
// 最后在webViewDidFinishLoad代理中将我们定义的模型注入到网页中，暴露给JS
func webViewDidFinishLoad(webView: UIWebView) {
    
    
    self.jsContext = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as! JSContext
    let model = SwiftJavaScriptModel()
    model.controller = self
    model.jsContext = self.jsContext
    
    // 这一步是将SwiftJavaScriptModel模型注入到JS中，在JS就可以通过WebViewJavascriptBridge调用我们暴露的方法了。
    self.jsContext.setObject(model, forKeyedSubscript: "WebViewJavascriptBridge")
    
    // 注册到本地的Html页面中
    let url = NSBundle.mainBundle().URLForResource("demo", withExtension: "html")
    self.jsContext.evaluateScript(try? String(contentsOfURL: url!, encoding: NSUTF8StringEncoding))
    
    // 注册到网络Html页面 请设置允许Http请求
    //let url = "http://www.mayanlong.com";
    //let curUrl = self.webView.request?.URL?.absoluteString    //WebView当前访问页面的链接 可动态注册
    //self.jsContext.evaluateScript(try? String(contentsOfURL: NSURL(string: url)!, encoding: NSUTF8StringEncoding))

    self.jsContext.exceptionHandler = { (context, exception) in
        print("exception：", exception)
    }
}
// JS调用Swift方法
webViewJavascriptBridge.wxPay('TN20160526')
WebViewJavascriptBridge.wxShare({
            'title' : 'jerry博客',
            'description' : '一个专注于编程的技术博客',
            'url' : 'http://www.mayanlong.com'
        })

WebViewJavascriptBridge.showDialogMessage('马燕龙个人博客', '一个专注于编程的技术博客')

// Swift调用JS方法并传参
func callHandler(handleFuncName: String) {
    
    let jsHandlerFunc = self.jsContext?.objectForKeyedSubscript("\(handleFuncName)")
    let dict = ["name": "sean", "age": 18]
    jsHandlerFunc?.callWithArguments([dict])
}

[交互方法参考iOS]（https://www.jianshu.com/p/c11f9766f8d5）

Hybrid App 框架介绍

Hybrid 相关的技术有很多，比如 PhoneGap、Cordova、Ionic、VasSonic 等等。

• CorDova CorDova 全平台化的跨平台开发框架 目前 Cordova 支持的平台有 Android、iOS、Windows、Mac OS X、Electron。

• Ionic Ionic是一个开源的移动应用程序开发框架，它可以轻松地使用web技术构建高质量的跨平台的移动应用。可以让我们快速开发移动App、移动端WEB页面、微信公众平台应用，混合app web页面。

  Ionic最初只支持Angular，在2019年时推出的Ionic4正式版对 React 和 Vue 全面支持。目前最新版本是Ionic5。

Ionic的本质就是一个UI框架，如果把Cordova和Ionic作比较，其实是没有什么可比性的

• VasSonic VasSonic取名于世嘉游戏形象音速小子，是腾讯VAS(SNG增值产品部QQ会员)团队研发的一个轻量级的高性能的Hybrid框架，专注于提升页面首屏加载速度，完美支持静态直出页面和动态直出页面，兼容离线包等方案。

语言转换器

• Xamain Xamarin 是一个开放源代码平台，用于通过 .NET 构建适用于 iOS、Android 和 Windows 的新式高性能应用程序。 Xamarin 是一个抽象层，可管理共享代码与基础平台代码的通信。 Xamarin 在提供便利（如内存分配和垃圾回收）的托管环境中运行。

Xamarin 使开发人员可以跨平台共享其应用程序（平均 90%）。 此模式允许开发人员以一种语言编写所有业务逻辑（或重复使用现有应用程序代码），但在每个平台上实现本机性能和外观。

Xamarin 应用程序可以在电脑或 Mac 上进行编写并编译为本机应用程序包，如 Android 上的 .apk 文件， 或 iOS 上的 .ipa 文件。

原生渲染

• React Native

  • React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。 RN的优缺点
  • 优点：
  1. 复用了 React 的思想，有利于前端开发者涉足移动端。
  2. 能够利用 JavaScript 动态更新的特性，快速迭代。
  3. 相比于原生平台，开发速度更快，相比于 Hybrid 框架，性能更好。

  缺点： 不能做到完全屏蔽 iOS 端或 Android 的细节 由于 Objective-C 与 JavaScript 之间切换存在固定的时间开销，所以性能必定不及原生

• Weex Weex是alibaba于2015年推出的一款跨平台开发框架，其 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

• Dcloud uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者 编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 uniapp的特点 uni-app是双渲染引擎，在 App端内置了一个webview和一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。 在App端： 如果使用vue页面，则使用webview渲染 如果使用nvue页面(native vue的缩写)，则使用原生渲染 在App端：

如果使用vue页面，则使用webview渲染 如果使用nvue页面(native vue的缩写)，则使用原生渲染

自渲染

• Flutter Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。 关于编译模式 Flutter 特点：
  1. 高效率
  2. Flutter高一致性
  3. Flutter高性能

各个框架性能对比

回顾十年技术演变

回顾十年技术演变， 开发之路长漫漫。其中什么一直在变，什么一直没变值得深思。

参考

• weex 官网 https://weex.apache.org/guide/introduction.html#overview
• rax https://rax.js.org/
• Kraken https://openkraken.com/
• RN https://reactnative.dev/
• Flutter https://flutter.dev/