把Gemini3生成的网页应用，打包成手机APP，手把手教程，混合APP开发入门

原创于 2025-12-06 16:53:10 发布 · 639 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#ai #手机

视频版： https://www.bilibili.com/video/BV1FF2eBLECN/

上期视频，我们把 Gemini 3 生成的炫酷应用，免费部署成了自己的网站。很多观众朋友们留言，希望把这些应用进一步打包成手机 APP，装到手机里面去使用。本期视频，我们就来介绍三种把网页应用改造成手机 APP 的方法，分别是 PWA 应用、安卓的 APK，还有 iPhone 的 IPA。

准备工作：适配手机并部署网站

首先需要进行一点准备工作。我们还是来到谷歌的 AI Studio，在左侧点击 build。

在这里一句话，就能让 Gemini 3 为我们生成炫酷的应用。我们跳过生成环节，直接找一个已有的案例改造成手机 APP。我们来到下面，点击 Browse the app gallery。

这里面展示的，就是官方的一些生成案例。我们找到下面这个 3D 的跑酷游戏，就把它来改造一下。

进来以后，我们在右上角的 Device 这里切换成 Mobile。

我们来看一下它在手机上的运行效果。总体来说显示没有问题，不过这里有一个问题：在手机上，我们没有键盘上的上下左右键，没法控制这个人物的移动。所以说这个游戏想要适配手机端，需要先改造一下，让 Gemini 为我们生成几个虚拟按键，然后才能在手机上面操作。我们在左侧的对话窗口，输入我们的需求。我的需求是把项目改造一下，适配手机端，用虚拟按键控制人物移动。如果遇到了页面显示不能符合手机端的需求，这里一并可以告诉 Gemini，让他帮我们修改。开始。

Gemini 完成了代码的修改，我们来测试一下。在右上角的 device 这里选择 mobile。

这样我们的项目就适配了手机端。接下来我们把代码保存到 Github 上面，并且部署一下。在右上角，点击保存到 Github。

给项目起个名字，我叫 RunnerMobile，右下角 create。再点击右下角的 stage and commit。点击右上角的链接，打开 Github 项目。

进来以后，我们找到 index.html 这个文件，点击这里的小铅笔。

在文件的最下面，我们添加上这句话，也就是把 React 的入口文件引用过来。

然后点击 commit changes，commit。仓库就准备好了，我们来部署一下。

我们来到这个免费部署网站 Netlify。右上角点击 log in，这里一定要选择使用 Github 登录。点击 add new project –> import –> Github。

选择我们刚才创建的项目，所有的配置都不需要改。在最下面，点击创建环境变量，Add key/value pairs。Key 填写 Gemini APIK，Value 随便填一个，因为这个项目是一个纯前端项目，它不涉及任何的 AI 功能。然后点击 Deploy。部署完成了。Netlify 生成的这个域名，在国内是可以直连的。

我们点进去试一下。看起来没问题，这个虚拟键也可以正常工作。

接下来我们把这个域名复制一下，来到手机上试一试。我们来到手机端，打开手机上的 Chrome 浏览器，然后把网站的地址粘贴到地址栏。我们来试玩一下。现在的应用有两个明显问题：首先，下面的虚拟按鍵被挡住了一大半；第二个问题是，上面有一个难看的地址栏，整个应用没法全屏显示，看起来更像是一个网站，而不是一个 APP。

接下来我们针对这两个问题，把项目再改造一下。

方法一：改造为 PWA 应用

比较简单的方案是改造成 PWA 应用。PWA 全称是 Progressive Web App，也就是渐进式网页应用。它本质上还是一个网页，但在手机上的体验很像是手机 APP。我们把网页配置成 PWA 以后，网页就能被手机安装到桌面，点开显示的是全屏界面，没有浏览器地址栏，还能离线使用，启动速度也更快。接下来我们用 AI 编程把项目改造一下。

首先第一步，把项目克隆到本地。如果对 Git 命令行不熟悉的朋友们，我建议使用这个软件 Github Desktop，也就是 Github 的桌面客户端。

