混合開發 Hybird Ionic Angular Cordova web 跨平臺

目錄

Ionic

官網
文件
API
GitHub

Ionic 簡介

• Build amazing apps in one codebase, for any platform, with the web. One app running on everything
• Ionic讓Web開發人員比以往更輕鬆地構建，測試，部署和監控跨平臺應用程式。
• Ionic是開源移動應用程式開發框架，可以使用Web技術輕鬆構建高質量的原生和漸進式[progressive]的Web應用程式。
• Ionic基於Web元件，與過去的版本相比，具有許多重要的效能、可用性和功能等方面的改進。

ionic是一個用來開發混合手機應用的、開源的、免費的程式碼庫。可以優化html、css和js的效能，構建高效的應用程式，而且還可以用於構建Sass和AngularJS的優化。這個框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平臺，可以實現編譯成各個平臺的應用程式。

使用 Ionic 需要掌握的技術：HTML、CSS、Javascript、Angular

• ionic 是一個強大的 HTML5 應用程式開發框架(HTML5 Hybrid Mobile App Framework)。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程式。
• ionic 主要關注外觀和體驗，以及和你的應用程式的 UI 互動，特別適合用於基於 Hybird 模式的 HTML5 移動應用程式開發。
• ionic是一個輕量的手機UI庫，具有速度快，介面現代化、美觀等特點。為了解決其他一些UI庫在手機上執行緩慢的問題，它直接放棄了IOS6和Android4.1
  以下的版本支援，來獲取更好的使用體驗。

Ionic主要工作內容:

• 在Angular的基礎上提供了更適合移動開發的一系列元件(menu,nav,card等)。
• 在cordova的基礎上提供了cordova外掛的Typescipt封裝，使得呼叫cordova外掛更容易。
• 提供了一組圖示和主題，是的生成的移動應用更美觀。

特點：

• ionic 基於Angular語法，簡單易學。
• ionic 是一個輕量級框架。
• ionic 完美的融合下一代移動框架，支援 Angularjs 的特性， MVVM ，程式碼易維護。
• ionic 提供了漂亮的設計，通過 SASS 構建應用程式，它提供了很多 UI 元件來幫助開發者開發強大的應用。
• ionic 專注原生，讓你看不出混合應用和原生的區別
• ionic 提供了強大的命令列工具。
• ionic 效能優越，執行速度快。
• ionic提供很多css元件和javascript UI庫。
• ionic可以支援定製android和ios的外掛，也支援服務端REST的敏捷開發。

Ionic 和 Cordova/PhoneGap 的關係

Ionic是一個用來開發混合手機應用的、開源的、免費的程式碼庫，這個框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平臺，可以實現編譯成各個平臺的應用程式。

PhoneGap是一個採用HTML，CSS和JavaScript的技術，建立移動跨平臺移動應用程式的快速開發平臺。它使開發者能夠在網頁中呼叫IOS，Android等智慧手機的核心功能，包括地理定位，加速器，聯絡人，聲音和振動等，此外PhoneGap擁有豐富的外掛可以呼叫。

ionic是一個用來解決開發跨平臺應用的方案。他是建立在Cordova的基礎之上的，內部實現跨平臺是由Cordova來實現的。相對於Cordova而言，他多了一些東西，例如的他的樣式，例如AngularJS。

通俗的講：

• Ionic是一款H5混合移動app開發框架(HTML5 Hybrid Mobile App Framework)
• Phonegap是一款可以打包並且可以讓JS呼叫原生功能的移動app框架

至於為什麼Ionic也可以打包，這是因為Ionic的打包外掛是基於Phonegap/Cordova的。

關於他們之間的關係，首先我們需要明確以下概念：

• 即使我們將移動端web頁面做得和原生應用及其相似，在我們的頁面中也無法像原生應用那樣呼叫原生的能力，當然通過輸入框觸發鍵盤、相簿、拍照等操作不在這裡“呼叫原生能力”的範疇。
• 單純的web頁面不能提交到應用商店被使用者使用。

Ionic和Angular
首先要明確的是Ionic是Angular的衍生品，Angular是單獨的JS庫，和jQuery一樣能夠獨立用於開發應用，而Ionic只是對Angular進行了擴充套件，利用Angular實現了很多符合移動端應用的元件，並搭建了很完善的樣式庫，是對Angular最成功的應用樣例。即使不使用Ionic，Angular也可與任意樣式庫，如Bootstrap、Foundation等搭配使用，得到想要的頁面效果。

Ionic/Angular和Cordova
可能會有人被問道：Cordova比Ionic/Angular好嗎？這就很尷尬了，根本是毫無意義的問題。它們在混合開發中扮演的是不同的角色：Ionic/Angular負責頁面的實現，而Cordova負責將實現的頁面包裝成原生應用（Android:apk；iOS:ipa）。包裝完成之後我們的頁面才有可能呼叫裝置的原生能力，最後才能上傳到應用商店被使用者使用。

