淺談 2018 移動端跨平臺開發方案

知識小集發表於2018-05-25

Write once, run anywhere.

引言

“一次編寫，到處執行”，這是 SUN 公司用來展示 Java 語言跨平臺特性的 slogan，它意味著 Java 可以在任何平臺上進行開發，編譯後就可以在任何安裝有 Java 虛擬機器（JVM）的裝置上執行。

美中不足的是，Java 虛擬機器在各種作業系統（Windows, Linux, macOS, ...）上有多種不同的實現，導致 Java 應用程式在不同的虛擬機器和作業系統上執行時有微妙的差別，因此它可能需要在許多平臺上進行充分地測試才能確保正確性和穩定性，這造就了一個坊間笑話：“一次編譯，到處除錯”（Write Once, Debug Everywhere）—— 摘自維基百科

最近這兩年，在移動端各種跨平臺的開發方案如雨後春筍般湧現，一方面是因為隨著移動網際網路的普及和快速發展，移動終端裝置的軟硬體、作業系統、開發工具鏈和技術社群等日趨成熟完善；另一方面，近幾年傳統 PC 端的技術、資源也逐步遷移到移動端上來，大家都想造輪子，然後“一統天下”。

“跨平臺”，是每一個追求新技術的開發者的嚮往，同時也是守舊者的噩夢，因為它們都想革 Android 和 iOS 原生開發的命。

本文就站在 2018 年中這個時間節點，談一談目前都有哪些比較流行的跨平臺開發方案。

Web 前端 / HTML 5

我們知道， Web 前端網頁程式設計採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 用來定義頁面的結構，CSS 用來描述頁面的樣子，JS 通常用來處理頁面邏輯和使用者的互動。

隨著 2014 年 HTML 5 標準的釋出，前端領域這幾年的發展也異常火爆，Web 2.0 時代人們還津津樂道的 jQuery + Bootstrap 早已不滿足日益複雜的開發需求，Angular、Vue、React 等各種開發模式也在不斷地被創造，並迭代更新。

很多人覺得跨平臺不靠譜，但其實 Web 是歷史上最成功跨平臺開發的例子，它太成功了以至於大家都習以為常了，甚至忘了十幾年前還有 B/S 和 C/S 之爭呢。

Hybrid App

我們可以把純前端技術開發的 Web 網頁稱為 Web App，純原生技術開發的應用稱為 Native App，它們各有優缺點：純 Native 的迭代太慢，不能動態更新，且不能跨平臺，而純 Web 則有很多功能無法實現，雖然其動畫效果體驗差強人意，但跟原生比還是有些差距。

Hybrid App（混合應用）是指介於這兩者之間的 App，兼具“Native App 良好使用者互動體驗的優勢”和“Web App 跨平臺開發的優勢”。

Hybrid 的技術本質是在 WebView 的基礎上，與原生客戶端建立 JS Bridge 橋接，以達到 JS 呼叫 Native API 和 Native 執行 JS 方法的目的。

目前國內絕大部分大廠的 App 都有一套自己的 H5 與 Native 互動的方案，實現都大同小異。在這些 App 中一些基礎的功能模組和複雜的 UI 互動佈局通常用原生開發，而一些活動頁面或者受監管的、易變動的業務模組用 H5 來開發。

此外，下文即將介紹的 ~~React Native、Weex、~~ PhoneGap/Cordova、AppCan 等開發方案，也屬於 Hybrid App 這個範疇。

React Native

Build native mobile apps using JavaScript and React

React Native（簡稱 RN）是 Facebook 於 2015 年 4 月開源的跨平臺移動應用開發框架，是 Facebook 早先開源的 UI 框架 React 在原生移動應用平臺的衍生產物，目前支援 iOS 和 Android 兩大平臺。它使用 JavaScript 語言、以及類似於 HTML 的 JSX 和 CSS 來開發移動應用，因此熟悉 Web 前端開發的技術人員只需很少的學習即可快速上手。

React Native 經過 3 年多的發展，已經比較成熟，雖然至今沒有釋出 1.0 版本，但其社群很活躍，並且為 React Native 貢獻了大量的開原始碼。

國內很多公司也對 React Native 做了很多研究，並有相應的產出，如一些基於 React Native 發展出來的跨三端（Android/iOS/Web）的技術。