在左上角点击 file，选择克隆仓库，然后选到 Github 上面的项目，选择一个路径，点击克隆。这样我们把代码克隆到了本地电脑上。我们来到 VS Code，Open Folder，找到克隆下来的文件夹，点击 Select。

进来以后，我们输入这个命令：npm install vite-plugin-pwa --save-dev。

这个插件可以帮助我们很轻松地把一个 Vite 项目改造成 PWA 应用。后面的 --save-dev 表示这是一个开发时才用到的插件。然后回车。插件安装完成以后，我们进入第二步，在项目的根目录新建一个叫 public 的文件夹。

然后，我们给我们的 APP 准备一个桌面图标。这里我就把我的头像复制一下，然后粘贴到 public 里面。

这样图片就有了。

接下来，我们使用 AI 编程把项目改造一下。这里我使用的 AI 编程工具是 Codex。爬爬虾之前有一期完整视频介绍关于 Codex 的使用。

这里我输入提示词：使用 vite-plugin-pwa 把这个项目改造成一个 PWA 应用，应用图片在 public 目录下面。

开始。Codex 完成了工作，我们来看一下。改动其实很简单，主要就是把插件引用到项目里面来，然后修改了 Vite 的配置文件。

在这个配置文件里面，定义了我们 APP 的名字、显示方式是全屏显示，接下来是它的主题色，这里定义了应用的图标，等等。

修改完成以后，我们可以把这些改动推送到 GitHub 上面。来到 GitHub 桌面客户端，下面填一个描述：“改造成 PWA 应用”，点击 commit，然后再点击 push。

推送完成以后，Netlify 这边自动开始了部署。好，部署完成了，还是这个地址，我们再用手机打开试一下。

还是用手机浏览器打开项目的地址。我们看到这次最大的区别，这里弹了一个安装提示。

浏览器询问我们是否要把这个网站安装成一个 PWA 应用。我们点击安装，安装完成。在手机的桌面，就多了这么一个应用图标。

然后我们点击这个图标进入应用。这次就不一样了，我们看到，这个应用变成了一个全屏应用，上面没有那个难看的地址栏了，而且下面的虚拟按键也全部展示出来了。

这个应用用起来跟一个独立的手机 APP 非常的像了。也可以打开关闭，并且可以把它放到后台。还有一个非常棒的点，安装完成以后，它的所有资源文件都被缓存下来了，可以离线使用。在手机上打开飞行模式，我们重新打开这个 APP。我们看到在飞行模式下面，APP 也可以正常的使用，非常的棒。

PWA 应用的技术细节

我们来把项目在本地 build 一下，看看 PWA 应用的特点。在终端执行 npm run build。在 dist 目录里面就是 build 完成的文件。

这里我们主要看这个文件 manifest。这里面定义了应用的名字、应用的描述、它的显示方式，还有主题颜色等等。这个文件是 PWA 应用最重要的定义文件。手机浏览器看到这个文件以后，就会把这个网站当作成一个 PWA 应用，弹出这个安装的提示。接下来一个重要文件是 sw.js，也就是 service worker。

这是 PWA 的后台代理。Service worker 运行在浏览器的后台，可以拦截网络请求，做资源缓存等等，让应用启动速度变得更快，而且可以离线运行。下面的 workbox 也是 worker 相关的文件。这些代码都是 vite-plugin-pwa 帮我们自动生成的，我们不需要手动编写。

方法二：使用 Capacitor 打包成安卓 APK

PWA 应用的本质还是一个网页。接下来我们看怎么把我们的应用变成一个真正的手机 APP。打包成手机 APP 以后，就不需要部署网站了，我们直接把 APP 放到手机上安装就可以使用。这里我选择的开发框架是 Capacitor。Capacitor 是一个手机应用的开发框架，可以把网页快速打包成安卓或者 iOS APP。开发者不用写原生代码，也能做出接近原生体验的手机 APP。而且一套网页代码，就可以打包出全平台的手机 APP，这样大幅降低了开发的工作量。我先用我这台安卓手机为例演示一下。

