為何捐款
API 瀏覽器
升級指南
新功能!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
延遲載入 - 程式碼分割
處理資源
啟動檔案
預先提取功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 的狀態管理
使用 Vuex 的狀態管理
Linter
測試與稽核
開發行動應用程式
Ajax 請求
公開開發伺服器
Quasar CLI with Webpack - @quasar/app-webpack
發佈到商店

So, you’ve finished working on your Mobile App. Now it’s time to deploy it. Let’s learn how.

Android 發佈

To generate a release build for Android, we can use the following Quasar CLI command

$ quasar build -m capacitor -T android

This will compile the web assets (and if “–ide” param is also specified, it will open up Android Studio IDE where you need to trigger a release build).

Next, we find our unsigned APK file generated by the Android Studio. Now, we need to sign the unsigned APK and run an alignment utility on it to optimize it and prepare it for the app store. If you already have a signing key, skip these steps and use that one instead.

Let’s generate our private key using the keytool command that comes with the JDK. If this tool isn’t found, refer to the installation guide

$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 20000

You’ll first be prompted to create a password for the keystore. Then, answer the rest of the nice tool’s questions and when it’s all done, you should have a file called my-release-key.keystore created in the current directory.

WARNING

Make sure to save this file somewhere safe and secure, if you lose it you won’t be able to submit updates to your app!

Next, we need to *zip align* and to sign the APK. For this we use a couple of applications that can be found in the Android SDK build-tools folder, something like /path/to/Android/Sdk/build-tools/VERSION/. For example, on OS X with Android Studio installed, zipalign is in ~/Library/Android/Sdk/build-tools/VERSION/.

To zip align the APK

$ zipalign -v 4 <path-to-same-apk-file> HelloWorld.apk

To sign the APK

apksigner sign --ks my-release-key.keystore --ks-key-alias alias_name <path-to-unsigned-apk-file>

Now we have our final release binary called HelloWorld.apk and we can release this on the Google Play Store for all the world to enjoy!

(There are a few other ways to sign APKs. Refer to the official Android App Signing documentation for more information.)

Google Play 商店

Now that we have our release APK ready for the Google Play Store, we can create a Play Store listing and upload our APK.

To start, you’ll need to visit the Google Play 商店開發人員控制台 and create a new developer account. Unfortunately, this is not free. However, the cost is only $25 compared to Apple’s $99.

Once you have a developer account, you can go ahead and click “Publish an Android App on Google Play”.

Then, you can go ahead and click the button to edit the store listing (We will upload an APK later). You’ll want to fill out the description for the app.

When you are ready, upload the APK for the release build and publish the listing. Be patient and your hard work should be live in the wild!

Updating your App

As you develop your app, you’ll want to update it periodically.

