官方文檔#
環境要求#
- node + npm
- git
Android 環境#
- Android Studio
打開 https://developer.android.com/studio?hl=zh-cn , 下載並安裝 - Android SDK
- 開發 Android 應用程序需要安裝一些 Android SDK 包。SDK 版本 API 22 或 更高。
- 在 Android Studio 中，從菜單中打開 Tools -> SDK Manager，然後在 SDK Platforms 選項卡中安裝要測試的平台版本
- 只需要安裝一個 api 版本。Android 10 (API 30) Android 11 (API 31) Android 13 (API 33)
VUE 項目搭建#
安裝腳手架#
npm install -g @ionic/cli
新建項目#
ionic start myApp blank --type vue
去除項目中的 ts#
- 移除 ts 依賴。
npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc - .ts 文件改為.js 文件。
- 修改 index.html 文件中
- 刪除 ts 相關 eslint 規則。.eslintrc.js 文件中 @vue/typescript/recommended @typescript-eslint/no-explicit-any: ‘off’。
- 刪除 Array 和 RouteRecordRaw 的導入。
- 刪除 src/shims-vue.d.ts。
- 刪除
- 刪除 tsconfig.json 文件。
- 在 package.json 文件中修改腳本，"build": "vue-tsc && vite build" -> "build": "vite build"。
- 安裝 terser npm i -D terser。(terser 用於將 js 代碼壓縮)
構建原生 APP#
- 把 Capacitor 添加到你的項目:
ionic integrations enable capacitor - 構建項目，選中對應的平台
ionic build
ionic cap add ios
ionic cap add android - 我們使用標準的原生 IDE（Xcode 和 Android Studio）來打開、構建和運行 iOS 和 Android 項目:
ionic cap open ios
ionic cap open android
Ionic 組件庫使用#
- 文檔地址
UI Components | Ionic Documentation - 項目中添加底部 tabs 欄
android 運行報錯 - 路徑不能有中文名
- 配置 android_home 環境變量
- 重新 build 重新運行
Capacitor 常用命令#
- npx cap copy
將 web 應用程序構建和 Capacitor 配置文件複製到本地平台項目中。每次更改 web 應用程序或更改配置值時都運行此程序。 - npx cap update
更新 package.json 中引用的本機插件和依賴項。 - npx cap sync
此命令運行 copy，然後 update。 - npx cap ls
列出所有已安裝的 Cordova 和 Capacitor 插件。
Ionic 常用命令#
- ionic build
構建 Web 資源並為任何平台目標準備您的應用程序 - ionic serve
啟動本地開發伺服器進行應用程序開發 / 測試 - ionic capacitor open
運行項目在對應的編輯器中 (Xcode for iOS, Android Studio for Android)
Ionic 組件庫使用#
- ion-router-outlet
類似與 - Ion-page
顯示 tab 欄頁面必須要用
Android studio 項目運行報錯的解決方法#
- 檢查項目路徑是否有中文。
- 配置 ANDROID_HOME 環境變量。
- 重新 build 重新運行。
學情 APP 項目地址#
https://codeup.aliyun.com/64004113b6809992bb8f4e37/zyy-xueqing/zyy-xueqing-app-front
Android Studio 配置代理#
- 在主菜單中，依次選擇 "File"（文件） > "Settings"（設置）
- 在設置對話框中，展開 "Appearance & Behavior"（外觀與行為）並選擇 "System Settings"（系統設置）。
- 在右側面板中，選擇 "HTTP Proxy"（HTTP 代理）。