홈 탐색 도움말
로그인
liangyibo
/
CameraMachine
2
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

嵌入更多的 web 内容

gaoshuaixing 4 년 전
부모
fc5fc9824a
커밋
0933f53465
6개의 변경된 파일과 142개의 추가작업 그리고 8개의 파일을 삭제
분할 보기 변경상태 보기
  1. 22 0
      asset/view_example.html
  2. 35 2
      electron/ipc/example.js
  3. 5 0
      frontend/src/config/router.config.js
  4. 9 2
      frontend/src/layouts/DemoMenu.vue
  5. 67 0
      frontend/src/views/demo/windowview/Index.vue
  6. 4 4
      main.js

+ 22 - 0
asset/view_example.html
파일 보기 

@@ -0,0 +1,22 @@
 
+<html>
 
+ <head> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <style type="text/css">
 
+    body{
 
+      margin:0px auto;
 
+    }
 
+    #content {
 
+      position: absolute;
 
+      left: 50%;
 
+      top: 35%;
 
+      transform: translate(-50%, -50%);
 
+    }
 
+  </style> 
+  <title></title> 
+ </head> 
+ <body> 
+  <div id="content">
 
+    这里是 BrowserView 加载的html内容
 
+  </div>  
+ </body>
 
+</html>

+ 35 - 2
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
 
 }

+ 5 - 0
frontend/src/config/router.config.js
파일 보기 

@@ -29,6 +29,11 @@ export const constantRouterMap = [
 
             component: () => import('@/views/demo/socket/Index')
 
           },
 
           {
 
+            path: '/demo/windowview/index',
 
+            name: 'DemoWindowViewIndex',
 
+            component: () => import('@/views/demo/windowview/Index')
 
+          },
 
+          {
 
             path: '/demo/shortcut/index',
 
             name: 'DemoShortcutIndex',
 
             component: () => import('@/views/demo/shortcut/Index')

+ 9 - 2
frontend/src/layouts/DemoMenu.vue
파일 보기 

@@ -4,7 +4,7 @@
 
       theme="light"
 
       class="layout-sider"
 
     >
 
-      <a-menu class="sub-menu-item" theme="light" mode="inline" :default-selected-keys="['menu_100']">
 
+      <a-menu theme="light" mode="inline" :default-selected-keys="['menu_100']">
 
         <a-menu-item v-for="(menuInfo, subIndex) in menu" :key="subIndex">
 
           <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
 
             <span>{{ menuInfo.title }}</span>
 
@@ -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;
 
   }
 
 }
 
 </style>

+ 67 - 0
frontend/src/views/demo/windowview/Index.vue
파일 보기 

@@ -0,0 +1,67 @@
 
+<template>
 
+  <div id="app-demo-window-view">
 
+    <div class="one-block-1">
 
+      <span>
 
+        1. 嵌入更多的 web 内容
 
+      </span>
 
+    </div>  
+    <div class="one-block-2">
 
+      <a-space>
 
+        <a-button @click="loadViewContent(0)">加载百度页面</a-button>
 
+        <a-button @click="removeViewContent(0)">移除百度页面</a-button>
 
+        <a-button @click="loadViewContent(1)">加载html页面</a-button>
 
+        <a-button @click="removeViewContent(1)">移除html页面</a-button>
 
+      </a-space>
 
+    </div>
 
+    <div class="one-block-2">
 
+      <template></template>
 
+    </div>
 
+  </div>
 
+</template>
 
+<script>
 
+
 
+export default {
 
+  data() {
 
+    return {
 
+      views: [
 
+        {
 
+          type: 'web',
 
+          content: 'https://www.baidu.com/'
 
+        },
 
+        {
 
+          type: 'html',
 
+          content: '/asset/view_example.html'
 
+        },        
+      ],
 
+    };
 
+  },
 
+  methods: {
 
+    loadViewContent (index) {
 
+      const self = this;
 
+      self.$ipcCallMain('example.loadViewContent', this.views[index]).then(r => {
 
+        console.log(r);
 
+      })
 
+    },
 
+    removeViewContent (index) {
 
+      const self = this;
 
+      self.$ipcCallMain('example.removeViewContent', self.views[index]).then(r => {
 
+        console.log(r);
 
+      })
 
+    },
 
+  }
 
+};
 
+</script>
 
+<style lang="less" scoped>
 
+#app-demo-window-view {
 
+  padding: 0px 10px;
 
+  text-align: left;
 
+  width: 100%;
 
+  .one-block-1 {
 
+    font-size: 16px;
 
+    padding-top: 10px;
 
+  }
 
+  .one-block-2 {
 
+    padding-top: 10px;
 
+  }
 
+}
 
+</style>

+ 4 - 4
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)
 
   });
 
 }