From 0933f534655cdfa6be3d4aa9ca2df51b2ad268af Mon Sep 17 00:00:00 2001 From: gaoshuaixing <530353222@qq.com> Date: Mon, 11 Oct 2021 16:07:59 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B5=8C=E5=85=A5=E6=9B=B4=E5=A4=9A=E7=9A=84?= =?UTF-8?q?=20web=20=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- asset/view_example.html | 22 +++++++ electron/ipc/example.js | 37 ++++++++++- frontend/src/config/router.config.js | 5 ++ frontend/src/layouts/DemoMenu.vue | 11 +++- frontend/src/views/demo/windowview/Index.vue | 67 ++++++++++++++++++++ main.js | 8 +-- 6 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 asset/view_example.html create mode 100644 frontend/src/views/demo/windowview/Index.vue diff --git a/asset/view_example.html b/asset/view_example.html new file mode 100644 index 0000000..7fee898 --- /dev/null +++ b/asset/view_example.html @@ -0,0 +1,22 @@ + + + + + + + +
+ 这里是 BrowserView 加载的html内容 +
+ + \ No newline at end of file diff --git a/electron/ipc/example.js b/electron/ipc/example.js index c764721..d96931c 100644 --- a/electron/ipc/example.js +++ b/electron/ipc/example.js @@ -9,9 +9,11 @@ * @param arg 接收到的消息 */ -const {dialog} = require('electron'); +const {app, dialog, BrowserWindow, BrowserView} = require('electron'); +const path = require('path'); let myTimer = null; +let browserViewObj = null; exports.hello = function (event, channel, msg) { let newMsg = msg + " +1" @@ -42,7 +44,7 @@ exports.messageShowConfirm = function (event, channel, arg) { buttons: ['确认', '取消'], // 按钮及索引 }) let data = (res === 0) ? '点击确认按钮' : '点击取消按钮'; - console.log('[electron] [example] [messageShowConfirm] 结果:', res, ); + console.log('[electron] [ipc] [example] [messageShowConfirm] 结果:', res, ); return data; } @@ -68,4 +70,35 @@ exports.socketMessageStart = function (event, channel, arg) { exports.socketMessageStop = function () { clearInterval(myTimer); return '停止了' +} + +/** + * 加载视图内容 + */ +exports.loadViewContent = function (event, channel, arg) { + let content = null; + if (arg.type == 'html') { + content = path.join('file://', app.getAppPath(), arg.content) + } else { + content = arg.content; + } + + browserViewObj = new BrowserView(); + MAIN_WINDOW.setBrowserView(browserViewObj) + browserViewObj.setBounds({ + x: 300, + y: 80, + width: 650, + height: 480 + }); + browserViewObj.webContents.loadURL(content); + return true +} + +/** + * 移除视图内容 + */ +exports.removeViewContent = function () { + MAIN_WINDOW.removeBrowserView(browserViewObj); + return true } \ No newline at end of file diff --git a/frontend/src/config/router.config.js b/frontend/src/config/router.config.js index 84b90a8..c64960c 100644 --- a/frontend/src/config/router.config.js +++ b/frontend/src/config/router.config.js @@ -28,6 +28,11 @@ export const constantRouterMap = [ name: 'DemoSocketIndex', component: () => import('@/views/demo/socket/Index') }, + { + path: '/demo/windowview/index', + name: 'DemoWindowViewIndex', + component: () => import('@/views/demo/windowview/Index') + }, { path: '/demo/shortcut/index', name: 'DemoShortcutIndex', diff --git a/frontend/src/layouts/DemoMenu.vue b/frontend/src/layouts/DemoMenu.vue index 60cfcf1..9f1adaa 100644 --- a/frontend/src/layouts/DemoMenu.vue +++ b/frontend/src/layouts/DemoMenu.vue @@ -4,7 +4,7 @@ theme="light" class="layout-sider" > - + {{ menuInfo.title }} @@ -36,6 +36,12 @@ export default { pageName: 'DemoSocketIndex', params: {} }, + 'menu_400' : { + icon: 'profile', + title: '视图', + pageName: 'DemoWindowViewIndex', + params: {} + }, 'menu_500' : { icon: 'profile', title: '软件', @@ -59,7 +65,7 @@ export default { title: '测试', pageName: 'DemoTestApiIndex', params: {} - }, + } } }; }, @@ -84,6 +90,7 @@ export default { border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; background-color: #FAFAFA; + overflow: auto; } } diff --git a/frontend/src/views/demo/windowview/Index.vue b/frontend/src/views/demo/windowview/Index.vue new file mode 100644 index 0000000..da58907 --- /dev/null +++ b/frontend/src/views/demo/windowview/Index.vue @@ -0,0 +1,67 @@ + + + diff --git a/main.js b/main.js index 80d1915..21e4bb9 100644 --- a/main.js +++ b/main.js @@ -5,10 +5,10 @@ const setup = require('./electron/setup') const electronConfig = require('./electron/config') const storage = require('./electron/lib/storage') const preferences = require('./electron/preferences') -const helper = require('./electron/lib/helper'); +const helper = require('./electron/lib/helper') // main window -global.MAIN_WINDOW = null +global.MAIN_WINDOW = null; global.APP_TRAY = null; global.CAN_QUIT = false; @@ -129,10 +129,10 @@ function loadingView (winOptions) { width: winOptions.width, height: winOptions.height }); - loadingBrowserView.webContents.loadURL(loadingHtml); + loadingBrowserView.webContents.loadURL(loadingHtml) MAIN_WINDOW.webContents.on('dom-ready', async (event) => { - MAIN_WINDOW.removeBrowserView(loadingBrowserView); + MAIN_WINDOW.removeBrowserView(loadingBrowserView) }); }