前言
ionic V3是基于cordova和angular的混合開(kāi)發(fā)平臺(tái)，目前最新版V4
ionic v2/v3差別不大? v1沒(méi)有基于angular v4可支持angular vue等
ionic v3官網(wǎng)文檔地址? https://ionicframework.com/docs/v3/
安裝環(huán)境
1. nodejs v10.16.3
安裝 下載地址https://nodejs.org/dist/選擇LTS版本下載安裝
校驗(yàn) 打開(kāi)CMD執(zhí)行npm -version 和 node -version
2. ionic
安裝 cmd執(zhí)行 npm i -g ionic@4.6.0
校驗(yàn) cmd執(zhí)行 ionic -version
3.cordova
安裝 cmd執(zhí)行 npm i -g cordova@8.0.0
校驗(yàn) cmd執(zhí)行 cordova -version
4.nrm 切換npm倉(cāng)庫(kù)地址工具
安裝 npm i -g nrm
使用 nrm ls? 查看可切換倉(cāng)庫(kù)名
nrm use 倉(cāng)庫(kù)名? 使用指定倉(cāng)庫(kù)名倉(cāng)庫(kù),比如taobao
添加2.245上的npm私服地址
添加 nrm add 2.245 http://192.168.2.245:8083/repository/npm-group
切換 nrm use 2.245
查看 nrm config get registry
5,node-sass
項(xiàng)目安裝依賴(lài)時(shí)會(huì)安裝node-sass，它的binding. node文件經(jīng)常404或下載失敗
所以 配置系統(tǒng)環(huán)境變量
SASS_BINARY_PATH: D:\work\win32-x64-64_binding.node
指定binding. node文件（提供的node文件適用于windows64位nodejsv10.16.3）
提供的node文件下載地址ionic下的node文件
6，android環(huán)境
6.1，jdk配置
jdk 解壓jdk1.8.0_144.zip到自定義目錄下
配置系統(tǒng)環(huán)境變量
變量名：JAVA_HOME
變量值：自定義目錄\jdk1.8.0_91? ? ? ? // 要根據(jù)自己的實(shí)際路徑配置
變量名：CLASSPATH
變量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;? ? ? ? //記得前面有個(gè)"."
變量名：Path
變量值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
6.2，SDK
解壓android_sdk到自定目錄
配置環(huán)境變量
在系統(tǒng)變量新建：ANDROID_HOME，對(duì)應(yīng)變量值為：（sdk安裝路徑根目錄）
path中添加%ANDROID_HOME%\tools 和 %ANDROID_HOME%\platform-tools
校驗(yàn) cmd執(zhí)行adb devices檢測(cè)連接到電腦的手機(jī)(手機(jī)需要打開(kāi)USB調(diào)試)
以管理員身份運(yùn)行sdk目錄中的sdk manager
取消所有勾選，重新勾選tools所有，build-tools28.0.3，安卓28中勾選platform28
點(diǎn)下邊下載，彈框全部選同意，開(kāi)始下載
6.3,gradle構(gòu)建工具
解壓gradle到指定目錄，配置系統(tǒng)環(huán)境變量
GRADLE_HOME=解壓的gradle根目錄
path中添加%GRADLE_HOME%\bin
檢測(cè)gradle -version
6.4，adb 簡(jiǎn)單使用
adb tcpip 5555 連接數(shù)據(jù)線狀態(tài)下開(kāi)啟無(wú)線模式(手機(jī)重啟需要開(kāi)啟)
adb connect 手機(jī)ip:5555 連接指定ip的無(wú)線模式下的手機(jī)終端
adb shell 進(jìn)入手機(jī)shell，如果提示close 則使用adb reconnect重連
多個(gè)設(shè)備的情況下，所有命令必須加? -s 設(shè)備名
adb install **.apk 安裝app
7，ios環(huán)境
必須MAC系統(tǒng)，安裝Xcode 7 or higher
8.開(kāi)發(fā)常用命令
官方地址 https://ionicframework.com/docs/v3/cli/commands.html
8.1.創(chuàng)建項(xiàng)目 ionic start 項(xiàng)目名
參數(shù)? --type ionic1? ? ? ? 創(chuàng)建ionic v1項(xiàng)目
? --type ionic-angular 創(chuàng)建ionic v3項(xiàng)目
示例選項(xiàng)有: tabs 一個(gè)具有簡(jiǎn)單選項(xiàng)卡式界面的啟動(dòng)項(xiàng)目
blank 一個(gè)空白項(xiàng)目
sidemenu 一個(gè)菜單側(cè)邊項(xiàng)目
super 一個(gè)完整示例
conference 演示realworld應(yīng)用程序的項(xiàng)目
tutorial 包含引導(dǎo)的示例
aws aws手機(jī)啟動(dòng)示例
其他選項(xiàng)根據(jù)命令行提示來(lái)
? Install the free Ionic Appflow SDK and connect your app? (Y/n) 選擇n
創(chuàng)建好進(jìn)入項(xiàng)目根目錄執(zhí)行 ionic serve 瀏覽器瀏覽
8.2.運(yùn)行已有/新項(xiàng)目到設(shè)備
1.使用nrm use taobao切換npm倉(cāng)庫(kù)
2.項(xiàng)目目錄執(zhí)行npm i 安裝依賴(lài)，可重復(fù)執(zhí)行保證依賴(lài)成功安裝
3.添加平臺(tái)ionic cordova platform add android@8.0.0
已存在平臺(tái)，刪除平臺(tái)后重新添加
8.3.瀏覽器運(yùn)行
ionic serve 可在瀏覽器8100端口運(yùn)行瀏覽項(xiàng)目，涉及插件調(diào)用沒(méi)處理的需要在真實(shí)設(shè)備運(yùn)行
8.4.平臺(tái)管理
ionic cordova platform remove android/ios 刪除
ionic cordova platform add android@8.0.0/ios@5.5.0? 添加，版本不同生成的平臺(tái)目錄結(jié)構(gòu)可能不同
查看項(xiàng)目根目錄是否有platforms目錄，下邊有android或ios等目錄
添加android@8.0.0后將xml/network_security_config.xml覆蓋掉項(xiàng)目resource/android/xml中的
8.5.運(yùn)行到android
adb devices 檢測(cè)設(shè)備有沒(méi)有連接上
ionic cordova run android -lc
-lc 熱部署項(xiàng)目 到已連接設(shè)備(多個(gè)設(shè)備需要指定-s 設(shè)備名)
8.6.運(yùn)行到ios
ionic corodva prepare ios 準(zhǔn)備代碼到platforms下的指定平臺(tái)目錄
在mac使用Xcode打開(kāi)platforms/ios項(xiàng)目
具體查看https://ionicframework.com/docs/v3/intro/deploying/
9.打包
1.可以基于nodejs編寫(xiě)js腳本配合package.json的scripts中配置命令執(zhí)行腳本和命令
nodejs 腳本可復(fù)制/刪除/替換/操作源碼文件配置文件等
比如：大部分項(xiàng)目中配置
"scripts": {
"builddebug": "node build/build.js build debug && ionic cordova build android --prod && node build/build.js exapk debug",
"buildrelease": "node build/build.js build release && ionic cordova build android --prod --release && node build/build.js exapk release",
分解:
node build/build.js build debug 執(zhí)行build/build.js命令 傳參build 和debug
ionic cordova build android --prod 打包安裝的命令
node build/build.js exapk debug 執(zhí)行build/build.js命令 傳參exapk和debug
使用直接 npm run buildrelease 就會(huì)打包正式版并且重命名打包出來(lái)的apk文件，并復(fù)制到build目錄，具體可看build.js腳本，自己寫(xiě)的,可參考
2.android
ionic cordova build android --prod --release 不借助js腳本執(zhí)行成功后需要在平臺(tái)對(duì)應(yīng)目錄下去找打包出來(lái)的apk
android打包簽名
sdk環(huán)境包含的keytool生成簽名文件
參考: http://m.itdecent.cn/p/8b759b0a5c30 或 搜索android keytool使用
常用
//生成
keytool -genkey -keyalg RSA -keystore netbox.jks
//查看密鑰庫(kù)所有別名
keytool -list -keystore netbox.jks
//刪除別名
//keytool -delete -alias 別名 -keystore netbox.jks
//增加別名
keytool -genkeypair -alias 別名 -keystore netbox.jks
項(xiàng)目根目錄創(chuàng)建 build.json
參考cordova簽名配置 https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#signing-an-app
3.ios
使用xcode打開(kāi)platforms/ios項(xiàng)目后，完全按照ios項(xiàng)目使用Xcode打包發(fā)布即可
5.插件使用
管理
ionic cordova plugin add 插件id@版本
ionic cordova plugin remove 插件id
插件有依賴(lài)關(guān)系，刪除的時(shí)候有可能提示先刪除依賴(lài)者
相關(guān)
ionic插件文檔https://ionicframework.com/docs/v3/native/
ionic插件基于cordova的，插件歸根揭底還是corodva插件，ionic提供了ts定義
cordova插件文檔在
https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html
6.替換圖標(biāo)和啟動(dòng)屏
1.替換項(xiàng)目resources中的icon(1024×1024px)和splash(2732×2732)
2.安裝cordova-res
執(zhí)行npm i -g cordova-res? 因?yàn)樵摴ぞ咭蕾?lài)底層圖像處理庫(kù)，可參考下邊問(wèn)題記錄處理安裝過(guò)程中出現(xiàn)的問(wèn)題
3.項(xiàng)目根目錄執(zhí)行，生成指定平臺(tái)不同尺寸的圖標(biāo)和啟動(dòng)屏
cordova-res android/ios
7.創(chuàng)建頁(yè)面，組件等
ionic generate [<type>] [<name>] 簡(jiǎn)寫(xiě) ionic g [<type>] [<name>]
type有component, directive, page, pipe, provider, tabs
示例: ionic generate page Login
ionic generate pipe MyFilterPipe
10.問(wèn)題記錄
? 1. no such file or directory, scandir '*\node_modules\node-sass\vendor'
? ? + 因?yàn)闆](méi)有成功安裝bind文件
? ? + 解決
? ? ? + SET SASS_BINARY_PATH=%cd%/build/win32-x64-64_binding.node && npm rebuild node-sass
? ? ? + 查看node-modeles下的node-sass有了vendor/win32-x64-64目錄
? ? ? + 將build中的win32-x64-64_binding.node復(fù)制到vendor/win32-x64-64目錄，改名binding.node
? 2. -lc 運(yùn)行到手機(jī)的app加載報(bào)錯(cuò)ERR_ClEARTEXT_NOT_PERMITTED
? ? ? + 因?yàn)槭謾C(jī)系統(tǒng)9.0的安全限制
? ? ? + 解決
? ? ? ? + 將xml/network_security_config.xml覆蓋掉項(xiàng)目resource/android/xml中的
? 3.組件加載不進(jìn)來(lái)，執(zhí)行命令ionic cordova prepare android
? 4.安裝依賴(lài)出現(xiàn)cordova-res裝不上去的，可以先在package.json dev依賴(lài)中刪掉cordova-res
? 5.ionic cordova resource 503錯(cuò)誤不能用了
因?yàn)樾掳姹継ionic/cli使用了cordova-res
解決
? ? 不用升級(jí)ionic cli 直接在項(xiàng)目安裝cordova-res
? ? 執(zhí)行npm i cordova-res出現(xiàn)錯(cuò)誤，按照下邊的步驟解決
? ? cordova-res依賴(lài)sharp sharp使用到libvips libvips需要使用node-gyp現(xiàn)場(chǎng)編譯源碼安裝
? ? 一，libvips從github下載問(wèn)題
? ? info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-win32-x64.tar.gz
? ? ERR! sharp getaddrinfo ENOENT github-production-release-asset-2e65be.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com:443
? ? 解決:
? ? 1.使用 npm config get chache查看node緩存目錄
默認(rèn)在C:\Users\用戶(hù)名\AppData\Roaming\npm-cache\_libvips
? ? 2.手動(dòng)下載https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-win32-x64.tar.gz
? ? 3.放在node緩存目錄下的_libvips中
? ? 二，node-gyp.js問(wèn)題
? ? 1.npm install -g node-gyp
? ? 2.npm config set node_gyp "node 您的npm安裝目錄\node_modules\node-gyp\bin\node-gyp.js"
? ? 三，node-gyp在win10上使用提示找不到visual studio什么的
? ? 執(zhí)行npm i -g windows-build-tools
? ? 會(huì)重啟多次
? ? 再次安裝
? ? 執(zhí)行cordova-res -help
