electron套壳web网站应用实现标签页

公司有需求需要使用 electron 作为外壳包裹一个已存在的网站作为本地客户端使用，但是希望网站内打开外部应用时使用标签页的形式，如果你也有类似需求可以参考本文。

# 开发过程

前面我们介绍了electron-tabs 打包方法。

本次我们需要对这个项目的内容做下修改以适应页签形式打开应用。

首先现有的网站包含了一个页面展示所有的应用，点击应用后会新开窗口打开应用。对应着我们需要在用户点击应用之后 electron 会新开一个内嵌窗口。

因为 web 站点是使用web-view标签加载的，所以我们要让用户点击之后发送事件消息到浏览器线程去新开web-view标签页加载指定应用。

那么如何传递消息呢，我们注意到 electron 的web-view标是可以支持console-message事件的，所以可以基于这个 API 实现。

下面来介绍一下实现的过程。

约定消息数据结构。首先我们新开应用页签时需要显示 tab 页的 title 标题，加载应用地址，结构如下所示：

代码语言：javascript复制

{""url":"http://oa-web.test.kai12.cn/oauth?appCode=documentFlow","name":"公文流转"}

网站点击事件消息传输。在应用点击事件里面使用console.log()打印消息内容：

代码语言：javascript复制

let param = { url: data.url, name: data.name };
let print = console;
if (print && print.log) {
  print.log(JSON.stringify(param));
}

因为 vue 项目中打包时会把日志语句过滤掉，所以这里要新建引用日志对象实现log打印。

electron 应用内事件消息接收。官方提供了如下示例代码：

代码语言：javascript复制

const webview = document.querySelector('webview');
webview.addEventListener('console-message', (e) => {
  console.log('Guest page logged a message:', e.message);
});

我们需要修改electron-tabs的 Demo 页面追加这段事件监听，可以参考下方代码：

代码语言：javascript复制

// 从标签组中获取当前激活页面的web-veiw对象并添加监听事件
let webview = tabGroup.getActiveTab().webview;
webview.addEventListener('console-message', (e) => {
  console.log('click message:', e.message);
  if (e.message.indexOf('{') != -1) {
    console.log('url json:', JSON.parse(e.message));
    let param = JSON.parse(e.message);
    let url = `${param.url}`;
    tabGroup.addTab({
      title: param.name || '测试应用',
      src: url,
      active: true,
    });
  }
});

然后我们就可以实现点击应用后新开页签来使用应用了。

# 参考资料

console-message
electron-tabs

electron 网站打包

0 人点赞