Ionic/Angular和Cordova外掛

• Cordova外掛的作用是提供一個橋樑供頁面和原生通訊，因為我們的頁面不能直接呼叫裝置能力，所以需要與能夠呼叫裝置能力的原生程式碼（android:Java；ios:OC）通訊，此時就需要Cordova外掛了。
• Cordova外掛能夠在任何Cordova工程中使用，和使用什麼前端框架（如Ionic）無關。
• Ionic2 中封裝了Ionic Native，方便了Cordova外掛的使用，但在 Ionic2 中仍然可以像 Ionic1 中一樣使用Cordova外掛，Ionic Native 不是必須的。
• 即使在 Ionic2 中使用了 Ionic Native，也首先需要手動新增外掛，如：cordova plugin add cordova-plugin-pluginName。

零基礎案例

環境配置

下載

ionic 下載地址：https://ionicframework.com/docs/v1/overview/#download
ionic-v1.3.3.zip

下載後解壓壓縮包，包含以下目錄：

淘寶映象 cnpm

如果由於GFW導致外掛下載不下來，可以用淘寶映象來解決這個問題。

方式一：使用cnpm(China npm)代替npm：

• 首先安裝 cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 檢視cnpm版本資訊：cnpm -v
• 安裝完成後，以後就可以使用cnpm這個命令來安裝外掛：cnpm install -g ionic

方式一：通過更改訪問地址：

• 更改前的原始源地址為: npm config set registry https://registry.npmjs.org/
• 更改為映象淘寶源地址：npm config set registry https://registry.npm.taobao.org/
• 查證自己所切換的源路徑：npm config get registry

安裝 ionic

• 檢視安裝的 ionic 版本資訊：ionic -v
• 如果找不到，執行以下命令安裝 ionic：npm install -g ionic
• 如果你已經安裝，可以執行以下命令來更新版本:npm update -g ionic
• 解除安裝ionic：npm uninstall -g ionic
• 清除快取：npm cache clean --force

檢視 ionic 可以建立的模板

檢視 ionic 可以建立的模板：ionic start --list

tabs 工程：這是一個包含3個頁面的應用程式，每個頁面有標題、內容。

專案編寫

建立 ionic 應用

使用 ionic 提供的模板建立一個應用：ionic start projectName [templateName]
例如：ionic start ionicTest tabs

使用此命令時會提示讓你用 ionic4 建立應用：
You are about to create an Ionic 3 app. Would you like to try Ionic 4 (beta)?
Ionic 4 uses the power of the modern Web and embraces擁抱 the Angular CLI and Angular Router to bring you the best version of Ionic ever.

然後會提示你是否整合 ** ，選擇 Y 之後會下載大量的東西，如果不使用淘寶映象，根本不可能下載成功：

? Integrate your new app with Cordova to target native iOS and Android?
Yes

> ionic integrations enable cordova --quiet
[INFO] Downloading integration cordova
[INFO] Copying integrations files to project
[OK] Integration cordova added!

Installing dependencies may take several minutes.
     *   IONIC  DEVAPP   *
 Speed up development with the Ionic DevApp, our fast, on-device testing mobile app
  -     Test on iOS and Android without Native SDKs
  -     LiveReload for instant style and JS updates

 -->    Install DevApp: https://bit.ly/ionic-dev-app    <--
────────────────────────────────────────────────────────────────────────────────────
> npm i
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: The major version is no longer supported. Please update to 4.x or newer

> [email protected] install C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-64_binding.node
Download complete  ] - :
Binary saved to C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\_Web\node.js\node_cache\node-sass\4.9.0\win32-x64-64_binding.node

> [email protected] postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

> [email protected] postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass
> node scripts/build.js

Binary found at C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 709 packages from 634 contributors in 426.888s
> git init
Initialized empty Git repository in C:/_Web/node.js/_workplace/testAndroid/ionicTest/.git/
     *   IONIC  PRO   *
 Supercharge your Ionic development with the Ionic Pro SDK
  -     Track runtime errors in real-time, back to your original TypeScript
  -    Push remote updates and skip the app store queue

 Learn more about Ionic Pro: https://ionicframework.com/pro
────────────────────────────────────────────────────────────────────────────────────

廢了九牛二虎之力才下載完，下的東西基本都在專案的 node_modules 資料夾中！

新增Android平臺：

新增Android平臺：ionic cordova platform add android
臥槽，輸入命令後又是一頓猛操作，噼裡啪啦的給我下載了一堆東西，耗時也至少有5分鐘。

√ Creating .\www directory for you - done!
cordova platform add android --save
Using cordova-fetch for [email protected]~7.1.1
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: io.ionic.starter
        Name: ionicTest
        Activity: MainActivity
        Android target: android-27
Android project created with [email protected]
Android Studio project detected
Android Studio project detected
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android

