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