Cordova 框架：Ionic 與 Framework7

如今，Web 開發人員統治著世界。 JavaScript 可用於任何可以編程的地方。 在這些領域中，移動應用程序開發是最早的分支方式之一：大約十年前，PhoneGap 允許為 iOS 和 Android 安裝 HTML 和 JavaScript 應用程序。

從那時起，該技術起起落落：儘管易於開發，但這些應用程序顯然與原生應用程序有很大不同。 Vanilla HTML 和基於瀏覽器的 JavaScript 是針對瀏覽器的，它們無法完美地遷移到這個新領域。

時至今日，主要問題仍然是：

• 難以堅持原生設計和動畫
• 複雜的畫面過渡效果
• 觸摸事件處理
• 在大名單上的表現
• 定位固定元素
• 適應不同的屏幕尺寸
• 本機控件元素的位置（例如，iOS 狀態欄）
• 適配不同的手機瀏覽器

為什麼要為 Cordova 應用程序使用框架？

由於存在上述問題的應用程序，Cordova 技術經常被低估。 框架旨在抵消它們，並使 HTML 應用程序在設計和性能方面盡可能接近原生應用程序。

讓我們看幾個混合應用程序示例。 它們是由目前最成功的兩個框架（除了 Onsen UI）組成的，它們旨在促進 Web 開發人員在現代世界中的擴展：Framework7 和 Ionic。

關於離子框架

Ionic 由 Drifty Co. 於 2012 年開發，基於 Angular。 從那時起，它一直在積極開發中，獲得了大量投資和強大的開發者社區。 官方網站聲稱已經基於它開發了數百萬個應用程序。

在撰寫本文時，最新版本是基於 Angular 5 的 Ionic 3。Ionic 4 旨在實現與 Angular 的靈活性和獨立性，目前處於早期測試階段。

除了 UI 引擎、出色的組件庫和訪問本機設備功能的接口之外，Ionic 還提供了多種額外的功能、服務和實用程序。

離子 CLI

Ionic 的命令行界面用於交互式項目初始化（即嚮導）、生成頁面和組件以及運行允許您在旅途中構建應用程序並實時重新加載它們的開發服務器。 它還提供與 Ionic 雲服務的集成。

實驗室和 DevApp

Lab 是一個非常有用的小服務，可以讓你在 Ionic 開發者的瀏覽器中模仿不同平台上的應用程序的工作。 DevApp 可幫助您將應用程序快速部署到真實設備。

打包、部署和監控

Ionic 附帶了一系列 Web 服務，可以為測試人員和用戶簡化和加速構建、調試、測試和更新應用程序。

不過，Ionic 的計劃經常變化。 一些先前存在的服務——例如 Auth、Push、Analytics 和 View——被關閉，引起了訂閱者的強烈抗議。

創作者

這是 Ionic 用於開發功能界面的拖放式圖形編輯器。

關於Framework7

該框架由俄羅斯工作室 iDangero 於 2014 年開發。 最終，一位開發人員一直在從事該項目，其中不包括 GitHub 存儲庫的幾個小貢獻者。

最初，Framework7 由一組 UI 組件組成，採用當時最近發布的 iOS 7 的風格，因此得名。 後來，添加了一個 Android 主題，並且兩個主題都針對最新的 iOS 和 Material Design 進行了更新。

最近，該項目的開發步伐加快，它從一套組件擴展到一個成熟的移動應用程序框架，集成了流行的技術和工具。

Framework7 的支持和使用 Vue.js 的示例從 v1 開始就存在，v3 也支持 React。 這可能使該項目能夠與僅提供 Angular 和 TypeScript 的更流行的 Ionic 進行激烈競爭。

安裝和首次啟動

離子

要開始使用 Ionic，請使用 NPM 安裝它：

 npm install -g ionic

然後，為將來的應用程序選擇模板。 Ionic 官方網站提供了多個模板，或者您可以選擇一個空模板來從頭開始構建應用程序ionic start myApp blank 。

