ionic4+angular6 混合移動開發 capacitor cordova

首先要更新或者安裝 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有些瞭解

http://www.javashuo.com/article/p-othzexyc-a.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

 http://www.javashuo.com/article/p-othzexyc-a.html

 

此隨筆乃本人學習工做記錄，若有疑問歡迎在下面評論，轉載請標明出處。

若是對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。