ionic4+angular6 混合移動開發 capacitor cordova Xcode 命令列工具 Command Line Tools
首先要更新或者安裝 ionic cli
npm install -g ionic
建立專案
ionic start ionic-angular tabs --type=angular
–type=angular 是需要多加的引數，現在官方只整合好了angualr 或許以後就會有 --type=vue or --type=react 呢
新建好專案後你會發現，與ionic2 ionic3專案 它的目錄結構變了。在ionic4 ，已更改為遵循每個受支援框架的建議設定。例如，如果某個應用程式正在使用Angular，那麼該專案結構將與Angular CLI應用程式完全相同。
這是新建好後的目錄結構，有angular專案經驗的開發人員來說，這應該非常熟悉。
命令跑起來
npm run start
開啟 http://localhost:4200
圖一專案結構
圖二跑起來在瀏覽器的效果圖
本文不會詳細介紹如何配置android java 環境，
不會詳細介紹如何配置ios appid以及簽名等，
在看下面內容前，可能你需要有懂得 使用cordova 打包移動應用程式。
android 環境以及 cordova 相關知識請翻我的以前等文章，這裡就不詳細說明了。
使用 cordova 構建移動應用程式
這裡只展示打包ios ipa
首先開啟config.xml檔案並修改id，id即為你ios開發者中心中的 appid
ionic build
ionic cordova prepare ios
xcode開啟MyApp.xcodeproj，
選擇開發團隊自動簽名後，手機連線電腦，xcode直接執行安裝完成，開啟app 看效果。
使用 Capacitor 構建移動應用程式
新建的專案確保能夠跑起來後，比如說我專案已經添加了 cordova 就不能再使用Capacitor構建了。
這裡展示的是如何打包android apk
首先，你必須安裝Java 8 JDK並將其設定為預設 ，切記Java 9目前無法執行。
Android開發需要安裝Android Studio的Android SDK。Android Studio不是必需的，可以僅使用Android CLI工具構建和執行應用程式，但用android studio 它將使構建和執行應用程式變得更加容，所以官方是強烈建議安裝的。當前Capacitor團隊的目標是API21或更高，即Android 5.0（Lollipop）或更高版本。所以捏，意思是不支援4的咯，所以使用Capacitor的，要注意了。此外，Capacitor還需要安裝Chrome版本50或更高版本的Android WebView。
終端執行命令
ionic build
ionic capacitor add android
然後開啟android studio，你要等待一會，android studio 會同步並更新Gradle。。 更新後，變可以編譯或者跑在模擬器或者手機上。
這裡是展示如何打包ios ipa
ionic build
ionic capacitor add ios
在使用capacitor打包ios ipa的時候出現了很多問題。
可能出現的問題：
問題一
cocoapods is not installed
在capacitor官網有介紹到需要Node v8.6.0或更高版本，以及NPM 5.6.0+版本。
而且在對於構建iOS應用程式，Capacitor需要具有Xcode 9或更高版本的Mac。
解決方案：
安裝cocoapods，並且要更新本地儲存庫
sudo gem install cocoapods
pod repo update
問題二
✔ Installing iOS dependencies in 15.36s ✔ Adding native xcode project in: /Users/huangenai/Desktop/test/ionic-angular/ios in 221.25ms ✔ add in 15.58s ✔ Copying web assets from www to ios/App/public in 830.41ms ✔ Copying native bridge in 1.47ms ✔ Copying capacitor.config.json in 4.50ms ✔ copy in 849.44ms ✔ Updating iOS plugins in 5.48ms Found 0 Capacitor plugins for ios: ✖ Updating iOS native dependencies: ✖ update ios: [error] Analyzing dependencies Fetching podspec for `Capacitor` from `../../node_modules/@capacitor/ios` Fetching podspec for `CapacitorCordova` from `../../node_modules/@capacitor/ios` [!] Unable to find a specification for `GCDWebServer (~> 3.0)` depended upon by `Capacitor` [ERROR] An error occurred while running subprocess capacitor. capacitor add ios exited with exit code 1.
問題原因：我一開始沒看清楚需要更新本地庫
pod repo update
但是在更新本地庫的時候出現問題
fatal: 有歧義的引數 'HEAD'：未知的版本或路徑不存在於工作區中。 使用 '--' 來分隔版本和路徑，例如： 'git <命令> [<版本>...] -- [<檔案>...]' Updating spec repo `master` fatal: 有歧義的引數 'HEAD'：未知的版本或路徑不存在於工作區中。 使用 '--' 來分隔版本和路徑，例如： 'git <命令> [<版本>...] -- [<檔案>...]' fatal: 有歧義的引數 'HEAD'：未知的版本或路徑不存在於工作區中。 使用 '--' 來分隔版本和路徑，例如： 'git <命令> [<版本>...] -- [<檔案>...]' $ /usr/local/bin/git -C /Users/huangenai/.cocoapods/repos/master fetch origin --progress remote: Enumerating objects: 127, done. remote: Counting objects: 100% (127/127), done. remote: Compressing objects: 100% (91/91), done. remote: Total 2561792 (delta 55), reused 35 (delta 35), pack-reused 2561665 接收物件中: 100% (2561792/2561792), 585.57 MiB | 2.17 MiB/s, 完成. 處理 delta 中: 100% (1501235/1501235), 完成. 來自 https://github.com/CocoaPods/Specs * [新分支] backz -> origin/backz * [新分支] master -> origin/master * [新分支] predates_sharding_branch -> origin/predates_sharding_branch * [新分支] swift_version_support -> origin/swift_version_support * [新標籤] v0.32.1 -> v0.32.1 * [新標籤] 20161019 -> 20161019 $ /usr/local/bin/git -C /Users/huangenai/.cocoapods/repos/master rev-parse --abbrev-ref HEAD fatal: 有歧義的引數 'HEAD'：未知的版本或路徑不存在於工作區中。 HEAD 使用 '--' 來分隔版本和路徑，例如： 'git <命令> [<版本>...] -- [<檔案>...]' [!] CocoaPods was not able to update the `master` repo. If this is an unexpected issue and persists you can inspect it running `pod repo update --verbose`
解決方案
首先我們將源改為國內的地址
ps：網上介紹的都是用淘寶的源，一開始我也是設定淘寶的源，一直報錯。原因是中國的ruby映象交由社群來維護了，一開始是重定向到http://gems.ruby-china.org/，後來社群域名改了 最終ruby的映象地址是 這個https://gems.ruby-china.com
Error fetching https://ruby.taobao.org/: bad response Not Found 404
所以先去掉預設的源設定為國內社群維護的源。
//去掉預設更新源 $ gem sources --remove https://rubygems.org/ //使用國內社群維護的源 $ gem sources -a https://gems.ruby-china.com
再更新本地庫
pod repo update
更新完本地庫後， Unable to find a specification for `GCDWebServer (~> 3.0)` depended upon by `Capacitor` 這個問題算是解決了 。
問題三
✖ update ios:
[error] Analyzing dependencies
Fetching podspec for `Capacitor` from `../../node_modules/@capacitor/ios`
Fetching podspec for `CapacitorCordova` from `../../node_modules/@capacitor/ios`
Downloading dependencies
Installing Capacitor 1.0.0-beta.7 (was 0.0.99)
Installing CapacitorCordova 1.0.0-beta.7 (was 0.0.99)
Using GCDWebServer (3.4.2)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed.
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
[ERROR] An error occurred while running subprocess capacitor.
capacitor add ios exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
解決方案： 安裝xcode 命令列工具
詳細請看 Xcode 命令列工具 Command Line Tools
問題四
[error] "ios" platform already exists. To add a new "ios" platform, please remove "/Users/huangenai/Desktop/test/ionic-angular/ios" and run this command again. WARNING! your native IDE project will be completely removed. [ERROR] An error occurred while running subprocess capacitor. capacitor add ios exited with exit code 1. Re-running this command with the --verbose flag may provide more information.
解決方案：
移除專案下的ios即可，再從新執行ionic capacitor add ios。
漂亮終於終於解決了層層問題後可以了，接下來就簡單了。
xcode 開啟App.xcodeproj，連線上手機，選擇開發團隊，自動簽名後，run便直接執行在手機上了。
切記找到檔案capacitor.config.json，appId 要改成你自己在開發者中心新增的的appid。
下圖為android 模擬器跑起來效果圖
使用Capacitor構建移動應用，出現以上問題，很大原因是我沒有完完全全的去了解並安裝好Capacitor。
你需要了解Capacitor。詳細請看官方文件 https://capacitor.ionicframework.com
此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。
如果對您有幫助請動動滑鼠右下方給我來個贊，您的支援是我最大的動力。