前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用Electron创建跨平台应用(第二弹)开启多窗口

用Electron创建跨平台应用(第二弹)开启多窗口

作者头像
zhaoolee
发布2018-09-20 13:58:37
2K0
发布2018-09-20 13:58:37
举报
文章被收录于专栏:木子昭的博客

记得以前用过一段wps, wps有一个蛋疼的设定令我至今难忘, 那就是不支持多窗口, 这意味着你无法同时查看两篇文档, 对应现实生活中的场景就是, 即使给了你一份材料做对照, 你也会抄的很慢, 因为你需要不停的切换标签, 我当时认为wps的设计者,或许是小时候老师不让撕答案, 所以每次抄答案都得翻页抄, 否则不得劲...

同理, 对于vscode, atom这类应用, 多窗口是不可或缺的, 而Electron创建多标签也非常的简单,下面是一个演示的demo

这个demo可以额外打开三个窗口, 分别是bilibili.com, youtube.com, local-list.html, 因为Electron本身集成了Chromium内核, 所以在打开bilibili.com后, 点击网站内的内容, 可以再次打开新的窗口

  • index.html
代码语言:javascript
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开启新的窗口</title>
</head>

<style>
    body {
        padding: 0;
        margin: 0;
        background-color: #FCF6E5;
        text-align: center;
    }
    button {
        height: 80px;
        font-size: 36px;
        border-radius: 6px;
        background-color: #ffffff;
        margin-top: 20px;
    }

    #bilibili{
        color: #E5697A;
    }
    #youtube{
        color: #A84631;
    }
</style>

<body>
    <button id="bilibili">打开B站</button>
    <button id="youtube">打开youtube</button>
    <button id="local-list">打开本地文件local-list.html</button>
</body>


<script>
    const path = require("path");
    const electron = require("electron");

    let BrowserWindow = electron.remote.BrowserWindow;


    let bilibiliWindow = null;
    let youtubeWindow = null;
    let localListWindow = null;

    document.getElementById("bilibili").onclick = function(){

        bilibiliWindow = new BrowserWindow ({width: 1000, height:800})

        bilibiliWindow.loadURL("https://bilibili.com/");

        bilibiliWindow.on("close", function(){
            bilibiliWindow = null;

        })
    }

    document.getElementById("youtube").onclick = function(){

        youtubeWindow = new BrowserWindow ({width: 1000, height:800})

        youtubeWindow.loadURL("https://youtube.com/");

        youtubeWindow.on("close", function(){
            youtubeWindow = null;
        })
    }

    document.getElementById("local-list").onclick = function(){

        localListWindow = new BrowserWindow ({width: 1000, height:800})

        localListWindow.loadURL(`file://${__dirname}/local-list.html`);

        localListWindow.on("close", function(){
            localListWindow = null;
        })
    }
</script>

</html>
  • local-list.html
代码语言:javascript
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>工程师的五个级别</title>
</head>

<body>
    <style>
    .title {
        font-weight: bold;
        font-size: 36px;
    }

    ol li {
        list-style: none;
        color: #413F43;
        font-size: 26px;
        line-height: 40px;
        position: relative;
    }

    ol li:hover {
        background-color: #FCF6E5;
    }

    ol li:hover:after {
        font-size: 20px;
        border: 1px solid #AB3319;
        border-radius: 5px;
        content: attr(data);
        position: absolute;
        right: 0;
        opacity: 1;
        transition: all 0.2s ease-out;
    }



    </style>
    <div class="title">工程师的五个级别</div>
    <ol>
        <li data="爱迪生、福特、贝尔、香农、理查德.斯托曼">
            第一级:开创一个产业
        </li>
        <li data="迪恩,丹尼斯.里奇,肯·汤普逊">第二级: 能设计和实现别人不能做出的产品</li>
        <li data="张小龙,阮一峰">第三级: 能独立设计和实现产品并且能在市场上获得成功</li>
        <li data="项目主管">第四级: 能领导和带领其他人一同完成更有影响力的工作</li>
        <li data="两年开发经验的工程师">第五级: 能独立解决问题, 完成工程工作</li>
    </ol>
</body>

</html>

如果无法理解上面的代码, 可以看 用Electron创建跨平台应用(第一弹)

小结

在App, 小程序大行其道的今天, 用现有的网站封装一个app还真不是一件有难度的事情, 比如上面的窗口好好美化一下, 打包成一个独立的安装包, 欺骗外行是很容易的, 比如mac版的腾讯视频客户端, mac版的爱奇艺客户端, 基本上就是用的以上的套路, 当然不能总玩套路, 好好利用这项技术, 相信高仿一个atom或vscode也不是很难的事情, 如果你对市面上markdown编辑器不满意,自己动手封装一个markdown编辑器应该也是不难的~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档