全國咨詢熱線:
0755-33563420
全國售后熱線:
0755-33563634

APP開發

你的位置：首頁>>我的觀點>>APP開發

混合跨平臺應用開發主流框架開發

點擊數：62019-04-01 16:35:08　來源: 深圳網站建設,微信APP開發,網店裝修,藝之都網絡公司官網

離子教程

混合跨平臺應用開發主流框架開發

離子是一個強大的HTML5應用程序開發框架（HTML5混合移動應用框架）。可以幫助您使用Web技術，比如HTML，CSS和Javascript構建接近原生體驗的移動應用程序。

離子主要關注外觀和體驗，以及和你的應用程序的UI交互，特別適合用于基于Hybird模式的HTML5移動應用程序開發。

離子是一個輕量的手機UI庫，具有速度快，界面現代化，美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了iOS6的和Android4.1以下的版本支持，來獲取更好的使用體驗。

離子特點

1.ionic基于Angular語法，簡單易學。
2.ionic是一個輕量級框架。
3.ionic完美的融合下一代移動框架，支持Angularjs的特性，MVC，代碼易維護。
4.ionic提供了漂亮的設計，通過SASS構建應用程序，它提供了很多UI組件來幫助開發者開發強大的應用。
5.ionic專注原生，讓你看不出混合應用和原生的區別
6.ionic提供了強大的命令行工具。
7.ionic性能優越，運行速度快。

學習本教程前你需要了解？

學習本教程前你需要了解以下基礎知識：

HTML
CSS
使用Javascript
角

離子相關內容

離子官方網站：http：//ionicframework.com/

離子官方文檔：http：//ionicframework.com/docs/

Github地址：https：//github.com/driftyco/ionic

離子安裝

本站實例采用了離子v1.3.2版本，使用的CDN庫地址：

<link href =“https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css”rel =“stylesheet”>  <script src =“https://cdn.bootcss.com/ionic/ 1.3.2 / JS / ionic.bundle.min.js“> </ SCRIPT>

離子最新版本下載地址：http：//ionicframework.com/docs/overview/#download。

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

css / =>樣式文件 字體/ =>字體文件 js / => Javascript文件 version.json =>版本更新說明

你也可以在Github上下載以下資源文件：https：//github.com/driftyco/ionic(在發布目錄中）。

接下來，我們只需要在項目中引入以上目錄中的css / ionic.min.css和js / ionic.bundle.min.js文件即可創建離子應用。

實例

<ion-header-barclass =“bar-positive”> <h1class =“title”> Hello World！</ h1> </ ion-header-bar> <ion-content> <p>我的第一個離子應用</ p> </離子含量>

嘗試一下?

點擊“嘗試一下”按鈕查看在線實例。

本教程著重講解離子框架的應用，大部分實例在瀏覽器中運行，移動設備上運行可以在接下來的命令行安裝教程中詳細了解。

注意：在移動應用如phonegap中我們只需將對應的js和css文件加入到資源庫中即可。

命令行安裝

首先您需要安裝Node.js，我們在接下來的安裝中需要使用到其NPM工具，更多NPM介紹可以查看我們的NPM使用介紹。

然后通過命令行工具安裝最新版本的cordova和ionic。通過參考Android和iOS官方文檔來安裝。

Window和Linux上打開命令行工具執行以下命令：

$ npm install -g cordova ionic

Mac系統上使用以下命令：

sudo npm install -g cordova ionic

提示：IOS需要在Mac Os X.和Xcode環境下面安裝使用。

如果你已經安裝了以上環境，可以執行以下命令來更新版本：

npm update -g cordova ionic

或

sudo npm update -g cordova ionic

創建應用

使用離子官方提供的現成的應用程序模板，或一個空白的項目創建一個離子應用：

$ ionic啟動myApp標簽

運行我們剛才創建的離子項目

使用離子工具創建，測試，運行你的應用程序（或者通過Cordova直接創建）。

創建的Android應用

$ cd myApp  $ ionic platform添加android  $ ionic build android  $ ionic模擬android

如果一切正常會彈出模擬器，界面如下所示：

混合跨平臺應用開發主流框架開發

創建的iOS應用

$ cd myApp  $ ionic platform add ios  $ ionic build ios  $ ionic emulate ios

如果出現“找不到ios-sim。”錯誤，可以執行以下命令：
npm install -g ios-sim

如果一切正常會彈出模擬器，界面如下所示：

混合跨平臺應用開發主流框架開發

離子實驗室

Ionic Lab是桌面版的開發環境，如果你不喜歡使用命令行操作，Ionic Lab將會滿足你的需求。

Ionic Lab為開發者提供了一個更簡單的方法來開始，編譯，運行，和模擬運行Ionic的應用程序。

Ionic Lab支持的平臺有：Window，Mac OS X，Linux，下載地址為：http：//lab.ionic.io/,下載后直接安裝即可。整個操作界面如下所示：

混合跨平臺應用開發主流框架開發

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

創建應用
預覽應用
編譯應用
運行應用
上傳應用
運行日志查看
......

推薦使用Sublime Text作為Ionic項目的編輯器，我們可以通過Ionic Lab直接在Sublime Text上打開項目，如下圖：

Gif操作演示

混合跨平臺應用開發主流框架開發

離子創建APP

前面的章節中我們已經學會了離子框架如何導入到項目中。

接下來我們將為大家介紹如何創建一個離子APP應用。

離子創建APP使用HTML，CSS和Javascript來構建，所以我們可以創建一個www目錄，并在目錄下創建index.html文件，代碼如下：

<！DOCTYPE html>  <html>  <head>  <meta charset =“utf-8”>  <title> Todo </ title>  <meta name =“viewport”content =“initial-scale = 1，maximum-scale = 1 ，user-scalable = no，width = device-width“>  <link href =”lib / ionic / css / ionic.css“rel =”stylesheet“>  <script src =”lib / ionic / js / ionic.bundle。 js“> </ script>  <！ - 在使用Cordova / PhoneGap創建的APP中包含的文件，由Cordova / PhoneGap提供，（開發過程中顯示404） - >  <script src =”cordova.js“> </ script>  </ head>  <body>  </ body>  </ html>

以上代碼中，我們引入了Ionic CSS文件，Ionic JS文件及Ionic AngularJS擴展ionic.bundle.js（ionic.bundle.js）。

ionic.bundle.js文件已經包含了Ionic核心JS，AngularJS，Ionic的AngularJS擴展，如果你需要引入其他Angular模塊，可以從lib / js / angular目錄中調用。

cordova.js是在使用Cordova / PhoneGap創建應用時生成的，不需要手動引入，你可以在Cordova / PhoneGap項目中找到該文件，所以在開發過程中顯示404是正常的。

創建APP

接下來我們來實現一個包含標題，側邊欄，列表等的應用，設計圖如下：

混合跨平臺應用開發主流框架開發

創建側邊欄

側邊欄創建使用ion-side-menus控制器。

編輯我們先前創建的index.html文件，修改<body>內的內容，如下所示：

<body>  <ion-side-menus>  <ion-side-menu-content>  </ ion-side-menu-content>  <ion-side-menu side =“left”>  </ ion-side-menu>  < / ion-side-menus>  </ body>