Ionic2 開發(fā)

1. 背景

HyBrid app(混合模式移動應(yīng)用)是介于web-app和native-app之間的app, 兼具了Nativa App良好的用戶體驗和Web App垮平臺開發(fā)的優(yōu)勢。

2. 什么是Ionic

2.1 了解NPM

在使用Ionic之前需要先了解下NPM:nodejs的出現(xiàn)算是前端里程碑的是一個事件,它讓前端工程師們擺脫了瀏覽器的束縛,踏上了一個更加寬廣的舞臺。隨著一系列基于nodejs的應(yīng)用和工具的出現(xiàn),包管理扮演者很重要的作用。NPM(node package manager),作為node的包管理工具,極大的方便了我們的開發(fā)工作,主要作用包括:安裝、卸載、更新、查看、搜索、發(fā)布等。
NPM官網(wǎng):https://npmjs.org/
NPM官方文檔:https://npmjs.org/doc/README.html

2.2 Ionic

Ionic (即ionicFramework)是一個輕量的手機UI庫,具有速度快,界面現(xiàn)代化、美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題,它直接放棄了IOS6和Android4.1以下的版本支持,來獲取更好的使用體驗。
ionic中文教程

3. 安裝Ionic

3.1 安裝node.js

在終端中查看node版本,

查看node版本.png

如果沒有安裝過或版本過低,則需要 Nodejs官網(wǎng) 下載最新的版本。

3.2 安裝ionic和cordova

由于國內(nèi)防火墻的原因,需要采用淘寶NPM鏡像才能成功安裝ionic包和cordova包。依次在終端中依次輸入以下兩個命令, 然后請耐心等候安裝成功。

npm install -g cnpm --registry=https://registry.npm.taobao.org

sudo cnpm install -g cordova ionic

3.3 創(chuàng)建ionic項目

cd ./Desktop // 終端進入桌面
ionic start demo_1 // 創(chuàng)建demo_1項目

創(chuàng)建ionic項目.png

3.4 創(chuàng)建iOS應(yīng)用

cd demo_1
ionic platform add ios
ionic build ios
ionic emulate ios // 打開模擬器

生成的iOS應(yīng)用在platform文件中顯示


創(chuàng)建iOS應(yīng)用.png

3.5 運行iOS應(yīng)用

點擊demo_1.xcodeproj打開應(yīng)用,可以看到界面就像原生app那么炫酷了。


iOS應(yīng)用.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容