一、安装electron
【打包慢，无反应】
更换为阿里镜像源 命令行下输入
arduino
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/1、在控制台安装electron
cnpm install electron -g
2、在控制台安装electron-packager
cnpm install electron-packager -g
3、uniapp的manifest.json修改
运行的基础路径修改为：./ 不然打包出来会出现白屏，读取不到，因为打包出来的h5默认加载地址为/static/
去掉启用https协议: 不然会出现网络无法加载，去掉https不影响你请求后端的https协议。
编辑
二、创建electron文件并去除顶部导航栏和menu
编辑
1、创建 Electron 主进程文件
在 UniApp 项目的静态文件目录下创建一个 electron 文件夹，并在其中创建 main.js 文件，作为 Electron 的主进程文件。
main.js 文件内容：
javascript
const {
app,
BrowserWindow,
ipcMain
} = require('electron'); //引入electron
const path = require('node:path');
let win;
let windowConfig = {
width: 1400,
height: 787,
frame: false, // 去除顶部导航栏和menu
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 加载 preload.js
contextIsolation: true, // 启用上下文隔离
nodeIntegration: false, // 禁用 nodeIntegration
}
}; //窗口配置程序运行窗口的大小
function createWindow() {
win = new BrowserWindow(windowConfig); //创建一个窗口
win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
// win.webContents.openDevTools(); //开启调试工具
win.on('close', () => {
//回收BrowserWindow对象
win = null;
});
win.on('resize', () => {
win.reload();
})
//处理serialApi
serialApiHandle(win)
// 监听渲染进程的最小化请求
ipcMain.on('minimize-window', () => {
win.minimize();
});
// 监听渲染进程的关闭请求
ipcMain.on('close-window', () => {
win.close();
});
// 监听渲染进程的最大化请求
// ipcMain.on('maximize-window', () => {
// if (win.isMaximized()) {
// win.unmaximize();
// } else {
// win.maximize();
// }
// });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
app.on('activate', () => {
if (win == null) {
createWindow();
}
});2.创建package.json
在 electron 文件夹中创建 package.json文件，存储项目信息
package.json 文件内容：
json
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}3. 创建 preload.js 文件
在 electron 文件夹中创建 preload.js 文件，用于在渲染进程和主进程之间安全地暴露方法。
preload.js 文件内容：
javascript
const {
contextBridge,
ipcRenderer
} = require('electron');
// 将方法暴露给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
minimizeWindow: () => ipcRenderer.send('minimize-window'), // 最小化
// maximizeWindow: () => ipcRenderer.send('maximize-window'), // 最大化
closeWindow: () => ipcRenderer.send('close-window'), // 关闭
});4. 修改 UniApp 页面代码，增加自定义标题栏按钮及功能
在 UniApp 的页面中添加按钮，并通过 window.electronAPI 调用函数。
给标题栏增加样式-webkit-app-region: drag;让标题栏可拖拽， -webkit-app-region: no-drag;让按钮可点击但不能拖拽
示例代码：
xml
<template>
<view>
<view class="title-bar">
<button @click="minimizeWindow">最小化</button>
<button @click="maximizeWindow">最大化</button>
<button @click="closeWindow">关闭</button>
</view>
</view>
</template>
<script>
export default {
methods: {
minimizeWindow() {
if (window.electronAPI) {
window.electronAPI.minimizeWindow();
}
},
maximizeWindow() {
if (window.electronAPI) {
window.electronAPI.maximizeWindow();
}
},
closeWindow() {
if (window.electronAPI) {
window.electronAPI.closeWindow();
}
},
},
};
</script>
<style>
.title-bar {
-webkit-app-region: drag; /* 允许拖动 */
height: 30px;
background-color: #333;
color: white;
display: flex;
align-items: center;
padding: 0 10px;
}
.title-bar button {
-webkit-app-region: no-drag; /* 禁止拖动 */
background: none;
border: none;
color: white;
cursor: pointer;
margin-right: 10px;
}
</style>三、 打包 Electron 应用
1、uniapp H5打包
编辑
编辑
2.点击打包后的路径打开文件夹
编辑
3.进入static\electron文件夹将这三个文件剪切到index.html同级下
编辑
4.打开cmd
编辑
5.输入打包命令
css
electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 12.0.7 --overwrite --ignore=node_modules参数说明：
MyApp：你将要生成的exe文件的名称
--platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mas, win32
--arch=x64：决定了使用 x86 还是 x64 还是两个架构都用
--icon=自定义.ico：自定义设置应用图标
--out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹
--asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在
--app-version=1.0.0：生成应用的版本号
--overwrite：覆盖原有的build,让新生成的包覆盖原来的包
--ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
--electron-version 12.0.7：指定当前要构建的electron的电子版本（不带"v"）,需要和当前的版本一致,具体可以在 控制台输入electron -v查看
打包成功后，根目录会生成一个新的文件夹，点进去，找到 exe 文件，双击就可以看到网页变成了一个桌面应用啦！