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

時間  2019-11-11
標籤 混合 開發 hybird ionic angular cordova web 跨平臺 欄目 AngularJS 简体版
原文   原文鏈接
Markdown版本筆記 個人GitHub首頁 個人博客 個人微信 個人郵箱
MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com

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

目錄

目錄
Ionic
Ionic 簡介
Ionic 和 Cordova/PhoneGap 的關係
零基礎案例
環境配置
下載
淘寶鏡像 cnpm
安裝 ionic
查看 ionic 能夠建立的模板
項目編寫
建立 ionic 應用
添加Android平臺：
構建應用
首頁源碼
應用的目錄結構
Ionic Lab

Ionic

官網
文檔
API
GitHub css

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的編譯平臺，能夠實現編譯成各個平臺的應用程序。html

使用 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主要工做內容:java

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

特色：node

  • 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的編譯平臺，能夠實現編譯成各個平臺的應用程序。android

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

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

通俗的講：git

  • 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

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

目錄 做用
css 樣式文件目錄
fonts 字體文件目錄
js Javascript文件目錄
version.json 當前版本更新說明文件

淘寶鏡像 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

name project type description 功能
blank angular A blank starter project 空白項目
blank ionic-angular A blank starter project 空白項目
blank ionic1 A blank starter project for Ionic 空白項目
tabs angular A starting project with a simple tabbed interface 包含底部分頁
tabs ionic-angular A starting project with a simple tabbed interface 包含底部分頁
tabs ionic1 A starting project for Ionic using a simple tabbed interface 包含底部分頁
sidemenu angular A starting project with a side menu with navigation in the content area 包含滑動菜單
sidemenu ionic-angular A starting project with a side menu with navigation in the content area 包含滑動菜單
sidemenu ionic1 A starting project for Ionic using a side menu with navigation in the content area 包含滑動菜單
super ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development. 包含推薦的開發實踐的完整項目(頁面,服務劃分等)
tutorial ionic-angular A tutorial based project that goes along with the Ionic documentation 教程項目
aws ionic-angular AWS Mobile Hub Starter Amazon 移動應用
maps ionic1 An Ionic starter project using Google Maps and a side menu 包含地圖

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 browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated hoek@2.16.3: The major version is no longer supported. Please update to 4.x or newer

> node-sass@4.9.0 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

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\_Web\node.js\_workplace\testAndroid\ionicTest\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

> node-sass@4.9.0 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: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: 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 文件夾中！
mark

添加Android平臺：

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

√ Creating .\www directory for you - done!
cordova platform add android --save
Using cordova-fetch for cordova-android@~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 cordova-android@7.1.1
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>

應用的目錄結構

mark

|-- 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的應用程序。
下載地址，貌似已經關閉了，沒法訪問了，能夠經過這裏 直接下載。

經過以上界面你能夠完成如下操做：

  • 建立應用
  • 預覽應用
  • 編譯應用
  • 運行應用
  • 上傳應用
  • 運行日誌查看

mark

Ionic Lab 目前已中止更新。

2018-10-21

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