讓我們選擇一個簡單的設計。 執行以下命令：

 ionic start Todo tabs

當安裝程序詢問“您想將您的新應用程序與 Cordova 集成以針對原生 iOS 和 Android 嗎？”時，回答“是” 。 這將自動將應用程序與 Cordova 集成，並為在移動平台上的部署做好準備。

在下一步中，安裝程序將提供將我們連接到 Ionic Pro SDK。 現在回答“否”以保持示例簡單。

安裝附加的@ionic/lab包以獲得方便的調試 UI — iOS、Android 和 Windows 設備的瀏覽器模擬：

 cd Todo npm i --save-dev @ionic/lab

現在您可以在調試模式下啟動應用程序。 這允許您在 Web 瀏覽器中實時開發和調試應用程序：

 ionic lab

結果，您將獲得幾個有用的地址：

Ionic Lab 調試服務在端口 8200 上啟動。應用程序本身在端口 8100 上運行，來自 Ionic Lab 的Open fullscreen鏈接指向那裡。 運行 Ionic Lab 的瀏覽器窗口會自動打開。

此外，Ionic 提供本地網絡中的應用程序地址。 這非常有用，因為它允許您在移動設備瀏覽器中打開應用程序，只要設備在本地網絡中（例如，通過 Wi-Fi）。 此外，您可以使用添加到主屏幕按鈕以全屏模式重新打開應用程序。 這是在設備上測試應用程序的最快方法。

另一種方式是 Ionic DevApp 應用程序，它可以安裝在移動設備上，並通過本地網絡提供對應用程序的訪問。 它提供插件支持（Ionic Native）以訪問本機設備功能和顯示日誌。

框架7

F7 的開發工具不如 Ionic 先進，並且沒有記錄自動初始化 CLI。 但是，官方網站提供了幾個帶有模板項目的 GitHub 存儲庫，可以幫助您開始開發。

與 Ionic 中的Tabs模板類似，F7 提供了Tabbed Views ，但我們將使用一個功能更強大的模板，它將 Framework7 與 React 集成在一起。 在 v3 中添加了對 React 的支持。 為此，克隆模板存儲庫：

 git clone https://github.com/framework7io/framework7-template-react.git Todo

切換到項目文件夾，獲取依賴項，然後開始該過程：

 cd Todo npm install npm start

執行結果與 Ionic 類似：您獲得一個本地鏈接和一個網絡內的鏈接，以便從真實設備即時訪問：

現在您可以在瀏覽器中打開http://localhost:3000/ 。 Framework7 不包含內置的設備模擬器，所以讓我們使用 Chrome DevTools 的設備模式來獲得類似的結果：

如您所見，Framework7 與 Ionic 的相似之處在於它以 iOS 和 Material Design 作為其兩個標準主題。 根據平台選擇主題。

遺憾的是，與官方 React 模板中支持 Vue.js 的類似模板不同，Webpack 尚未實現，這使我們無法使用熱模塊替換來快速更新應用程序而無需重新加載頁面。 儘管如此，您仍然可以使用默認的實時重新加載功能，該功能會在您更改源代碼時重新加載頁面。

設置科爾多瓦

要使用 Cordova 在設備和模擬器上安裝應用程序，您需要下載並設置適用於 iOS 和 Android 的開發工具以及 Cordova CLI。 您可以在我們之前的文章和 Cordova 官方網站的 iOS 平台指南和 Android 平台指南部分閱讀更多相關信息。

離子

經驗表明，要成功解決大多數 Ionic 問題，基於瀏覽器的調試並偶爾在真實設備上進行測試就足夠了。

儘管您接受了 iOS 和 Android 的集成，並且 Ionic 在config.xml文件和resources文件夾中的資源中準備了所需的設置，但您仍然需要使用 Cordova 將兩個平台連接到應用程序：

 cordova platform add ios cordova platform add android

現在，您可以在“真實”模擬器中啟動 Cordova 應用程序，將其安裝在移動設備上，甚至將其發送到 App Store 和 Google Play。

