如何将静态网页资源“打包“成.exe或者.apk

admin管理员组

文章数量:1030652

Hello , 我是小恒不会java。最近有音乐播放器win桌面应用程序的需求，那就说说上手electron
又想到很多人对apk文件不太了解，apk文件就是安卓桌面应用程序，比如你手机现在打开的微信
当然，exe文件基本都清楚，windows可执行文件

生成.exe

例子

页面网址：http://web.yunduanjianzhan

Electron

Electron 是一种基于 Node.js 和Chromium开发的开源框架，用于构建跨平台桌面应用程序。
Electron 提供了许多跨平台的功能，例如窗口管理、菜单、对话框和托盘图标等。它还可以轻松地与 Node.js 模块进行集成，以便开发人员可以使用已有的Node.js生态系统中的库和工具。
这使得Electron非常适合开发具有丰富用户界面和本地操作系统集成的桌面应用程序。

快速上手

参考官方文档https://www.electronjs/zh/docs/latest/
环境要求：node.js 16以上，npm 8以上，vscode

安装 Electron

npm install -g cnpm --registry=https://registry.npmmirror
cnpm install electron -D

开始

mkdir my-electron
cd my-electron
npm init -y
npm install electron electron-packager --dev

配置

package.json 中做以下指定：

"main": "main.js",
"scripts": {
  "start": "electron ."
},

创建窗口

在根目录my-electron下创建main.js文件,并写入

const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
  //创建一个窗口
  createWindow()
})
function createWindow() {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 })
  //窗口加载 URL
  mainWindow.loadURL('http://web.yunduanjianzhan')
}

引入两个node模块：app 和 BrowserWindow,app 模块，控制整个应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理程序的窗口。
在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口

调试与打包

调试：
npm run start
Electron Forge打包：
npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make
最后在my-electron-win32-x64文件下获取到exe文件，注意有动态链接

生成.apk

参见https://mp.weixin.qq/s/kriz_uTiWmnXnNDMrbmixg即可

Hello , 我是小恒不会java。最近有音乐播放器win桌面应用程序的需求，那就说说上手electron
又想到很多人对apk文件不太了解，apk文件就是安卓桌面应用程序，比如你手机现在打开的微信
当然，exe文件基本都清楚，windows可执行文件

生成.exe

例子

页面网址：http://web.yunduanjianzhan

Electron

Electron 是一种基于 Node.js 和Chromium开发的开源框架，用于构建跨平台桌面应用程序。
Electron 提供了许多跨平台的功能，例如窗口管理、菜单、对话框和托盘图标等。它还可以轻松地与 Node.js 模块进行集成，以便开发人员可以使用已有的Node.js生态系统中的库和工具。
这使得Electron非常适合开发具有丰富用户界面和本地操作系统集成的桌面应用程序。

快速上手

参考官方文档https://www.electronjs/zh/docs/latest/
环境要求：node.js 16以上，npm 8以上，vscode

安装 Electron

npm install -g cnpm --registry=https://registry.npmmirror
cnpm install electron -D

开始

mkdir my-electron
cd my-electron
npm init -y
npm install electron electron-packager --dev

配置

package.json 中做以下指定：

"main": "main.js",
"scripts": {
  "start": "electron ."
},

创建窗口

在根目录my-electron下创建main.js文件,并写入

const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
  //创建一个窗口
  createWindow()
})
function createWindow() {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 })
  //窗口加载 URL
  mainWindow.loadURL('http://web.yunduanjianzhan')
}

引入两个node模块：app 和 BrowserWindow,app 模块，控制整个应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理程序的窗口。
在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口

调试与打包

调试：
npm run start
Electron Forge打包：
npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make
最后在my-electron-win32-x64文件下获取到exe文件，注意有动态链接

生成.apk

参见https://mp.weixin.qq/s/kriz_uTiWmnXnNDMrbmixg即可

本文标签： 如何将静态网页资源apk