React Native 官網: facebook.github.io/react-nativ…
React Native 中文網: reactnative.cn/
GitHub 上有個開源庫 awesome-react-native，收集了大量 React Native 的開發資源，值得關注: github.com/jondot/awes…

Weex

A framework for building Mobile cross-platform UIs

2016 年 4 月 21 日，阿里巴巴在 Qcon 大會上釋出跨平臺移動開發工具 Weex，同年 12 月 15 日，阿里巴巴宣佈將移動開源專案 Weex 捐贈給 Apache 基金會開始孵化。

Weex 致力於使開發者能基於當代先進的 Web 開發技術，使用同一套程式碼來構建 Android、iOS 和 Web 應用。具體來講，在整合了 WeexSDK 之後，你可以使用 JavaScript 和流行的前端框架（如 Vue.js 和 Rax）來開發移動應用。

Weex 的另一個主要目標是跟進當代先進的 Web 開發和原生開發的技術，使生產力和效能共存。在開發 Weex 頁面就像開發普通網頁一樣；在渲染 Weex 頁面時和渲染原生頁面一樣。

我們可以發現，Weex 在很大程度上借鑑了 React Native 的思想和方式 ?，目標都是通過 JS 語法渲染 Native 頁面，但由於起步比較晚，社群沒有 React Native 活躍，資料和開源專案也相對較少。

Weex 官網: weex.incubator.apache.org/
Weex 中文網: weex.incubator.apache.org/cn/
GitHub 上的 Weex 資源收集專案 awesome-weex: github.com/joggerplus/…

Flutter

Build beautiful native apps in record time

Flutter 是 Google 在 2017 年的 Google I/O 上推出的移動端 UI 開發框架，可以快速在 iOS 和 Android 上構建高質量的原生使用者介面。同時也將是 Google 新系統 Fuchsia 下開發應用的主要工具。

2018 年 2 月底 Google 在 GitHub 上開源併發布了 Flutter 的第一個 Beta 版本，同時在 5 月份的 Google I/O 2018 上推出了 Beta 3 版本，我們公眾號之前發了一篇文章介紹了《Flutter Beta 3 新特性概覽》

這裡需要強調的是，Flutter 與 React Native/Weex 本質上是不同的，它並沒有使用 WebView、JavaScript 直譯器或者系統平臺自帶的原生控制元件，而是有自己專屬的一套 Widget，介面開發使用 Dart 語言，而底層渲染使用自身的高效能 C/C++ 引擎自繪。

By the way，關於 Flutter 和 React Native 的對比，前兩天我們公眾號也發了一篇文章《Flutter KO React Native? 讓時間去決定吧...》

Flutter 官網: flutter.io/
Flutter 中文網: flutterchina.club/
GitHub 上的 awesome-flutter 彙集了大量的 Flutter 資源: github.com/Solido/awes…
此外，知識小集團隊在 GitHub 上開了一個 repo，用於收集 Flutter 國內相關開發資源，歡迎關注並和我們一起完善：github.com/awesome-tip…

PWA

A new way to deliver amazing user experiences on the web.

Progressive Web App, 簡稱 PWA，是提升 Web App 的體驗的一種新方法，能給使用者帶來原生應用的體驗。

PWA 能做到原生應用的體驗不是靠某一項特定技術，而是經過應用一系列新技術進行改進，在安全、效能和體驗三個方面都有很大提升，PWA 本質上還是 Web App，併兼具了 Native App 的一些特性和優點，主要包括下面三點：

可靠 - 即使在不穩定的網路環境下，也能瞬間載入並展現
體驗 - 快速響應，並且有平滑的動畫響應使用者的操作
粘性 - 像裝置上的原生應用，具有沉浸式的使用者體驗，使用者可以新增到桌面

Android 和主流的瀏覽器都早已支援了 PWA 標準，終於在 iOS 11.3 和 macOS 10.13.4 上，蘋果的 Safari 上也支援了 PWA。筆者認為，這將迎來 PWA 的大爆發...

在《下一代 Web 應用模型 —— Progressive Web App》這篇文章中詳細介紹了 PWA 的來龍去脈和發展歷程，值得閱讀。

PWA 官網: developers.google.com/web/progres…
GitHub 上的 awesome-pwa: github.com/hemanth/awe…
同樣地，我們也在 GitHub 上開了一個 repo，用於收集 PWA 國內相關的開發資源，歡迎關注並和我們一起完善: github.com/awesome-tip…