This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the project
Installing "cordova-plugin-statusbar" for android
Adding cordova-plugin-statusbar to package.json
Saved plugin info for "cordova-plugin-statusbar" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android

又是廢了九牛二虎之力才下載完。

構建應用

構建Android專案：ionic cordova build android
構建後直接執行：ionic cordova run android

應該之前 cordova 的命令他也都能用

這玩意可真是費勁，構建一次應用竟然也要一分鐘！

BUILD SUCCESSFUL in 55s
48 actionable tasks: 48 executed
Built the following apk(s):...\ionicTest\platforms\android\app\build\outputs\apk\debug\app-debug.apk

首頁原始碼

注意，和使用cordova建立的專案不同，ionic專案的www目錄並不是原始碼目錄，而是執行時候生成的目錄，原始碼是在src目錄下的，要修改index.html，只有修改src目錄下的index.html才有效，修改www目錄下的index.html沒有任何意義。

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>
        <script data-ionic="inject">
            (function(w) {
                var i = w.Ionic = w.Ionic || {};
                i.version = '3.9.2';
                i.angular = '5.2.11';
                i.staticDir = 'build/';
            })(window);
        </script>
        <meta charset="UTF-8">
        <title>Ionic App</title>
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">

        <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
        <link rel="manifest" href="manifest.json">
        <meta name="theme-color" content="#4e8ef7">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <script src="cordova.js"></script>
        <link href="build/main.css" rel="stylesheet">
    </head>

    <body>
        <ion-app></ion-app>
        <script src="build/polyfills.js"></script>
        <script src="build/vendor.js"></script>
        <script src="build/main.js"></script>
    </body>

</html>

應用的目錄結構

|-- resources/                          * 資原始檔,分為Android和Ios
|
|-- src/
|    |-- app/
|    |    |── app.component.ts          * 入口元件
|    |    |── app.module.ts             * 主模組
|    |    |── app.html                  * 主元件頁面佈局
|    |    |── app.scss                  * 全域性Sass
|    |    |── main.ts                   * 主程式   
|    |
|    |-- assets/
|    |    |── icon/
|    |    |    |── favicon.ico          * 頁面圖示
|    |    |
|    |    |── imgs/
|    |         |── logo.png             * 程式logo
|    |
|    |-- pages/                          * 包含所有的頁面
|    |    |── about/                     * 關於頁面 page 
|    |    |    |── about.html            * 關於頁面 template
|    |    |    |── about.ts              * 關於頁面 code
|    |    |    |── about.scss            * 關於頁面 stylesheet
|    |    |
|    |    |── contact/                   * 聯絡人頁面 page
|    |    |    |── contact.html          * 聯絡人頁面 template
|    |    |    |── contact.ts            * 聯絡人頁面 code
|    |    |    |── contact.scss          * 聯絡人頁面stylesheet
|    |    |
|    |    |── home/                     * 主頁面 page
|    |    |    |── home.html            * 主頁面 template
|    |    |    |── home.ts              * 主頁面 code
|    |    |    |── home.scss            * 主頁面 stylesheet
|    |    |
|    |    |
|    |    |── tabs/                      * 分頁 page
|    |    |    |── tabs.html             * 分頁 template
|    |    |    |── tabs.ts               * 分頁 code
|    |
|    |── providers/                      * 包含所有的可注入服務
|    |
|    |── theme/                          * 應用主題檔案
|    |     |── variables.scss            * 應用scss變數
|    |
|    |-- index.html
|
|-- typings/                             * JavaScript 型別宣告
|    |── cordova-typings.d.ts
|
|-- www/                                 * ionic serve 執行時候生成站點目錄
|    |── assets/
|    |    |── data/
|    |    |
|    |    |── fonts/
|    |    |
|    |    |── img/
|    |
|    |── build/
|    |
|    |── index.html
|    |
|    |── manifest.json
|    |
|    |── service-worker.js
|
|── .editorconfig                       * 程式碼風格
|── .gitignore                          * git忽略檔案
|── LICENSE                             * License 檔案
|── README.md                           * Readme
|── config.xml                          * Cordova 配置檔案
|── ionic.config.json                   * Ionic 配置檔案
|── package.json                        * Javascript 工程檔案
|── tsconfig.json                       * typescript 編譯配置檔案
|── tslint.json                         * TypeScript 書寫規範規則檔案

Ionic Lab

Ionic Lab 是桌面版的開發環境，如果你不喜歡使用命令列操作，Ionic Lab 將會滿足你的需求。
Ionic Lab 為開發者提供了一個更簡單的方法來開始，編譯，執行，和模擬執行Ionic的應用程式。
下載地址，貌似已經關閉了，無法訪問了，可以通過這裡 直接下載。

通過以上介面你可以完成以下操作：

• 建立應用
• 預覽應用
• 編譯應用
• 執行應用
• 上傳應用
• 執行日誌檢視

Ionic Lab 目前已停止更新。

2018-10-21