IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程式,它提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定,使用它成為 Web 和移動開發者的共同選擇。Ioni... ...
移動App開發環境安裝
一、環境安裝準備軟體
二、node的安裝
像安裝普通軟體一樣,安裝對應版本的node軟體,安裝好之後就可以運行npm命令行,比如npm init 、npm install -g bower、npm install -g browser 、npm install -g browser-sync、npm install -g gulp -cli --save --dev 、npm install jquery --save、等等;註意安裝路徑不要選中文路徑,配置文件是package.json
npm:www.npmjs.org Node package Manager
bower:http://bower.io
browser-sync:[官網](https://www.browsersync.io/)
[中文網](http://www.browsersync.cn/)
Glup: [官網](http://gulpjs.com/)
[中文網](http://www.gulpjs.com.cn/)
常用Gulp插件
- [編譯 Less:gulp-less](https://www.npmjs.com/package/gulp-less)
- [創建本地伺服器:gulp-connect](https://www.npmjs.com/package/gulp-connect)
- [合併文件:gulp-concat](https://www.npmjs.com/package/gulp-concat)
- [最小化 js 文件:gulp-uglify](https://www.npmjs.com/package/gulp-uglify)
- [重命名文件:gulp-rename](https://www.npmjs.com/package/gulp-rename)
- [最小化 css 文件:gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css)
- [壓縮html文件 gulp-minify-html](https://www.npmjs.com/package/gulp-minify-html)
- [最小化圖像:gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)
三、git的安裝
git是一個源代碼管理工具,安裝git主要是開發中的團隊協作,方便版本管理.ng-cordova插件需要使用。
git:下載地址git-scm.com/download/
四、jdk的安裝
Java Development Kit,這是做java語言運行開發所依賴的工具,就像js語言運行需要瀏覽器一樣
下載地址:
(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
環境變數配置:
JAVA_HOME,變數值配置為:jdk安裝路徑(c:/xxx/jdk1.8.0.25)
CLASSPATH,變數值配置為:
.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
*註意最前面有個點*
+ PATH,變數值追加: %JAVA_HOME%\bin;
> C:\Users\isc\AppData\Roaming\npm;%JAVA_HOME%\bin;
%JAVA_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
- 輸入javac較驗
- 或輸入java -version
五、Android SDK的安裝
Android SDK是Android平臺上進行軟體開發所需要的開發包,這裡我們通過安裝Android Studio的方式來安裝Android SDK,Android Studio 是Android開發的IDE(集成開發環境)至少是2.0 或者更高版本,我們不是要使用這個IDE,而是要使用它所集成的Android SDK,如果手動下載安裝SDK很麻煩。安卓官網被牆[android sdk 中文網站](http://www.androiddevtools.cn/)註意:安裝路徑不要有中文也不要用空格。
- 環境變數:
+ ANDROID_HOME:變數值配置為sdk安裝路徑(C:\iscDev\Android\sdk)
+ PATH:變數值追加: ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
此時還要安裝cordova和ionic npm install -g cordova ionic
六、Viusal Studio 2015的安裝
主要是為了使用該工具所提供的C++環境,這個是最難裝的,雖然這個強大的工具我們只是用它的c++環境,目測安裝大小10G+。
以上是ionic開發必備的環境,如果要進行React Native開發還需搭建python環境
七、Python的安裝
八、運行
安裝完以上環境就可以進行移動App開發了,
Ionic開發:
- ionic start myApp tabs
+ 初始化一個項目,tabs可以不寫,也可以是/black/sidemenu
- ionic platform add android
+ 添加一個andorid平臺,其實是下載android源碼
+ 添加一個ios平臺 `ionic platform add ios`
- ionic build android
+ 將項目代碼編譯成 android 安裝包
- build 時容易失敗多嘗試幾次