Android Studio 打包 React 网页项目

关注

VIP免费原创 2026-08-25 10:59:09 315 阅读 AI 写同款· GEO 优化 ›

HBuilderX+Android Studio双剑合璧：5分钟搞定HTML网页转Android App（附完整配置流程）本文详细介绍了如何利用HBuilderX与Android Studio协同开发，将HTML5网页应用快速转化为原生Android App的完整流程。从环境配置、前端项目适配到性能调优和发布指南，提供了一套高效的实践方案，帮助开发者5分钟内完成HTML网页转Android App的打包过程。阅读详情

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

核心插件capacitorjs

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

安装 Capacitor

npm i @capacitor/core
npm i -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

npm i @capacitor/android

# 创建 Android 项目
npx cap add android

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

同步代码

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

npx cap sync

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

下面是本项目的解决方案

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

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

app/src/main/AndroidManifest.xml引入

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

最低0.47元/天解锁文章

标签

#android studio #react.js #android

因时机器人-灵巧手配置方案(Ubuntu18.04) 阅读详情