uniapp + electron 打包项目

参考文献

1、控制台安装electron和electron打包工具electron-packager

javascript 复制代码
npm install electron -g
npm install electron-packager -g

2、manifest.json修改

运行的基础路径修改为:./ 不然打包出来会出现白屏,读取不到,因为打包出来的h5默认加载地址为/static/

去掉启用https协议: 不然会出现网络无法加载,去掉https不影响你请求后端的https协议。(这个可加可不加,主要是看后台有没有配置白名单这种的,影响不大)

3.h5正常打包,打包后再h5文件夹下新建 package.json和main.js文件

main.js也可以改成其他的js名称,但是package.json里面的 {main:其他.js}记得改

注意: build 文件 的根目录要注意,如果项目没打包过app端,则会再最外层App.vue同级生成/dist/build/h5 文件,如果之前有打包过app端的,则是多一层 unpackage/dist/build/h5

package.json 内容

我的应用---》对应之前设置的web配置的页面标题,我的是 judarhr_content_distribution

javascript 复制代码
{
	"name":"我的应用",
	"version":"2.0",
	"main":"main.js",
	"scripts":{
		"test":"echo \"Error: no test specified\" && exit 1",
		"electron":"electron .",
		"start":"electron .",
		"build":"electron-packager ./ 我的应用 --plantform=win32 --arch=x64 --out 我的应用 --overwrite --icon=xdt.ico"
	},
	"author":"",
	"license":"ISC",
	"devDependencies":{
		"electron":"^23.3.13",
		"electron-packager":"^12.2.0"
	}
}

main.js

javascript 复制代码
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win
 
function createWindow () {
  win = new BrowserWindow({
	  width: 700, 
	  height: 400,
	  icon:'./static/logo.png', //
	  autoHideMenuBar:true,//隐藏菜单栏
	})
 //加载本地文件 index.html
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 //打开控制器
 win.webContents.openDevTools();

  //点击关闭的时候, win 一定要释放掉
  win.on('closed', () => {
    win = null
  })
}
//加载窗体
app.on('ready', createWindow)
 
 //IOS 关闭页面(ios比较特殊win.on('closed')只是关闭显示窗口,但是后台还是会存在,更像是隐藏窗体,所以需要这种判断方式推出)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  
  if (win === null) {
    createWindow()
  }
})

如果你的网页首页的文件名不是 "index.html",那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名。

4、打包

\dist\build\h5文件夹处执行打包命令

javascript 复制代码
npm run build

5、运行

javascript 复制代码
npm run start

关闭窗口则整个electron 关闭,得重新运行

6、进入调试模式

第一种:ctrl+shift+i

第二种:main.js配置 win.webContents.openDevTools();

相关推荐
大莲芒5 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
Hyyy1 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试
一天睡25小时1 小时前
前端の骚操作代码合集 (二)| 让你的网页变得有趣
前端·javascript
王林不想说话1 小时前
Zustand状态管理库
前端·javascript
清风ai明月1 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
Enddme1 小时前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript
逆袭的小黄鸭1 小时前
深入剖析 JavaScript 执行上下文:代码运行的幕后机制
前端·javascript·面试
晴殇i1 小时前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
zoahxmy09291 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
旧味清欢|2 小时前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6