一、簡介ionic
ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 能夠幫助您使用 Web 技術,好比 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。
ionic 主要關注外觀和體驗,以及和你的應用程序的 UI 交互,特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫,具備速度快,界面現代化、美觀等特色。爲了解決其餘一些UI庫在手機上運行緩慢的問題,它直接放棄了IOS6和Android4.1如下的版本支持,來獲取更好的使用體驗。
二、安裝ionic/Install Ionic
提示: IOS須要在Mac Os X. 和Xcode環境下面安裝使用 (iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim.)
$ npm install -g cordova ionic
cmd
node -v
(檢查是否有node,-g表示全局安裝,不然要配置環境變量。nodejs在官網下載推薦版recommended for most users)
npm install -g cordova ionic
(如已安裝nodejs,可用npm安裝cordova和ionic)
(連接不上會報錯,從新下載便可,下載太慢可分2步npm install -g cordova 和 npm install -g ionic 下載)
三、經過Ionic建立一個項目
使用Ionic官方提供的現成的應用程序模板,或一個空白的項目建立一個Ionic應用。( Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh.)
建立一個目錄,cmd cd命令找到目錄,再輸入ionic start myApp blank命令
myapp是項目名稱,能夠更改
blank是項目類型
回車後會從網上下載資源,而後會有一個選擇y/n,要輸入n
建立好的目錄不要動
myapp文件夾中:Plugin中是用來操做底層api的插件;
scss是css擴展寫法;
www是h5項目,ionic是已發佈版本,
angular中是配套的1.5.3版,
bundle是因此js的整合串聯,h5頁面只引用bundle便可
四、運行Ionic項目
使用Ionic tool 建立 ,測試,運行你的apps(或者經過Cordova直接建立),若是要建立android應用,把右側建立代碼中的ios改成android ( Use the Ionic tool to build, test, and run your apps (or use Cordova directly). Make sure to substitute ios with android to build for Android.)
Then, try
Ionic View to share your apps with testers and clients, or to easily test on new devices.
cmd cd找到項目文件myapp
-->ionic platform add ios 或 ionic platform add android
(添加ios、android平臺,會下載資源,myapp下會建立platform文件夾--ios、android文件夾)
-->ionic build ios
( 若是是tabs 和 sidemenu 類型的ionic項目,ios要先裝xcode; android 要先裝 Android SDK)
-->ionic emulate ios