如果通過 USB 連接，下一個命令會將應用程序安裝到您的 iOS 設備。 否則，應用程序將安裝在 iOS 模擬器上。

 cordova run ios

Xcode 命令行工具很可能會通知您需要設置開發人員證書。 您需要在 Xcode 中打開項目並執行所需的操作。 只需執行一次，之後您就可以使用 Cordova CLI 運行應用程序。

有時 iOS 模擬器不會自動啟動。 在這種情況下，請手動啟動它，例如通過 Spotlight。

Android 模擬器可以通過類似的方式啟動：

 cordova run android 

請注意， cordova run命令會啟動並安裝已編譯的應用程序，該應用程序不使用ionic serve / ionic lab服務器，因此 Live Reload 將無法工作。 要實時開發和調試應用程序，請使用本地網絡中的瀏覽器或安裝 Ionic DevApp 應用程序。

經驗表明，要成功解決大多數 Ionic 問題，基於瀏覽器的調試並偶爾在真實設備上進行測試就足夠了。

框架7

之前選擇的“React”Framework7 模板沒有為 Cordova 提供設置自動化，因此您需要手動添加平台。 在項目文件夾的cordova子文件夾中創建一個 Cordova 項目：

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

該模板基於 Create React App，因此要在 Cordova 環境中運行編譯後的項目，您需要添加"homepage": "." 設置為./package.json文件。 此文件可以在項目的根級別找到：

編譯 Framework7 項目並將結果復製到 Cordova 項目：

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

現在您可以在設備或模擬器上啟動應用程序：

 cd cordova/ cordova run ios 

你完成了！ 讓我們希望 Framework7 能夠趕上 Ionic 的開發標準和初始設置的便利性。

創建任務列表

離子

讓我們終於開始創建應用程序了！ 由於這是一個待辦事項應用程序，因此主頁（ src/pages/home/home.html文件）將包含能夠“標記已完成”和“添加新”的任務列表。

Ionic 為列表提供了組件<ion-list>和<ion-item> 。 首先，從<ion-content>元素中刪除padding屬性以使列表全屏顯示。 在列表中，使用<ion-label>元素放置文本並添加<ion-toggle>元素以標記已完成的任務。

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

返回運行 Ionic Lab 服務的瀏覽器選項卡。 該應用程序已自動更新：

偉大的！ 現在將任務數據移動到 JS 對象並使用 Angular 設置其 HTML 表示。 轉到src/pages/home/home.ts文件並創建HomePage類實例的 tasks 屬性：

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

現在您可以在 HTML 代碼中引用tasks數組。 使用*ngFor Angular 構造迭代地為每個數組元素創建列表元素。 代碼變小了：

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

剩下的就是在頁眉中添加用於創建新任務的按鈕。 為此，請使用<ion-navbar> 、 <ion-buttons> 、 <button>和<ion-icon>組件：

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

注意(click)="addTask()" Angular 構造。 正如你所猜到的，它將點擊處理程序添加到按鈕並為我們的組件調用addTask()方法。 讓我們實現這個方法以在點擊按鈕時打開任務名稱對話框窗口。

為此，您需要AlertController Ionic 組件。 要使用此組件，請導入其類型：

 import { AlertController } from 'ionic-angular';

並在頁面的構造函數參數列表中指定它：

 constructor(public alertCtrl: AlertController) { }

現在您可以在addTask()方法中調用它。 在控制器之後設置它。 您可以使用以下調用創建和顯示對話窗口：

 this.alertCtrl .create(/* options */) .present();

在options對像中指定消息頭、字段描述和兩個按鈕。 “確定”按鈕將向tasks數組添加一個新任務：

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

將元素添加到數組this.tasks後，組件將被重新構建，並且新任務將顯示在列表中。

完整的頁面代碼現在看起來像這樣：

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

在設備上重新安裝應用程序：

 cordova run ios

而已！ 沒那麼難，是嗎？ 現在讓我們嘗試對 Framework7 做同樣的事情。

框架7

