Question

7.1 Shell 模块使用

文档 https://electronjs.org/docs/api/shell

Electron Shell 模块在用户默认浏览器 中打开 URL 以及 Electron DOM webview 标签。 Shell 既属于主进程模块又是渲染进程模块

shell 模块提供了集成其他桌面客户端的关联功能

1. 引入

<!--index.html-->
<button id="shellDom">通过 shell 打开外部链接</button>
<script src="render/shell.js"></script>

2. shell.js

// src/render/shell.js

const { shell } = require('electron')
let shellDom = document.querySelector('#shellDom');

shellDom.onclick = function (e) {
   shell.openExternal('https://github.com/poetries')
}

7.2 Electron DOM <webview> 标签

Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的应用运行的是不同的进程。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的。因为这能 保证应用的安全性不受嵌入内容的影响。

<!--src/index.html 中引入-->
<webview id="webview" src="http://blog.poetries.top" style="position:fixed; width:100%; height:100%">
</webview>

7.3 shell 模块 <webview> 结合 Menu 模块使用案例

1. 新建 src/render/webview.js

/* eslint-disable */
var { ipcRenderer } = require('electron');
let myWebview = document.querySelector('#myWebview')

ipcRenderer.on('openwebview', (e, url)=>{
  myWebview.src = url
})

2. 引入 src/index.html

<webview id="myWebview" src="http://blog.poetries.top" style="position:fixed; width:100%; height:100%">
</webview>
  
<script src="render/webview.js"></script>

3. 新建 src/main/menu.js

/* eslint-disable */
const { shell, Menu, BrowserWindow } = require('electron');

// 当前窗口渲染网页
function openWebView(url) {
  // 获取当前窗口 Id
  let win = BrowserWindow.getFocusedWindow()

  // 广播通知渲染进程打开 webview
  win.webContents.send('openwebview', url)
}

// 在窗口外打开网页
function openWeb(url) {
  shell.openExternal(url)
}

let template = [
  {
    label: '帮助',
    submenu: [
      {
        label: '关于我们',
        click: function () {
          openWeb('http://blog.poetries.top')
        }
      },
      {
        type: 'separator'
      },
      {
        label: '联系我们',
        click: function () {
          openWeb('https://github.com/poetries')
        }
      }
    ]
  },
   {
    label: '加载网页',
    submenu: [
      {
        label: '博客',
        click: function () {
          openWebView('http://blog.poetries.top')
        }
      },
      {
        type: 'separator' // 分隔符
      },
      {
        label: 'GitHub',
        click: function () {
          openWebView('https://github.com/poetries')
        }
      },
      {
        type: 'separator' // 分隔符
      },
      {
        label: '简书',
        click: function () {
          openWebView('https://www.jianshu.com/users/94077fcddfc0/timeline')
        }
      }
    ]
   },
   {
  label: '视频网站',
  submenu: [
    {
      label: '优酷',
      click: function () {
        openWebView('https://www.youku.com')
      }
    },
    {
      type: 'separator' // 分隔符
    },
    {
      label: '爱奇艺',
      click: function () {
        openWebView('https://www.iqiyi.com/')
      }
    },
    {
      type: 'separator' // 分隔符
    },
    {
      label: '腾讯视频',
      click: function () {
        openWebView('https://v.qq.com/')
      }
    }
  ]
  }
]

let m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)

4. 引入 menu

// 在主进程 src/index.js 中引入
const createWindow = () => {

  // 创建菜单  
  // 引入菜单模块
  require('./main/menu.js')
};