uniapp 打包生成上位机软件及去除顶部导航栏和menu后自定义

一、安装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协议。

编辑

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 文件，双击就可以看到网页变成了一个桌面应用啦！