iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
3
Modern Web

Angular 2 之 30 天邁向神乎其技之路系列 第 24

[Day 24] Angular 2 + Ionic = Mobile App ( 4 ) 發布 App

  • 分享至 

  • xImage
  •  

前言

我們在電腦上用 ionic serve 測試好我們的 App 之後,最後仍然需要拿到實際裝置上測試,不僅是因為到時候本來就是要給手機使用的,並且很多的 Native Plugin 只有在裝置上才能真正的使用。

這邊以 IOS、Android 為例來示範如何發布 App。

此外完成一個 App 還包括他的圖示以及他開始畫面。

Build/Run the App

Android

要先安裝 Android SDK 跟 Java,細節可以看這邊

ionic platform add android

這樣會在 platforms 增加一個 android 資料夾,並加入一些建立 android app 需要的資源。

ionic build android

然後建立一個 APK,放在platforms/android/build/outputs

ionic run android --device

確定你的手機連上電腦,開發者人員的除錯模式要打開,就可以裝上手機了。也可以跳過 build 直接 run

IOS

必須使用 Mac 且有安裝 Xcode

npm install -g ios-deploy
npm install -g ios-sim version

先安裝一些套件

ionic platform add ios
ionic build ios
ionic run ios

步驟跟 Andoird 一樣,檔案會被輸出到 platforms/ios/build/emulator

成功 Build 和 Run 會看到以下結果

Icon

我們還缺 App 圖示跟開始畫面

我簡單畫了一下,大概長這樣

Icon 規格是 pngaipsd 檔案,至少 192*192 px,把畫好的檔案名稱取為 icon.pngicon.aiicon.psd 放入 resources 資料夾,接著輸入

ionic resources --icon

Ionic 就會自動幫我們把各種大小的圖示產生出來,並在 config.xml 文件自動更新

Splash

程式開啟畫面 (splash) 最後大概長這樣

Splash 規格是 pngaipsd 檔案,至少 2208*2208 px,把畫好的檔案名稱取為 splash.png、splash.ai 或 splash.psd 放入 resources 資料夾,接著輸入

ionic resources --splash

Ionic 就會自動幫我們把各種大小的開始畫面(包括橫的、直的)產生出來,並在 config.xml 文件自動更新


上一篇
[Day 23] Angular 2 + Ionic = Mobile App ( 3 ) 實作 Todo List
下一篇
[Day 25] Angular 2 事先編譯 Ahead-of-Time (AoT)
系列文
Angular 2 之 30 天邁向神乎其技之路31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言