Framework7 模板是為了展示所有的組件能力，所以只需要在src/components/App.jsx和src/routes.js文件中留下src/components/pages/HomePage.jsx頁面，清理其內容並刪除額外的代碼註釋。

現在創建任務列表。 Framework7 為此提供了<List simple-list>和<ListItem>組件。 要在其中放置任務完成開關，請添加<Toggle slot="after"/>組件。 請記住從framework7-react模塊中導入所有這些組件。 現在頁面代碼如下所示：

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

應用程序本身如下所示：

不錯的開始。 讓我們再次嘗試將靜態數據從 HTML 代碼中移出。 為此，請使用智能組件而不是我們擁有的無狀態組件。 從 React 導入Component抽像類：

 import React, { Component } from 'react';

並將任務數組寫入state變量實例：

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

真正的應用程序可能會使用更抽象的數據流——例如使用 Redux 或 MobX——但對於一個小例子，我們將保留內部組件狀態。

現在您可以使用 JSX 語法為數組中的每個任務迭代地創建列表元素：

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

剩下的就是添加帶有按鈕的標題以再次創建新任務。 <Navbar>元素已存在，因此將<Link iconOnly>添加到<NavRight>元素：

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

在 React 中，您通過使用onClick屬性並在其中設置回調指針來添加點擊處理程序。 實現處理程序以顯示任務名稱對話框。

Framework7 中的每個元素都可以通過this.$f7屬性訪問應用程序實例。 您可以通過這種方式使用dialog.prompt()方法。 在關閉對話框之前，調用 React 組件的setState()方法並將前一個數組的副本與新元素一起傳遞給它。 這將反應性地更新列表。

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

這是完整的組件代碼：

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

檢查結果：

剩下的就是重建並部署到設備：

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

完畢！

這兩個項目的最終代碼都可以在 GitHub 上找到：

• 離子待辦事項應用程序
• framework7-react-todo-app

結果

現在您已經看到了每個 Cordova 框架的完整教程。 Framework7 如何與 Ionic 相抗衡？

最初設定

由於其 CLI，Ionic 更容易安裝，而 F7 需要更多時間來選擇和設置模板或從頭開始逐步安裝。

組件多樣性

這兩個框架在兩個主題中都有一整套精心製作的標準組件：iOS 和 Material Design。 Ionic 還在 Windows 主題和巨大的用戶主題市場中提供了這些組件。

除了完全模仿原生設計和動畫之外，性能優化也受到了很多關注，從而提供了出色的結果：通常，幾乎不可能將任一框架上的應用程序與原生應用程序區分開來。

Framework7 提供了更複雜和有用的組件的附加列表，例如Smart Select 、 Autocomplete 、 Calendar 、 Contacts List 、 Login Screen 、 Messages和Photo Browser 。 另一方面，Ionic 提供了大量用戶創建的組件。

生態系統和社區

由於其更長的壽命、強大的財務支持和活躍的社區，Ionic 顯然在這些參數上獲勝。 離子基礎設施不斷發展：支持服務和雲解決方案讓位於新的，插件的數量不斷增長。

Framework7 比以往任何時候都好，但嚴重缺乏社區支持。

第三方依賴

Framework7 在第三方解決方案方面更加靈活。 它最大的優勢可能是可以選擇在項目中使用 Vue 還是 React，以及 Webpack 或 Browserify。 Ionic 基於 Angular，需要相關知識（因此也需要 TypeScript。）

然而，最近，Ionic 開發人員宣布了一個新的 Ionic 4 測試版，聲稱完全與 UI 框架無關——如果您不想要它們，則不再有 Angular 依賴項。

Cordova 框架：仍然是開發跨平台移動應用程序的強大方法

是否使用 Cordova 取決於具體的項目。 事實上，混合移動應用程序開發的速度及其對多平台的支持是其主要優勢。 但這始終是一種權衡，有時您可能會面臨一些原生方法不存在的缺陷。 這些出色的框架及其社區在減少這些缺陷並使我們的生活更輕鬆方面做得很好。 那麼，為什麼不試一試呢？