请确保已搭建好vue+electron的一个项目,详情参考:用vue-cli+Electron开发桌面应用(搭建vue项目、安装electron),更多相关信息,参考作者往期博客
具体描述
- 将
loadpage.html 作为加载页面,该页面主要是无边窗口loading 的页面布局和样式,存在项目的public文件夹下 webContents.loadURL(url[, options]),在窗口中加载url, url必须包含协议前缀,比如http://或file://.如果加载想要忽略http缓存,可以使用pragma头来达到目的.
background.js设置如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { app, protocol, BrowserWindow, ipcMain, Menu} from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' const isDevelopment = process.env.NODE_ENV !== 'production' let win let loading protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true }}]) function createWindow() { win = new BrowserWindow({ width: 1122, height: 670, show: false, // 一开始是false,loadpage加载完毕的时候为true webPreferences: { nodeIntegration: true, webSecurity: false // 允许跨域 } }) if (process.env.WEBPACK_DEV_SERVER_URL) { setTimeout(() => { // 关闭loadpage的时候,将win, show true loading.hide() loading.close() win.show() win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) }, 5000) win.webContents.closeDevTools() } else { setTimeout(() => { loading.hide() loading.close() win.show() createProtocol('app') win.loadURL('app://./index.html') }, 5000) win.webContents.closeDevTools() // 关闭调试模式 } win.on('closed', () => { win = null app.quit(); }) win.on('close', function(_event) { app.quit(); }) } function showLoading(callback) { loading = new BrowserWindow({ show: false, frame: false, width: 360, height: 360, resizable: false }) loading.once('show', callback) loading.loadURL(`file://${__static}/loadpage.html`) // 将loadpage作为加载页面,该页面存在项目的public文件夹下 loading.show() } function initApp() { showLoading(createWindow) } app.on('activate', () => { if (win === null) { initApp() } }) app.on('ready', async() => { initApp() }) |
更多信息参考:项目中的background.js文件。