electron 最核心的2个配置文件,可以把任何网站VUE,uni-app项目变成桌面端exe

9 篇文章 0 订阅

先切换electron镜像防止下载中报错

npm config set registry https://registry.npmmirror.com/

npm config set electron_mirror https://npmmirror.com/mirrors/electron/

下载相关插件

//安装electron 运行依赖 这是一个集成工具
npm install -g node-gyp
npm install --global --production windows-build-tools

//安装完成后设置环境变量
npm config set python python2.7
npm config set msvs_version 2017

//全局安装electron
npm install -g electron 

//安装编译工具
npm i -g electron-builder //二选一(推荐这个)
npm i -g electron-packager 

创建配置文件

//ele.js 文件 放在根目录

const {app, BrowserWindow, Menu ,ipcMain } = require('electron');
const path = require('path');
const url = require('url');
 
// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let mainWindow;

ipcMain.on('closeWindow',function(){
	app.exit(0);
})
 
function createWindow () {
    //隐藏关闭放大缩小最外层菜单栏目
    Menu.setApplicationMenu(null);
 
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        title: '网络继续教育考试系统',
		alwaysOnTop:true,//是否总是现在在最前面
		fullscreen:true,//是否全屏
		webPreferences:{
			nodeIntegration: true, // 是否集成 Nodejs
			webSecurity: false,
			textAreasAreResizable :false,
			contextIsolation: false
		},
        // width: 1320,
        // height: 744,
        icon: __dirname + './static/edu.ico', //这个是引入的icon
    });
 
    // 然后加载应用的 index.html。
    mainWindow.loadURL(url.format({
       pathname: path.join(__dirname, './unpackage/dist/build/h5/index.html'),
       // protocol: 'file:',
       // slashes: true
    }))
	
	// mainWindow.webContents.openDevTools()
 
    //引用外部文件
   // mainWindow.loadURL(`http://www.baidu.com`);
    // 加载应用的 index.html
    // mainWindow.loadURL('file://' + __dirname + '/index.html');
 
   // 打开开发者工具。
   //mainWindow.webContents.openDevTools();

    // 打开开发工具
 // mainWindow.openDevTools();
 
   // 当 window 被关闭,这个事件会被触发。
   mainWindow.on('closed', () => {
            // 取消引用 window 对象,如果你的应用支持多窗口的话,
            // 通常会把多个 window 对象存放在一个数组里面,
            // 与此同时,你应该删除相应的元素。
            mainWindow = null
    })
}
 
// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
 
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', () => {
    // 在macOS上,当单击dock图标并且没有其他窗口打开时,
    // 通常在应用程序中重新创建一个窗口。
    if (mainWindow === null) {
        createWindow()
    }
})
 
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入

//package.json
{
	"name": "education",
	"version": "1.0.1",
	"description": "网络继续教育考试系统",
	"main": "ele.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"dist": "electron-builder --win --ia32",
		"package": "electron-packager . 网络继续教育考试系统 --win --out distP --arch=ia32 --electron-version 1.4.14 --overwrite --ignore=node_modules --icon=./static/edu.ico"
	},
	"build": {
		"productName": "education",
		"appId": "com.Ambition.com",
		"copyright": "Ambition",
		"directories": {
			"output": "dist"
		},
		"nsis": {
			"oneClick": false,
			"allowElevation": true,
			"allowToChangeInstallationDirectory": true,
			"installerIcon": "./static/edu.ico",
			"uninstallerIcon": "./static/edu.ico",
			"installerHeaderIcon": "./static/edu.ico",
			"createDesktopShortcut": true,
			"createStartMenuShortcut": true,
			"shortcutName": "shortcutName"
		},
		"win": {
			"icon": "./static/edu.ico",
			"target": [{
				"target": "nsis",
				"arch": [
					"x64",
					"ia32"
				]
			}]
		}
	},
	"dependencies": {
		"electron-updater": "^4.3.9"
	},
	"devDependencies": {
		"electron": "15.1.2",
		"electron-builder": "^22.13.1",
		"electron-devtools-installer": "^3.2.0"
	},
	"electronDownload": {
		"mirror": "https://registry.npmmirror.com/electron/"
	},
	"author": "DW",
	"license": "ISC"
}

在vue中使用electron 实现自定义退出按钮

//main.js
Vue.prototype.eleEnv = false//默认是浏览器环境
if (Vue.prototype.eleEnv) {
	let ipc = window.require('electron').ipcRenderer
	Vue.prototype.ipc = ipc
}

//页面中使用
// 使用
 exit: function() {	
    if (this.eleEnv) {
		this.ipc.send('closeWindow')
		 }
    },

npx electron . //启动

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值