首先要更新或者安裝 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以及簽名等，
你要先有android，java環境或者一台mac 以及 cordova 相關知識請翻我的以前等文章，這里就不詳細說明了。
使用 cordova 構建移動應用程序
這里只展示打包ios ipa
首先打開config.xml文件並修改id，id即為你ios開發者中心中的 appid
ionic build
ionic cordova prepare ios
xcode打開MyApp.xcodeproj，
選擇開發團隊自動簽名后，手機連接電腦，xcode直接運行安裝完成，打開app 看效果。
使用 Capacitor 構建移動應用程序
新建的項目確保能夠跑起來后，比如說我項目已經添加了 cordova 就不能再使用Capacitor構建了。
有必要先了解capacitor 才能更好的使用capatitor構建移動應用程序，建議先看看這篇博客對capacitor有些了解
https://www.cnblogs.com/huangenai/p/9887448.html
這里展示的是如何打包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
ionic capacitor run ios
連接上手機，選擇開發團隊，自動簽名后，run便直接運行在手機上了。
切記找到文件capacitor.config.json，appId 要改成你自己在開發者中心添加的的appid。
下圖為android 模擬器跑起來效果圖
使用Capacitor構建移動應用，出現以上問題，很大原因是我沒有完完全全的去了解並安裝好Capacitor。
你需要了解Capacitor。詳細請看官方文檔 https://capacitor.ionicframework.com
2018年11月2號更新
后面我對Capacitor去全面對學習了一番，寫下這篇博客介紹關於Capacitor
https://www.cnblogs.com/huangenai/p/9887448.html
此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。
如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。