Ionic快速安裝教程
今天就讓我們學(xué)習(xí)一下如何安裝 Ionic 在自己的電腦上搭建一個(gè)簡(jiǎn)單的小應(yīng)用。很多的網(wǎng)站上面都會(huì)寫很復(fù)雜的安裝方法,其實(shí)剛開(kāi)始學(xué)習(xí)ionic的初學(xué)者,特別是沒(méi)有很多編程經(jīng)驗(yàn)的小伙伴是不是會(huì)嚇跑了?感覺(jué)那么復(fù)雜需要安裝什么node.js的環(huán)境啊、, 安裝最新版本的cordova啊… … 其實(shí)不需要那么麻煩的。告訴大家我在做項(xiàng)目的時(shí)候怎么使用ionic的吧。
第一種方法:直接引入使用
第一步 、首先下載Ionic
ionic 最新版本下載地址:http://ionicframework.com/docs/overview/#download。
下載后解壓壓縮包,包含以下目錄:
css/ => 樣式文件
fonts/ => 字體文件
js/ => Javascript文件
version.json => 版本更新說(shuō)明
你也可以在 Github 上下載以下資源文件:https://github.com/driftyco/ionic(在release 目錄中)。
第二步 、引入文件
接下來(lái),我們只需要在項(xiàng)目中引入以上目錄中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可創(chuàng)建 ionic 應(yīng)用。
<ion-header-bar class="bar-positive"> <h1 class="title">Hello World!</h1> </ion-header-bar> <ion-content> <p>我的第一個(gè) ionic 應(yīng)用。</p> </ion-content>
注意:在移動(dòng)應(yīng)用如 phonegap 中我們只需將對(duì)應(yīng)的 js 和 css 文件加入到資源庫(kù)中即可。
第二種方法:命令行安裝
首先您需要安裝 Node.js。然后通過(guò)命令行工具安裝最新版本的 cordova 和 ionic 。通過(guò)參考Android 和 iOS 官方文檔來(lái)安裝。
Window 和 Linux 上打開(kāi)命令行工具執(zhí)行以下命令:
$ npm install -g cordova ionic
Mac 系統(tǒng)上使用以下命令:
sudo npm install -g cordova ionic
提示: IOS需要在Mac Os X. 和Xcode環(huán)境下面安裝使用。
如果你已經(jīng)安裝了以上環(huán)境,可以執(zhí)行以下命令來(lái)更新版本:
npm update -g cordova ionic
或
sudo npm update -g cordova ionic
創(chuàng)建應(yīng)用
使用ionic官方提供的現(xiàn)成的應(yīng)用程序模板,或一個(gè)空白的項(xiàng)目創(chuàng)建一個(gè)ionic應(yīng)用:
$ ionic start myApp tabs
運(yùn)行我們剛才創(chuàng)建的ionic項(xiàng)目
使用 ionic tool 創(chuàng)建,測(cè)試,運(yùn)行你的apps(或者通過(guò)Cordova直接創(chuàng)建)。
創(chuàng)建android應(yīng)用:
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
創(chuàng)建ios應(yīng)用:
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
- ionic實(shí)現(xiàn)滑動(dòng)的三種方式
- ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果
- Ionic實(shí)現(xiàn)仿通訊錄點(diǎn)擊滑動(dòng)及$ionicscrolldelegate使用分析
- ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
- url重寫IIRF(Ionic''s Isapi Rewrite Filter)手冊(cè)
- Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁(yè)面URL
- Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
- 郁悶!ionic中獲取ng-model綁定的值為undefined如何解決
- ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框
- Ionic3 UI組件之Gallery Modal詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
這篇文章主要介紹了如何利用JavaScript canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-02-02父頁(yè)面iframe中的第三方子頁(yè)面跨域交互技術(shù)—postMessage實(shí)現(xiàn)方法
web網(wǎng)站通過(guò)iframe嵌入第三方web頁(yè)面,父頁(yè)面和子頁(yè)面如果需要數(shù)據(jù)交互,顯然違反了同源策略,在HTML5標(biāo)準(zhǔn)引入的window對(duì)象下的postMessage方法,可以允許來(lái)自不同源的JavaScript腳本采用異步方式進(jìn)行有限的通信,可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞...2023-06-06小程序異步問(wèn)題之多個(gè)網(wǎng)絡(luò)請(qǐng)求依次執(zhí)行并依次收集請(qǐng)求結(jié)果
這篇文章主要介紹了小程序異步問(wèn)題之多個(gè)網(wǎng)絡(luò)請(qǐng)求依次執(zhí)行并依次收集請(qǐng)求結(jié)果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05微信小程序與公眾號(hào)實(shí)現(xiàn)數(shù)據(jù)互通的方法
這篇文章主要介紹了微信小程序與公眾號(hào)實(shí)現(xiàn)數(shù)據(jù)互通的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07JavaScript實(shí)現(xiàn)圖片懶加載(Lazyload)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片懶加載(Lazyload)的相關(guān)資料,需要的朋友可以參考下2016-11-11原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08