【轉】幾款移動跨平台App開發架構比較

標籤：css   外掛程式   www.   複雜   協助   裝置   項目結構   動畫   oom   

原文地址：https://www.cnblogs.com/songxingzheng/p/6482697.html

 

整理目前流行的跨平台WebApp開發技術的特點，僅供參考。

每個架構幾乎都包含以下特性：

• 使用 HTML5 + CSS + JavaScript 開發
• 跨平台重用代碼
• 豐富的UI庫
• 提供訪問裝置原生API的 JavaScript API 封裝器
• 解決原生開發中機型適配的難題
• 提供打包、部署的工具或服務
• 都需要學習自身封裝的 JavaScript API

篩選架構的要求：

• 效能：運行速度快
• UI：提供接近原生的UI體驗
• 外掛程式多，文檔豐富，開發效率高，容易擴充和維護
• 滿足業務需求

Cordova

Cordova 和 PhoneGap 的區別？
PhoneGap 是 Apache Cordova 的一個分發版，就像 Ubuntu 是 基於 Linux 的一個發行版，其程式碼程式庫也基於 Cordova，只是 PhoneGap 關聯了 Adobe 的一些額外的商業工具或服務，例如 PhoneGap Build 和 Adobe Shadow，來協助開發人員簡化開發。
此外，兩者提供的CLI工具、項目結構有差異，如：
Cordova 把 config.html 放在項目目錄下，而 PhoneGap 把它放在www 目錄下。

優點：

• 開源免費，社區生態成熟，外掛程式豐富
• 支援離線情境應用
• 開發工具選擇空間大

缺點:

• 只提供基礎訪問裝置的介面，需要自己搭配其他UI架構和JavaScript架構來搭配

UI架構

• Framework7
• MSUI | Github
• Famous
  為任意螢幕建立流暢、複雜的UI。
  免費和開源的JavaScript渲染引擎。著名引擎的獨特之處在於其JavaScript渲染引擎和3D物理引擎。
  官網 | Github | Hello World
  使用 Famo.us 建立高效能移動 UI

參考資料

Cordova中文文檔
建立第一個App（英文）
利用 Cordova+Famous 建立高效能跨平台APP
使用 Cordova 和 Vue.js 建立行動裝置 App

Ionic

官網地址：http://www.ionic.wang/ （有案例）
Ionic = Cordova + AngularJS + 一套樣式庫。

技術要求

• HTML + CSS + AngularJS

優點：

• 基於 Cordova
• 漂亮的介面，追求效能，專註原生，免費開源
• Angular JS MVVM 開發理念，資料雙向繫結
• 繼承自 Cordova，可以使用 Cordova 的外掛程式

缺點：

• Angular JS 學習路線陡峭
• Ionic 架構相比於原生的 Cordova 有所差異，Cordova 某些官方外掛程式可能不適用於Ionic

AppCan

通過AppCan IDE整合開發系統、雲端打包器等，快速開發出Android、iOS、WP平台上的行動裝置 App。

有兩種方式建立項目：IDE 和雲端，並且IDE可以同步到雲端。
免費使用者有100M空間、50個應用的限制。

優點

• 提供一體化解決方案，方便環境搭建、開發、調試、發布
• 架構內建UI包，包含常用控制項樣式
• 架構對UI、動畫渲染進行過最佳化，反應速度快
• 支援本地打包、雲端打包
• 基於密鑰的代碼加密

缺點

• 不開源，無法修改、最佳化底層代碼
• 分福士版和企業版，福士版免費，但功能有缺失，詳細見附錄
• 暫不支援自行開發控制項/，無法調取android原生功能
• 架構內建功能過多，導致應用安裝包偏大。
• 文檔偏少
• 部分系統無法使用IDE進行調試
• 只能在伺服器端發布，無法在本地發布
• IOS發布，需要將認證上傳至伺服器

參考：
Phonegap VS AppCan

使用案例：
我愛我家App 等

附錄：
企業版和福士版主要有以下幾點區別：

• 開發環境：
  企業版走獨立的開發環境與打包環境，企業版配備macmini打包伺服器，可以實現本地環境下建立項目，調試，打包；
  福士版不管是建立項目還是打包都需要依託於官方的伺服器，需要在連網的情況下進行，打包需要將源碼上傳到官方伺服器進行打包；
• 版本控制：企業版獨立控制引擎外掛程式的版本；
  福士版官方統一維護，官方換哪個版本開發人員就需要使用哪個版本，沒有選擇；
• 協同開發：企業版可通過macmini後台分配開發人員或者應用管理員帳號，可實現協同開發。
  福士版不能滿足協同開發
• 企業版有推送API介面
  福士版沒有
• 售後服務：企業版有獨立的售後團隊
  福士版的入口是論壇

Dcloud

特點：
雲編譯必須連網擷取AppId

優點：

• 國內廠商，中文文檔
• 對HTML5的效能、工具、能力都做了深入擴充，提供 IDE 、雲端服務等協助節省時間
• MUI 更貼近國內App使用習慣，提供模組的詳細例子，如登入，個人中心

缺點：

• 部分操作需要具備原生開發經驗，如離線打包App
• 新產品仍然有bug，還需改進

學習路線：

APICloud

優點：

• 不懂原生開發，不懂後台語言就可完成APP

缺點：

• 更新速度快，版本不夠穩定
• 面向不懂App開發人群，不適合程式員和科技公司，過度依賴會降低技術水平
• 涉嫌抄襲DCloud大量代碼

React Native

能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。
僅需學習一次，編寫任何平台。(Learn once, write anywhere)

缺點：

• 初次學習成本高
• 必須在不同平台下寫兩套代碼，依賴暴露的介面

總結

經過一番對比，感覺 Cordova 和 DCloud 更適合本次項目。

原因：
Cordova

• 生態成熟，有更多可搭配工具使用，開原始碼可自由定製；
• 前端架構： famous 或 Framework7

DCloud

• 國產中的開源，免費，效能不錯
• 提供雲端服務協助打包和部署、測試，降低一部分門檻，減少時間；
• 前端架構：MUI

其他架構不適合的原因：
APICloud

• 生態不好，名聲不好，面向群體不適合；

AppCan

• 閉源，商業化產品，免費版限制太多；

Ionic

• AngularJS 學習曲線陡峭，需要時間；

React Native

• 學習成本高

 

【轉】幾款移動跨平台App開發架構比較