yubopeng

官方文档#

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 代理）。