我们先来到 Android Studio 的官网，把这个安卓 APP 的开发工具安装一下。

安装过程一路点击下一步就行了。然后我们回到 VS Code，还是我们的项目。在左侧的 Source Control 这里，我们看到这里显示的是 Git 的提交记录，最新的一次提交是改造成 PWA 应用。这些改动对于手机 APP 都是不需要的，所以我们从上一次提交这里右键，create branch，就是创建一个新的分支。

给分支起个名字，这里我叫 capacitor。这样我们就创建了分支，在当前的工作目录就不包含这些 PWA 改动了。这里要注意，index.html 我们加的这一句话一定要在的。

接下来我们在终端输入命令，把项目改造成一个 Capacitor 的应用。我们输入第一个命令，先把 Capacitor 在项目里面安装一下。回车。我们执行第二个命令，把项目初始化成一个 Capacitor 应用。这里会询问我们手机 APP 的名字，我填一个名字。然后填写 package ID，如果没有特别需求的话直接回车。然后我们执行 npm run build，把我们的前端工程编译成网页。接下来执行 npx cap sync，也就是把我们 build 出来的网页同步到安卓工程里面。接下来安装 Capacitor 的安卓依赖，然后给项目增加一个安卓目录。执行完这一步，我们可以在项目的目录里面找到一个安卓目录，这里面就是一个完整的安卓 APP 工程。

接下来我们执行 npx cap open android。

这样，它自动打开了我电脑上的 Android Studio。我们点击信任。在 Android Studio 里面，自动打开了安卓工程的文件夹。我们看到右下角它正在导入工程，这里要下载很多的依赖包，要耐心等待一会，而且最好有国外的上网环境。工程导入完成以后，上面有一个 debug 按钮，我们来测试一下。

Android Studio 自动为我们打开了一个安卓模拟器。

在右下角就是我们的 APP，我们点进去试一下。我们看到功能是完全正常的，而且这些虚拟键也可以正常工作。

没问题。接下来，我就把这个项目打包成一个真正的 APK，然后装到我的手机上来试用一下。我们在菜单这里找到 build，选择 Generate APK。

这样打包完成了。我们在项目点击右键 open in，使用文件浏览器打开。打包出来的 APK 文件在 app -> build -> generated -> outputs -> apk -> debug。

这个就是我们打包出来的安装文件。接下来我用一条数据线，把电脑跟手机连接到一起，然后把 APK 放到一个目录下面。这里我来到我的安卓手机上，在手机的文件管理器里面找到安装包，一路点击下一步把 APP 安装到手机上面。

接下来，我们在手机桌面上就可以看到这个 APP，点击就可以启动。

进来以后我试用了一下，功能是完全正常的，而且下面的虚拟键也可以正常工作。

方法三：使用 Capacitor 打包成 iPhone IPA

开发 iPhone 应用的前提是，需要先有一台 Mac 电脑。这里要注意，Windows 系统并不能开发 iPhone 的应用。这个就是 Mac 上面开发手机应用的软件 [Xcode]，先把它来安装一下。这一步是重点，我们要把这里的 iOS 开发环境勾选上。

然后我们来到 GitHub 的网页客户端，选中我们的 GitHub 仓库，在下面填写一个路径，点击克隆。

克隆完成以后，点击 Open in VS Code，用 VS Code 把项目打开一下。

然后找到左侧的 Source Control，我们还是在 PWA 这次提交的上一个提交位置，创建一个分支。

这里我的分支名字叫 iOS。接下来，我们打开一个终端窗口，开始执行命令。这些命令跟安卓那边几乎是一样的。第一个命令先安装 Capacitor 依赖。第二个命令，把项目初始化成一个 Capacitor 工程。这里要填写一个 APP 的名字。下一个命令 npm run build，把前端项目编译成静态的网页。下一个命令 npm install @capacitor/ios，给我们的项目添加上 iOS 的功能。npx cap add ios，给我们的项目创建出 iOS 的目录。

好，下一步是重点，我们需要在 Mac 电脑上安装一个额外的工具叫 Cocoapods：brew install cocoapods。