碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2018-10-21 00:58   683    博客/ _2019/ md/ _大前端
Markdown版本筆記 我的GitHub首頁 我的博客 我的微信 我的郵箱
MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com

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

目錄

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

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

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

目錄 作用
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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ionic4+angular6 混合移動開發 capacitor cordova ionic4+angular7+cordova開發入門 hybird app混合開發介紹 ionic3+angular4開發混合app 之自定義組件 搭建Cordova + Ionic + WebStorm環境開發Web App應用 ionic4+angular7+cordova上傳圖片 ionic3+angular4+cordova 項目實例 Visual Studio 2015 和 Apache Cordova 跨平台開發入門(一) Ionic開發之如何修改Cordova插件 angular+ionic+cordova(實戰項目開發中,持續更新自己學到的和遇到的)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM