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

時間  2021-08-12
標籤 前端 react git github web apache 編程 小程序 微信小程序 react-native 欄目 無線 简体版
原文   原文鏈接

Write once, run anywhere.前端

引言

「一次編寫，處處運行」，這是 SUN 公司用來展現 Java 語言跨平臺特性的 slogan，它意味着 Java 能夠在任何平臺上進行開發，編譯後就能夠在任何安裝有 Java 虛擬機（JVM）的設備上運行。react

美中不足的是，Java 虛擬機在各類操做系統（Windows, Linux, macOS, ...）上有多種不一樣的實現，致使 Java 應用程序在不一樣的虛擬機和操做系統上執行時有微妙的差異，所以它可能須要在許多平臺上進行充分地測試才能確保正確性和穩定性，這造就了一個坊間笑話：「一次編譯，處處調試」（Write Once, Debug Everywhere）—— 摘自維基百科git

最近這兩年，在移動端各類跨平臺的開發方案如雨後春筍般涌現，一方面是由於隨着移動互聯網的普及和快速發展，移動終端設備的軟硬件、操做系統、開發工具鏈和技術社區等日趨成熟完善；另外一方面，近幾年傳統 PC 端的技術、資源也逐步遷移到移動端上來，你們都想造輪子，而後「一統天下」。github

「跨平臺」，是每個追求新技術的開發者的嚮往，同時也是守舊者的噩夢，由於它們都想革 Android 和 iOS 原生開發的命。web

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

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 則有不少功能沒法實現，雖然其動畫效果體驗差強人意，但跟原生比仍是有些差距。react-native

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）的技術。

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 活躍，資料和開源項目也相對較少。

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? 讓時間去決定吧...》

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 的前因後果和發展歷程，值得閱讀。

小程序

像微信這種月活用戶超過 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 來渲染的。

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

支付寶後來也上線了本身的小程序平臺：

由於微信或支付寶均可以在 Android 和 iOS 上運行，因此某種意義上，咱們也能夠把小程序理解爲是一種跨平臺開發。

快應用

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

快應用使用前端技術棧開發，原生渲染，同時具有 HTML 5 頁面和原生應用的雙重優勢。用戶無需下載安裝，即點即用，享受原生應用的性能體驗。快應用框架深度集成進各廠商手機系統中，能夠在操做系統層面實現用戶需求與應用服務間的無縫鏈接，提高用戶的使用體驗和應用服務的轉化效率，同時支持生成桌面圖標等留存能力。

咱們能夠發現，它與小程序相似，一樣使用前端技術棧與原生結合，也皆能夠「即點即用」。

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

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 的性能，同時開發便捷性也較好。

Cordova

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

上文提到，PhoneGap 早期由 Nitobi 公司開發，2011 年 10 月 4 日，Adobe 正式宣佈收購 Nitobi 軟件。PhoneGap 的代碼貢獻給了 Apache 軟件基金會，但保留了 PhoneGap 的商標全部權，並命名爲 Apache Callback。1.4 版發佈後，接着 Apache Callback 的名稱變動爲 Apache Cordova。—— 摘自維基百科

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

AppCan

國內 Hybrid 混合應用開發、移動平臺、移動雲平臺的領導者

筆者理解它就是中國版的 PhoneGap 😷，沒有調查就沒有發言權，請查閱官網獲取更多細節：

Xamarin

Xamarin 是微軟子公司提供的一個跨平臺開發軟件，經過使用 C＃/.NET 共享的代碼庫，開發人員能夠在 Xamarin 工具上，使用本地用戶界面編寫原生的 Android、iOS 和 Windows 應用程序，並跨多個平臺（包括 Windows 和 macOS）共享代碼。

使用 Xamarin 生成的應用從外觀上看與原生的同樣，由於它們就是原生的。

Xamarin 的官網和開發工具連接以下：

More...

《聊聊移動端跨平臺開發的各類技術》這篇文章裏把跨平臺開發技術分爲如下 4 大流派：

  • Web 流：也被稱爲 Hybrid 技術，它基於 Web 相關技術來實現界面及功能
  • 代碼轉換流：將某個語言轉成 Objective-C、Java 或 C#，而後使用不一樣平臺下的官方工具來開發
  • 編譯流：將某個語言編譯爲二進制文件，生成動態庫或打包成 apk/ipa/xap 文件
  • 虛擬機流：經過將某個語言的虛擬機移植到不一樣平臺上來運行

文章對這些方案進行技術分析，值得一讀，原文連接：

你還了解過哪些本文沒有提到的跨平臺方案？歡迎留言討論...

結語

本文簡單總結介紹了當下在移動端比較流行的幾種跨平臺開發方案，算是拋磚引玉吧，學習不是一蹴而就，對於每一項技術，都須要讀者花時間去深刻研究。

至於哪一種開發方案會成爲主流，咱們誰也不知道，只能讓時間來回答。

不過咱們大可沒必要對接踵而至的新技術感到焦慮不安，「打鐵還需自身硬」，咱們只有不斷提高自身的軟硬實力，纔不會在突飛猛進的技術更新迭代浪潮中被拋棄。Go for it!

參考鏈接

知識小集是一個團隊公衆號，主要定位在移動開發領域，分享移動開發技術，包括 iOS、Android、小程序、移動前端、React Native、weex 等。每週都會有 原創 文章分享，咱們的文章都會在公衆號首發。歡迎關注查看更多內容。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程