Android Studio 打包 React 网页项目

Android Studio打包h5项目、调用硬件（以React为例）

核心插件capacitorjs

capacitorjs: https://capacitorjs.com/docs/apis/app
capgo: https://capgo.app/docs/plugins/bluetooth-low-energy/

安装 Capacitor

npmi @capacitor/corenpmi-D@capacitor/cli

初始化 Capacitor

npx cap init

运行后会创建capacitor-config文件，这个文件记录了项目build的输出目录（webDir），一般 Angular 的 www 、React 的 build 、Vue 的 public 等

{"appId":"com.sggk.dongte.warehouse.app","appName":"东特云平台","webDir":"dist"}

创建 Android 项目

Capacitor 核心运行时安装完成后，就可以安装 Android

npmi @capacitor/android# 创建 Android 项目npx capaddandroid

运行之后会在项目根目录生成一个android文件夹，里面包含了转化为 Android 项目的代码

同步代码

创建本机项目后，您可以通过运行以下命令将 Web 应用程序同步到本机项目。

npx capsync

npx cap sync 将把您构建的 web 包（预计在 Capacitor Config 文件的 webDir 中找到）复制到您的本机项目并安装本机项目的依赖项，如果修改了capacitor-config文件也会同步过去，也就是说只要初始化了项目，以后更改了配置或代码，都只需要运行npx cap sync命令来同步

将同步添加到package.json的scripts中，之后运行![img](http://localhost:63342/markdownPreview/1187303428/commandRunner/run.png)npm run build:cap命令即可构建并同步代码到 Android 项目

"build:cap":"vite build && npx cap sync",

打包

使用Android Studio 开发工具的Gradle打包

遇到问题

不能访问 http 资源

Android 项目默认只能访问 https 资源，解决方案可参考解决 Android 28 不能请求 HTTP 接口的问题 #5

下面是本项目的解决方案

1. 新建android/app/src/main/res/xml/network_security_config.xml文件

   <?xml version="1.0" encoding="utf-8"?><network-security-config><base-configcleartextTrafficPermitted="true"/></network-security-config>

2. app/src/main/AndroidManifest.xml引入

   <application...android:networkSecurityConfig="@xml/network_security_config"