前端项目打包成安卓

库capacitor

1. gapphone cordova
2. capacitor inoic
   这4个关系 一个工具一个前端框架

流程

1. pnpm add @capacitor/core @capacitor/android pnpm add -D @capacitor/cli

2. pnpm exec cap init 会创建capacitor.config.ts

    import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.chaine.child.assessment',
  appName: 'child-assessment',
  webDir: 'dist',
  server: {
      url:"https://xxx",
      cleartext: true,
      androidScheme: 'http',
  },
  android:{
    webContentsDebuggingEnabled:true,
  }
};

export default config;

3. pnpm exec cap add andriod
   创建andriod项目
4. pnpm exec cap sync andriod
   同步capacitor配置
5. pnpm exec cap open andriod
   打开andriod studio

原理

capacitor webiew跨平台 针对不同平台提供统一API 开发不同插件
不同平台创建项目模板
web项目同步配置
静态资源可以是离线存储或者链接拉取

1. webDir 离线
2. server 远程连接 白屏
   2.1 10.0.2.2:xx 安卓模拟器 2.2 192.xx:xx 真机 2.3 xx.xx 远程