手機 app開發(fā)的幾種方式 ionic學習思路以及
ionic新建的項目分析

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供平壩企業(yè)網站建設,專注與成都網站設計、網站制作、H5開發(fā)、小程序制作等業(yè)務。10年已為平壩眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

學習要點：
1. 目前開發(fā)手機 app 的幾種方式
2. Ionic 學習思路簡介
3. Ionic CSS 框架
4. ionic js 指令 路由 其他 ui 交互效果
5. ionic 命令行/CLI 安裝 調試 打包（ 第三季 第一講已講）
6. ionic 開發(fā)包下載 以及命令創(chuàng)建的項目分析

1． 目前開發(fā)手機 app的幾種方式
原生/Native： 使用原生 SDK 開發(fā) App。優(yōu)點不用說， 當你有足夠的資源，這是最理想的
方式；缺點是對不同的 平臺要分別開發(fā)， 學習成本高,開發(fā)成本高、 開發(fā)周期長、 不易于
web開發(fā)人員和企業(yè)建站公司轉型
原生腳本/NativeScript： 將原生 API 封裝成 JavaScript 接口，這有點像前端的 nodejs。
NativeScript方式 與原生相比性能損失不大（據(jù)稱只有 10%左右），優(yōu)點是開發(fā)語言統(tǒng)一使
用 JavaScript， 缺點是 要針對不同的平臺分別開發(fā)。

原生+web/ Hybrid： 使用原生技術開發(fā)， 部分頁面調用 web。 優(yōu)點是比純原生開發(fā)周期
短， 頁面更新方便， 如支付寶， 還有很多 app的詳情頁面。 缺點： 需要原生和 web配合。
混合/Hybrid： 使用 web 技術開發(fā) App，使用 Cordova/PhoneGap 之類進行打包封裝。優(yōu)
點是采用標準的 web技術開發(fā)， 避免了不同平臺原生開發(fā)體系的學習， 學習成本低， 上手
快、 效率高,一次開發(fā) 微信 wap app全部搞定；缺點是 app在 android平臺性能上有一些
損失， 但是相信硬件的發(fā)展會接近原生。

ionic屬于 hybrid開發(fā)模式，本質上是將移動 web應用與瀏覽器打包,優(yōu)點 MVC 基于 angularjs

運行速度快 UI 漂亮 開發(fā)簡單 缺點：學習成本比其他的 html5 框架稍微高一些(比如 jqmobi)
需要具備 angularjs 基礎。 是否采用這種模式，需要根據(jù)具體情況綜合考慮。
不過在大多數(shù)場景下， 如果你已經具備一定的 web開發(fā)經驗，采用這種方式進入移動 App
開發(fā)領域，還是不錯的一個選擇。 畢竟，將產品低成本地開發(fā)出來并更快地推向市場，有
時是最重要的事情。

2． Ionic學習思路簡介
Ionic 簡介： ionic 是一個強大的混合式/hybridHTML5 移動開發(fā)框架，特點是使用標準的
HTML、 CSS 和 JavaScript，開發(fā)跨平臺（目前支持： Android、iOS，計劃支持： Windows Phone、
Firefox OS） 的原生 App 應用：

ionic 主要包括三個部分：
CSS框架 - 提供原生 App質感的 CSS樣式模擬。ionic這部分的實現(xiàn)使用了 ionicons
圖標樣式庫。
JavaScript 框架 - 提供移動 Web 應用開發(fā)框架。ionic 基于 AngularJS 基礎框架開
發(fā)，因此 自然地遵循 AngularJS 的框架約束；此外， ionic 使用 AngularJS UI Router
實現(xiàn)前端路由。
命令行/CLI - 命令行工具集用來簡化應用的開發(fā)、構造和仿真運行。 ionic 命令行
工具使用了 Cordova，依賴于平臺 SDK（ Android & iOS）實現(xiàn)將移動 web 項目打包
成原生 app。

由于 ionic 使用了 HTML5 和 CSS3 的一些新規(guī)范，所以要求 iOS7+/ Android4.1+。 在低于
這些版本的手機上使用 ionic 開發(fā)的應用，有時會發(fā)生莫名其妙的問題。

3. CSS 框架

如果你對 AngularJS 這樣的東西不感興趣，可以只使用 ionic 的 CSS 框架：直接在 HTML 中
引入 ionic.css 就可以了。
ionic 的 CSS 框架主要提供預定義的 CSS類，來幫助我們快速構建適用于手機端的 UI。 ionic
的預定義 CSS 類主要分四個方面：
基本布局類
ionic 將手機頁面的布局模式基本抽象為三塊：頭、內容、尾?；静季诸愄峁┝?這幾個
區(qū)域的 CSS 類。
顏色和圖標類

ionic 定義了幾個配色方案 CSS 類，并使用 ionicons 提供的字體圖標類。
界面組件類
ionic 定義了豐富的界面組件 CSS 類，讓 HTML 元素看起來像移動平臺的 UI 組件。
柵格系統(tǒng)類
和 Bootstrap 一樣， ionic 也提供了柵格系統(tǒng)。不過 ionic 的實現(xiàn)是基于 CSS3 的 FlexBox 模
型，更為靈活。4. ionic js 指令 路由 其他 ui 交互效果5.ionic 命令行/CLI 安裝 調試 打包（ 第三季 第一講已講）

1. 準備環(huán)境 安裝 cordova （ 不懂的話,看前面的環(huán)境搭建教程 【第二季第一講以及
phonegap3.4 安裝教程】）
2. 安裝 ionic
npm install -g ionic
sudo npm install -g ionic

3.創(chuàng)建運行項目
Ios創(chuàng)建安裝運行
ionic start myproject
cd myproject

ionic platform add ios
ionic build ios
ionic emulate ios
Android創(chuàng)建安裝運行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模擬器運行)
ionic run android (連接上手機運行)

6.ionic 開發(fā)包下載 以及默認項目分析

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：手機app開發(fā)的幾種方式ionic學習思路以及ionic新建的項目分析-創(chuàng)新互聯(lián)
文章出自：http://www.rwnh.cn/article20/doejco.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、App設計、用戶體驗、軟件開發(fā)、域名注冊、網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)