yubopeng

yubopeng

前端开发
HomeArchives

ionic+capacitor 项目搭建

58
AI-generated summary
The document provides a guide for setting up an Ionic project using Vue and Capacitor for Android development. It outlines the necessary environment requirements, including Node.js, npm, Git, and Android Studio. To create a Vue project, you need to install the Ionic CLI, start a new project, and remove TypeScript dependencies. This involves changing file extensions from `.ts` to `.js`, modifying the `index.html`, and updating the ESLint configuration. After setting up the project, Capacitor is integrated, and the project is built for iOS and Android platforms. Common commands for Capacitor and Ionic are listed, such as `npx cap copy`, `ionic build`, and `ionic serve`, which facilitate building and running the application. Additionally, it includes troubleshooting tips for Android Studio, such as ensuring the project path does not contain Chinese characters and configuring the `ANDROID_HOME` environment variable. Lastly, it provides a link to a sample project and instructions for setting up a proxy in Android Studio.

官方文档#

  1. https://ionicframework.com/
  2. https://capacitorjs.com/
  3. 中文文档 https://ionic.nodejs.cn/

环境要求#

  • node + npm
  • git

Android 环境#

  1. Android Studio
    打开 https://developer.android.com/studio?hl=zh-cn , 下载并安装
  2. 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#

  1. 移除 ts 依赖。
    npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
  2. .ts 文件改为.js 文件。
  3. 修改 index.html 文件中
  4. 删除 ts 相关 eslint 规则。.eslintrc.js 文件中 @vue/typescript/recommended @typescript-eslint/no-explicit-any: ‘off’。
  5. 删除 Array 和 RouteRecordRaw 的导入。
  6. 删除 src/shims-vue.d.ts。
  7. 删除
  8. 删除 tsconfig.json 文件。
  9. 在 package.json 文件中修改脚本，"build": "vue-tsc && vite build" -> "build": "vite build"。
  10. 安装 terser npm i -D terser。(terser 用于将 js 代码压缩)

构建原生 APP#

  1. 把 Capacitor 添加到你的项目:
    ionic integrations enable capacitor
  2. 构建项目，选中对应的平台
    ionic build
    ionic cap add ios
    ionic cap add android
  3. 我们使用标准的原生 IDE（Xcode 和 Android Studio）来打开、构建和运行 iOS 和 Android 项目:
    ionic cap open ios
    ionic cap open android

Ionic 组件库使用#

  1. 文档地址
    UI Components | Ionic Documentation
  2. 项目中添加底部 tabs 栏
    android 运行报错
  3. 路径不能有中文名
  4. 配置 android_home 环境变量
  5. 重新 build 重新运行

Capacitor 常用命令#

  1. npx cap copy
    将 web 应用程序构建和 Capacitor 配置文件复制到本地平台项目中。每次更改 web 应用程序或更改配置值时都运行此程序。
  2. npx cap update
    更新 package.json 中引用的本机插件和依赖项。
  3. npx cap sync
    此命令运行 copy，然后 update。
  4. npx cap ls
    列出所有已安装的 Cordova 和 Capacitor 插件。

Ionic 常用命令#

  1. ionic build
    构建 Web 资源并为任何平台目标准备您的应用程序
  2. ionic serve
    启动本地开发服务器进行应用程序开发 / 测试
  3. ionic capacitor open
    运行项目在对应的编辑器中 (Xcode for iOS, Android Studio for Android)

Ionic 组件库使用#

  1. ion-router-outlet
    类似与
  2. Ion-page
    显示 tab 栏页面必须要用

Android studio 项目运行报错的解决方法#

  1. 检查项目路径是否有中文。
  2. 配置 ANDROID_HOME 环境变量。
  3. 重新 build 重新运行。

学情 APP 项目地址#

https://codeup.aliyun.com/64004113b6809992bb8f4e37/zyy-xueqing/zyy-xueqing-app-front

Android Studio 配置代理#

  1. 在主菜单中，依次选择 "File"（文件） > "Settings"（设置）
  2. 在设置对话框中，展开 "Appearance & Behavior"（外观与行为）并选择 "System Settings"（系统设置）。
  3. 在右侧面板中，选择 "HTTP Proxy"（HTTP 代理）。
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.