目錄
- 說明
- 環境搭建
- 起始一個ionic項目
- angular（操作數據）在項目中常用到的點，以及與jq（操作dom）思維方式的不同
- 我惠項目目錄結構
- 插件小解
說明
ionic 它是在cordova的基礎上增加了 ionic UI ，angular.js，還有一些強大的cli工具，以及一些前端自動化構建的知識，以用來開發單頁面app的一個前端框架，所以想要用它開發app,我們必須了解下上面提到的東西
- ionic ui： 它提供了app開發基本的樣式，如選項卡組件(ionTab)，導航組件（ionic-nav-view），列表組件，它提供了兩種選擇，一種是基于css的組件，一種的基于js組件（在angular里面叫做指令），【注意】：導航，內容包裹，下拉刷新，上啦加載等時一般使用js組件
- angular.js： 就是一個基于mvc模式將項目劃分并且具有雙向綁定特點的用于開發單頁面應用（spa）的js框架
- cordova: 提供了一系列插件用來訪問系統設備，以及打包的工具
1 環境搭建
一個ionic項目所需要的環境有
- node
- ionic&cordova命令行環境(cli)
- jdk
- android sdk（安卓開發工具包，用來打包安卓應用）
- xcode(打包蘋果應用，調試工具)
安裝nodejs
前往node.js官網https://nodejs.org/zh-cn/下載最新穩定版本的安裝包安裝即可，安裝完成之后
node -v 查看node版本【注】我的版本為v7.10.0
npm -v 查看npm版本 【注】4.2.0
安裝cnpm
因為npm服務區在國外，有的包下載可能被墻，導致下載不下來報錯，比如頭疼我很久的node-sass，所以我強烈建議在安裝ionic跟cordova命令行之前先安裝國內的淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成之后 cnpm -v查看版本信息【注】5.1.1
安裝Codova && ionic
cnpm install -g cordova ionic
安裝完成之后，輸入cordova -v ,ionic -v,能顯示版本號則表示安裝成功
【注】cordova 7.1.0 && ionic 3.12.0(每次會讓你升級，建議不要升)
安裝gulp
cnpm install -g gulp
【gulp】任務流形式的前端自動化構建工具
安裝jdk
參考www.lxweimin.com/p/b9757a5bcb07，很簡單這里不再贅述，注意配置環境變量
安裝sdk
Android提供了兩個選項：Android studio或者 Android的獨立sdk開發工具，我建議只安裝SDk,如果您的電腦配置好的話，建議還是a s
http://tools.android-studio.org/index.php/sdk/
【注】：當下載下來android sdk之后，配置完環境變量，要以管理員身份運行cmd，輸入安卓下載對應的包，不然下載的時候回報錯，很大，建議wifi環境下載...
xCode 最新版
2 起始一個ionic 項目
- ionic start myApp tabs（創建一個帶底部切換tab的ionic應用，當然你也可以選擇創建一個空模板）
創建安卓應用
- cd myApp
- ionic serve (瀏覽器環境查看)
- ionic platform add android （添加安卓設備）
- 添加完成之后，通過數據線連接電腦（打開開發者選項，usb調試），ionic run android --device
創建 ios應用一樣
- ios模擬器查看： ionic emulate ios -l -c(熱重載功能)
三 angular（操作數據）在項目中常用到的點，以及與jq（操作dom）思維方式的不同
- 現在你要思考的是頁面布局在發生一些動作后會產生變化（顯示/隱藏，比如購物車頁面，當你的購物車里面有數據的時候會顯示你要買的東西，那如果沒有呢？則顯示一段文案/或者圖片，購物車空空如也。）
- 我們可以把整個程序看作是一個狀態機（
初始狀態-----------------------------------隨著用戶的操作狀態不斷變化
我們通常用一些列變量（數組/對象）來標識狀態，比如播放視頻的初始狀態是什么呢?
- 是否正在播放
- 是否播放結束了
- 播放進度的初始值
- ........
當用戶進行了操作，點擊播放按鈕等等，從而改變這些狀態的值，（從而實現播放視頻）
還比如一個列表數據（數組），初始的狀態為空數組，在我們請求到服務器數據后，對初始數組做變化（狀態即數據），也可以再加載過來之前顯示一個正在加載的動畫
四 打包app
ionic platform add android
我在添加安卓平臺的時候出現了一個錯誤，The platform command has been renamed. To find out more, run:
ionic cordova platform --help
其實是ionic cli的版本過高，建議降級到ionic cli 2.x版本
執行ionic info可以查看當前的ionic相關的環境變量，我的如下
Your system information:
ordova CLI: 7.1.0
Ionic Framework Version: 3.9.2
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 3.1.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v8.9.1
Xcode version: Not installed
另外，你要使用高版本cli創建ionic1.x的項目，請使用
ionic start myApp blank --type=ionic1 創建一個空白的app項目
ionic start myApp tabs --type=ionic1 創建一個帶有tabs項目
ionic start myApp sidemenu --type=ionic1 創建一個帶有滑動的項目
解決方案：
確定你當前系統上ionic cli的版本，ionic -v,如果不是2.x版本，使用下面命令降級
npm uninstall -g ionic
npm cache clean
npm install -g ionic@2
ionic start you-project blank
如果出現: Error: Cannot find module 'q'的錯誤，本地下載安裝對應模塊即可，
【注】：--save --save-dev的區別，前者是向package.json里面添加項目發布所依賴的模塊，后者是添加自動化構建，轉譯等所要依賴的模塊
1 打debug包
在工程目錄下執行cordova build android， 會在xxx\platforms\android\build\outputs\apk下生成android-debug.apk
這種命令生成的apk是用于調試的。
【出現的問題】：grade相關錯誤
【解決方法】：添加環境變量 _JAVA_OPTIONS = -Xmx512M
安裝到手機
2 連接手機或者打開模擬器，在xxx\platforms\android\build\outputs\apk下打開命令窗口執行adb install android-debug.apk就能將apk安裝在手機或者模擬器上了。
2 兩種打包的版本
一種是debug調試版，一種是release發布版
1 打包debug調試版
在工程目錄下執行ionic build android，生成的apk就是debug調試版本
2 打包release發布版
在工程目錄下執行ionic build andorid --release，生成的apk就是release發布版本。
如果沒有配置簽名文件則默認只生成android-release-unsigned.apk，沒有簽名的apk。release版本是必須有簽名才能在手機上運行。
3 生成簽名
keytool -genkey -v -keystore name.jks -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
name.jks，name可以自定義，jks是Android studio生成的簽名文件的后綴，這里默認使用jks也可以；
alias_name是別名，也是自定義的
具體訪問：http://www.lxweimin.com/p/dfd98ad47af1
四 出現的問題總結
1 ## 執行ionic build android (或cordova build android)打包時報錯的解決方案
錯誤如下：
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
解決方案：
- 1、手動下載gradle
gradle-x.x-bin.zip （x.x代表版本）
根據需要下載某一版本
地址：
(https://services.gradle.org/distributions)
- 2、添加環境變量
PATH=C:\Program Files\gradle-x.x\bin
- 3、關閉cmd或powershell窗口
- 4、重新打開，輸入gradle -v，查看gradle安裝成功與否
- 5、重新build
2 ##
https://stackoverflow.com/questions/44263477/failed-to-fetch-platform-cordova-android6-2-2
ionic serve 報【ionic-app-scripts' 不是內部或外部命令 】問題解決
1、cd至項目路徑 輸入命令：npm install @ionic/app-scripts@latest --save-dev
運行后，繼續報錯，下拉查看錯誤信息后,有提示 “This usually happens because your environment has changed since running 'npm install'. Run 'npm rebuild node-sass' to build the binding for your current environment.”
2、按提示 在項目路徑下輸入：npm rebuild node-sass
3、重試ionic serve，成功！問題解決！
2
它提示的很明顯了：npm WARN Invalid name: "lockeroots的手記"，無效的name字符，不要用中文