小程式

像微信這種月活使用者超過 10 億的超級 App，已經足以跟作業系統抗衡了，我們把它稱為“微信系統”也不為過。如果能在微信生態中提供自己的服務，為“微信系統”開發 App 或許是很多開發者的嚮往。

微信小程式，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者在微信裡掃一掃或搜一下即可開啟應用。2017 年 1 月 9 日，張小龍在 2017 微信公開課 Pro 上正式釋出小程式，並在 2017 年底上線了小遊戲。

小程式開發本質上還是前端 HTML + CSS + JS 那一套邏輯，它基於 WebView 和微信自己定義的一套 JS/WXML/WXSS/JSON 來開發和渲染頁面。微信官方文件裡提到，小程式執行在三端：iOS、Android 和用於除錯的開發者工具，三端的指令碼執行環境以及用於渲染非原生元件的環境是各不相同的：

在 iOS 上，小程式的 JavaScript 程式碼是執行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環境有 iOS 8+；
在 Android 上，小程式的 JavaScript 程式碼是通過 X5 JSCore 來解析，是由 X5 基於 Mobile Chrome 53/57 核心來渲染的；
在開發工具上，小程式的 JavaScript 程式碼是執行在 nwjs 中，是由 Chrome Webview 來渲染的。

更多細節請查閱微信小程式官網：

mp.weixin.qq.com/cgi-bin/wx

支付寶後來也上線了自己的小程式平臺：

open.alipay.com/channel/min…

因為微信或支付寶都可以在 Android 和 iOS 上執行，所以某種意義上，我們也可以把小程式理解為是一種跨平臺開發。

快應用

2018 年 3 月 20 日，小米、中興、華為、金立、聯想、魅族、努比亞、OPPO、vivo、一加，共十家手機廠商在北京聯合召開快應用標準啟動釋出會，基於硬體平臺共同推出的新型應用生態。官方這麼描述：

快應用使用前端技術棧開發，原生渲染，同時具備 HTML 5 頁面和原生應用的雙重優點。使用者無需下載安裝，即點即用，享受原生應用的效能體驗。快應用框架深度整合進各廠商手機系統中，可以在作業系統層面實現使用者需求與應用服務間的無縫連線，提升使用者的使用體驗和應用服務的轉化效率，同時支援生成桌面圖示等留存能力。

我們可以發現，它與小程式類似，同樣使用前端技術棧與原生結合，也皆可以「即點即用」。

PS：快應用應該不能稱為是跨平臺開發方案，它只是國內手機廠商聯合主導的在安卓系統層面提供快捷服務，旨在與小程式抗衡；筆者並沒有接觸過快應用開發，更多細節請查閱快應用官網：

www.quickapp.cn/

PhoneGap

Build amazing mobile apps powered by open web tech.

PhoneGap 是一個採用 HTML，CSS 和 JavaScript 的技術，建立移動跨平臺應用程式的快速開發方案。原本由 Nitobi 公司開發，現在由 Adobe 擁有，它最早可以追溯到 2009 年，簡直跟移動原生開發的歷史一樣長。

它使開發者能夠在網頁中呼叫 iOS，Android，Windows Phone，Blackberry，Plam 等智慧手機的核心功能 —— 包括地理定位，加速器，聯絡人，聲音和振動等，此外 PhoneGap 擁有豐富的外掛可以呼叫。

業界很多主流的移動開發框架均源於 PhoneGap，較著名的有 Worklight、appMobi、WeX5 等，他們在融合 Phonegap 的基礎上，做了深度優化，具備接近 Native App 的效能，同時開發便捷性也較好。

PhoneGap 官網: phonegap.com/
PhoneGap 中文網: www.phonegap100.com/

Cordova

說到 PhoneGap，就肯定要提 Cordova，它們是一個東西的不同叫法。

上文提到，PhoneGap 早期由 Nitobi 公司開發，2011 年 10 月 4 日，Adobe 正式宣佈收購 Nitobi 軟體。PhoneGap 的程式碼貢獻給了 Apache 軟體基金會，但保留了 PhoneGap 的商標所有權，並命名為 Apache Callback。1.4 版釋出後，接著 Apache Callback 的名稱變更為 Apache Cordova。—— 摘自維基百科

筆者沒有研究過 PhoneGap/Cordova 相關開發，更多細節請查閱它們的官網。