In order for the Google Play Store to accept updated APKs, you’ll need to bump the app version (from /package.json or from the /quasar.config file > capacitor > version, then rebuild the app for release.

iOS 發佈

First, you need to enroll in Apple 開發人員計劃. As with Google, if you have a personal account with Apple, you can create an additional one for your applications.

Connecting Xcode with your developer account

After you receive your developer status, open Xcode on your Mac and go to Preferences > Accounts. Add your account to Xcode by clicking the + button on the lower left-hand side and follow the instructions.

Signing

Now that you linked Xcode with your developer account, go to Preferences > Accounts, select your Apple Id on the left-hand side and then click the View Details button shown on the previous image.

Click the Create button next to the iOS Distribution option.

You can learn more about maintaining your signing identities and certificates from the official documentation.

Setting up the app identifier

Next, through the Apple Developer Member Center we’ll set up the app ID identifier details. Identifiers are used to allow an app to have access to certain app services like for example Apple Pay. You can login to Apple Developer Member Center with your Apple ID and password.

Once you’re logged in you should choose Certificates, Identifiers, and Profiles option. Also select the Identifiers option under the iOS Apps. Then select the + button in order to add a new iOS App ID.

Then you’ll have to set the name of your app, use the Explicit App ID option and set the Bundle ID to the value of the id in your capacitor.config.json.

Additionally, you’ll have to choose any of the services that need to be enabled. For example, if you use Apple Pay or Wallet in your app, you need to choose those option.

您可以從官方文件中了解更多關於註冊 App ID 的資訊。

建立 App 列表

Apple 使用 iTunes Connect 來管理 App 提交。登入後,您應該選擇「My Apps(我的 App)」按鈕,然後在下一個畫面中選擇 + 按鈕,它位於 iTunes Connect My Apps 標題的正下方。

這將在下拉選單中顯示三個選項,您應該選擇「New App(新增 App)」。 之後會出現彈出視窗,您必須在其中選擇應用程式的名稱、平台、主要語言、Bundle ID 和 SKU。

完成後,點擊「Create(建立)」按鈕,您將看到一個畫面,您必須在其中設定一些基本選項,例如「Privacy Policy URL(隱私權政策網址)」、「category(類別)」和「sub category(子類別)」。

現在,在我們填寫列表中的所有內容之前,我們先建置我們的 App 並使用 Xcode 上傳它。 稍後您將回到這裡完成列表。

您可以從官方文件中了解更多關於在 iTunes Connect 中管理您的 App 的資訊。

為生產環境建置 App

$ quasar build -m capacitor -T ios

這將編譯 Web 資源(如果也指定了 “–ide” 參數,它將打開 Xcode,您需要在其中觸發發佈版本建置)。

在 Xcode 中設定專案

一旦 Xcode 打開專案(需要 “–ide” 參數),您應該在一般檢視中看到關於您的 App 的詳細資訊。

您應該檢查 Bundle Identifier 是否已正確設定,使其與您先前在 App ID 中指定的值相同。 此外,請確保版本和建置編號正確。 「Team(團隊)」選項應設定為您的 Apple 開發者帳戶。 在「Deployment Target(部署目標)」下,您可以選擇您的應用程式將支援哪些裝置。

建立應用程式的封存檔

在 Xcode 中,選擇「Product(產品)」>「Scheme(架構)」>「Edit Scheme(編輯架構)」以打開架構編輯器。 接下來,從左側的列表中選擇「Archive(封存)」。 確保「Build Configuration(建置設定)」設定為「Release(發佈)」。

若要建立封存檔,請從專案編輯器中的「Scheme(架構)」工具列選單中選擇「Generic iOS Device(通用 iOS 裝置)」或您的裝置(如果它已連接到您的 Mac)(如果選擇模擬器,則無法建立封存檔)。

接下來,選擇「Product(產品)」>「Archive(封存)」,「Archive organizer(封存管理員)」將出現並顯示新的封存檔。

此時,您可以點擊 Upload to App Store...(上傳到 App Store...) 按鈕,如果一切順利,您將有一個已上傳的 App,剩下的唯一事情就是完成 iTunes Connect 列表並提交以供審核!

此時,您應該在您上傳封存檔後不久收到來自 iTunes Connect 的電子郵件,其中包含內容。

完成 App 列表流程

現在您應該回到 iTunes Connect 入口網站並登入。 接下來,點擊「APP STORE INFORMATION(APP STORE 資訊)」下方的左側的「Pricing and Availability(定價與供應狀態)」。

您不必擔心忘記插入任何關於您的應用程式的關鍵和必要資訊,因為如果您在所有詳細資訊都填寫完畢之前嘗試提交 App 進行審核,您將收到通知,告知您缺少哪些內容以及需要新增/變更哪些內容。

接下來,點擊左側的「1.0 Prepare for Submission(1.0 準備提交)」按鈕,如下圖所示。 當我們上傳我們的封存檔時,iTunes Connect 會自動判斷支援哪些裝置尺寸。 您需要為 iTunes Connect 偵測到的每個不同的 App 尺寸上傳至少一張螢幕截圖影像。

接下來,您必須插入「Description(描述)」、「Keywords(關鍵字)」、「Support URL(支援網址)」和「Marketing URL(行銷網址)」(可選)。

在「Build(建置)」區段中,您必須點擊 + 按鈕,並選擇在先前的步驟中透過 Xcode 上傳的建置版本。

接下來,您必須上傳圖示、編輯評級,並設定一些其他資訊,例如著作權和您的資訊。 請注意,您必須在此處上傳的圖示大小必須為 1024 x 1024 像素。 幸好,您可以使用第二個教學課程中的 splash.png。 如果您是唯一的開發者,那麼「App Review Information(App 審核資訊)」中的資料應該是您自己的。 最後,作為最後一個選項,您可以保留預設勾選的選項,即一旦您的 App 獲得批准,它將自動發佈到 App Store。

現在我們已經完成將所有詳細資訊新增到 App 列表中,我們可以按下「Save(儲存)」,然後按下「Submit for Review(提交以供審核)」。 最後,您將看到最後一個表單,您必須填寫它。

在您提交您的 App 進行審核後,您將在「My Apps(我的 App)」中看到它的狀態為「Waiting for review(等待審核)」,如下圖所示。 此外,在您提交您的 App 進行審核後不久,您將收到來自 iTunes Connect 的確認電子郵件,告知您的 App 正在審核中。

Apple 以人工審核流程為傲,這基本上意味著您的 App 可能需要幾天才能完成審核。 您將收到關於您的 App 狀態的任何問題或更新的通知。

更新 App

由於您可能希望在某些時候更新您的 App,您首先需要增加 App 版本(從 /package.json),然後重新建置 App 以進行發佈。 一旦 Xcode 打開,請再次遵循相同的步驟。

一旦您提交以供審核,您將必須再次等待審核流程。