iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Mobile Development

純粹沒有寫過行動,Ionic 學習中...系列 第 7

Capacitor & 在 Android 模擬器跑 APP

  • 分享至 

  • xImage
  •  

Android 環境設置

Java JDK 安裝 (我自己安裝的是最新版的 jdk-15_windows-x64_bin.exe)
https://www.oracle.com/tw/java/technologies/javase-downloads.html

Android Studio
https://developer.android.com/studio

基本上 Android Studio 一直下一步,下一步到底就好了。

建立跟啟動模擬器

右上角 AVD Manager

按下 + Create Virtual Device...

選擇你的手機型號,我這邊選擇 Pixel 3 XL,然後 Next ...

選擇系統的 Image ,我這邊選擇 Android 8.0

授權接受

安裝中

Finish

按下綠色的三角形啟動模擬器

我的 Pixel 3 XL 模擬器

Capacitor

Capacitor 可以讓你的 Web Apps 在 iOS、Android、Electron、Web 有更好的原生執行環境。也提供了存取 native SDK 跟 native API 容易使用的介面。
利用 Capacitor ,Web開發者可以使用單一 code base (程式庫,這邊應該是指 Javascript、Angular、React..),去建置 iOS、Android、PWA..等等的網頁技術。
Capacitor 是為了幹掉取代 Cordova ? 不!!! 官網表示他是 Cordova 跟PhoneGap 的精神繼承者!!!!!!

在 Android 模擬器跑 APP

如果你的專案在 ionic start 建立的時候 Integate your new app with Capacitor to target native iOS and Android? (y/N) 沒有選 Yes 。或是你的 ionic 專案是很久之前的,沒有裝過 Capacitor 。 可以用下列指令啟用他。

ionic integrations enable capacitor

在使用 Capacitor 之前,要先將 ionic 專案建置。下面的指令,他會把整個 ionic 專案建置到 www 中。

ionic build 

使用下列的指令建立你使用的手機平台,我這邊就是 Android 。 他會在你的專案中產生一個 Android 的資料夾。

ionic cap add android 

以下指令會再 build 一次,然後將資料夾 www 同步到 Android 的資料夾中。

ionic cap sync android

開啟 Android Studio。如果已經開啟了,就不需要了。

ionic cap open android

然後就等 Android Studio 建置一會,然後就 Run App。
結果


上一篇
List & 無限捲軸
下一篇
發布 .apk & 安裝在 Android 手機上
系列文
純粹沒有寫過行動,Ionic 學習中...30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言