Electron桌面应用程序

2017-11-05

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

https://blog.csdn.net/xcy1193068639/article/details/79514893
**本人npm安装都不好使都是用cnpm安装的**
官方网址 https://electronjs.org/
官方文档(4.6模块api) https://wizardforcel.gitbooks.io/electron-doc/content/api/browser-window.html
Vscode中electron代码自动提示
1
2
3
4
//cnpm install electron --save
"dependencies": {
"electron": "^3.0.3"
}
一、electron环境搭建
安装（全局安装只需要一次）
cnpm install -g electron
第一种方式创建项目
通过git 克隆项目(github下载也行)
1 $ git clone https://github.com/electron/electron-quick-start
2 cd electron-quick-start
3 安装依赖并运行
1
2
1、cnpm install安装依赖
2、运行 cnpm start
第二种方式通过electron-forge创建项目
electron-forge相当于electron的一个脚手架，可以让我们更方便的创建、运行、打包electron项目。
全局安装 electron-forge(只需要一次)
1
2
3
cnpm install -g electron-forge
//把报错的包更新版本
cnpm install electron-prebuilt@1.4.13 -g

2、创建项目

1	electron-forge init my-new-app（my-new-app项目名）

注意：这一步会默认安装模块(不需要再npm install)，如果失败删掉node_modules，重新cd到项目里面运行 cnpm install 或者yarn
3、cd到项目里面 npm start
第三种方式手动搭建electron项目
1 新建一个文件夹（文件夹不能是中文）
2 新建index.html/main.js两个文件
3 npm init 生成package.json文(没有什么依赖包就全局安装electron即可）

main.js

//引入electron模块
var electron =require('electron');

//nodejs中的path模块
var path=require('path');
//创建electron引用     控制应用生命周期的模块
const app=electron.app;
//创建electron BrowserWindow的引用          窗口相关的模块
const BrowserWindow=electron.BrowserWindow;
//变量 保存对应用窗口的引用
let mainWindow=null;
//监听应用准备完成的事件
app.on('ready',function(){
     //创建窗口BrowserWindow类的实例 赋值给mainWindow打开窗口
    //软件默认打开的宽度和高度
    mainWindow=new BrowserWindow({width: 800, height: 600});
    //把index加载到窗口里面
    //mainWindow.loadFile('index.html');
    //mainWindow.loadURL(`file://${__dirname}/index.html`);//
    mainWindow.loadURL(path.join('file:',__dirname,'index.html'));//绝对路径
    console.log(path.join('file:',__dirname,'index.html'));

    //开启渲染进程中的调试模式
    mainWindow.webContents.openDevTools();

    //窗口关闭的事件
    mainWindow.on('closed', function () {
        mainWindow = null;
    })
})
//监听所有窗口关闭的事件
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q

    // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

//macos
app.on('activate', () => {
    // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
        if (mainWindow === null) {
            createWindow();
        }
});

4 运行命令 electron . 注意：命令后面有个点
二、Electron 主进程和渲染进程
1 Electron 运行 package.json 的 main 脚本的进程被称为主进程。在主进程中运行的脚本通过创建 web 页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。
2 由于 Electron 使用了 Chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中。
3 主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
进程（了解）：进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
线程（了解）：在⼀一个程序里的一个执行路线就叫做线程（thread）。更准确的定义是：线程是“一个进程内部的控制序列”。
线程和进程（了解）：一个程序至少有一个进程,一个进程至少有一个线程 ##### Electron 渲染进程中通过 Nodejs 读取本地文件

在普通的浏览器中，web 页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。Nodejs 在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作原生 GUI。虽然如此，因为集成了 Nodejs，渲染进程也有了操作系统底层 API 的能力，Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用，方便我们处理链接、路径、文件 MD5 等，同时 npm 还有成千上万的模块供我们选择。

var fs = require('fs');
var content = document.getElementById('content');
var button = document.getElementById('button');
button.addEventListener('click',function(e){
   fs.readFile('package.json','utf8',function(err,data){
       content.textContent = data;
       console.log(data);
   });
});

Electorn remote模块

** 渲染进程都需要调用remote模块**
比如BrowserWindow打开窗口模块只能在主进程中使用，在渲染进程中重新打开一个新窗口就不好使了
remove模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径Electron 中, 与 GUI 相关的模块（如 dialog, menu 等)只存在于主进程，而不在渲染进程中。为了能从渲染进程中使用它们，需要用ipc 模块来给主进程发送进程间消息。使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于 Java 的 RMI。
Electron 渲染进程中通过 remote 模块调用主进程中的BrowserWindow 打开新窗口

renderer/newOpen.js

var path = require('path');
var btn = document.querySelector('#btn')
//渲染进程没法直接调用主进程中的模块
//但是我们可以通过 electron中的remote模块间接的调用主进程中的模块
var BrowserWindow = require('electron').remote.BrowserWindow;
 //全局变量保存窗口信息
var win = null
btn.onclick = function(){
   //调用BrowserWindow打开新窗口
    win = new BrowserWindow({
      width: 400,
      height: 300,
      // frame:false,//是否显示顶部的菜单
      // fullscreen:true,//全屏展示
    });
    //新窗口加载 index.html 页面
    win.loadURL(path.join('file:', __dirname, 'index.html'));
    win.on('closed', () => {
        win = null;
    })
}

**渲染进程的js需要在index.html引入js文件**
1
<script src="renderer/newOpen.js"></script>
Electron 自定义软件顶部菜单、以及绑定快捷键
api文档 https://electronjs.org/docs/api/menu-item
Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单。这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用
accelerator绑定快捷键
可以通过角色来为menu添加预定义行为 ** 直接定义role: 'copy'功能是复制**

main/menu.js 主进程中实现自定义顶部菜单（推荐）

/*
    var electron = require('electron');
    var Menu = electron.Menu;
*/
const { Menu } = require('electron');
//定义菜单
var template = [
    {
        label: '文件',
        submenu: [
            {
                label: '新建文件',
                 accelerator: 'ctrl+n',//快捷键
                click: function () {
                    console.log('ctrl+n');
                }
            },
            {
                label: '新建窗口',
                click: function () {
                    console.log('new window');
                }
            }
        ]
    },
    {
        label: '编辑',
        submenu: [
            {
                label: '复制',
                role: 'copy'//角色功能复制
            },
            {
                label: '截切',
                role: 'cut'
            }
        ]
    }
]
var m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);

main.js主进程(替换一下app.on(‘ready’,function(){})在窗口加载好调用 require(‘./main/menu’);)

function createWindiw(){
    //创建窗口BrowserWindow类的实例 赋值给mainWindow打开窗口
    //软件默认打开的宽度和高度
    mainWindow = new BrowserWindow({ width: 800, height: 600 });
    //把index加载到窗口里面
    //mainWindow.loadFile('index.html');
    //mainWindow.loadURL(`file://${__dirname}/index.html`);//
    mainWindow.loadURL(path.join('file:', __dirname, 'index.html'));//绝对路径
    console.log(path.join('file:', __dirname, 'index.html'));

    //开启渲染进程中的调试模式
    mainWindow.webContents.openDevTools();

    //窗口关闭的事件
    mainWindow.on('closed', function () {
        mainWindow = null;
    })
    //执行设置菜单操作
    require('./main/menu');
}
//监听应用准备完成的事件
app.on('ready', createWindiw)

渲染进程remote模块实现顶部菜单以及右键菜单

在顶部菜单渲染的时候会闪烁之前的默认菜单建议主进程实现

renderer/menu

var remote=require('electron').remote;
const Menu=remote.Menu;
//定义菜单
var template = [{跟主进程方式一样}]

var m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);
//右键菜单

window.addEventListener('contextmenu',function(e){
    e.preventDefault();
    //在当前窗口点击右键的时候弹出  定义的菜单模板
    m.popup({window:remote.getCurrentWindow()})
},false)

渲染进程需要在index.html引入该js文件主进程实现是直接在main.js中require引入即可
1
2

<script src="renderer/menu.js"></script>
Electron 主进程和渲染进程通信
有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就用到了主进程和渲染进程之间的相互通信
**Electron 主进程，和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRenderer**
ipcMain：当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。
pcRenderer：使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。也可以接收主进程回复的消息

index.html

<button id='send'>
    渲染检查执行主进程里面的方法
</button>
<br>
<br>
<button id="sendreplay">
    渲染进程执行主进程里面的方法，主进程给渲染进程反馈处理结果 （异步）
</button>
<br>
<br>
<button id="sendsync">
    渲染进程和主进程通信 （同步）
</button>

渲染进程(renderer/ipcRenderer.js)执行主进程(main.js)中的方法

// 渲染进程执行主进程里面的方法，主进程给渲染进程反馈处理结果 。
var sendreplayDom = document.querySelector('#sendreplay');
//渲染进程执行主进程中的方法
sendreplayDom.onclick = function () {
    //渲染进程给主进程广播数据
    ipcRenderer.send('sendreplay', 'this is renderer aaa');
}
//接收主进程广播的事件
ipcRenderer.on('replay', function (event, data) {
    console.log(data);//主进程传的数据
})
//渲染进程和主进程通信 （同步）
var sendsyncDom = document.querySelector('#sendsync');
sendsyncDom.onclick = function () {
    //同步
    var msg = ipcRenderer.sendSync('sendresync', 'this is renderer sendresync');
    console.log(msg);
}

主进程main.js中的ipcMain模块(main/ipcMain.js)

//接收广播 并且返回处理结果
ipcMain.on('sendreplay', function (event, data) {
    console.log(data);//this is renderer aaa
    //主进程给渲染进程广播数据
    event.sender.send('replay', '主进程传的数据');
})
//接收同步
ipcMain.on('sendresync', function (event, data) {
    console.log(data);
    //给渲染进程返回数据
    event.returnValue = 'this is  sync  main';
})

主进程main.js引入ipcMain模块

引入到ready监听事件中即可

function createWindiw(){
    mainWindow = new BrowserWindow({ width: 800, height: 600 });
    mainWindow.loadURL(path.join('file:', __dirname, 'index.html'));//绝对路径
    mainWindow.webContents.openDevTools();
    mainWindow.on('closed', function () {
        mainWindow = null;
    })
    //渲染进程执行主进程中的方法 （同步）
    require("./main/ipcMain");
}
//监听应用准备完成的事件
app.on('ready', createWindiw)

案例渲染进程执行主进程的打开新窗口方法

渲染进程中的事件renderer/ipcOpenNewWindow.js

var { ipcRenderer } = require('electron');
var btn = document.querySelector("#btn_new");
//渲染进程执行主进程中的方法
btn.onclick = function () {
    //渲染进程给主进程广播事件
    ipcRenderer.send('openWindow');
}

主进程的模块main/ipcMainNewOpen.js

var {ipcMain,BrowserWindow} =require('electron');
var path=require('path');
var win=null;
//接收到渲染进程的广播openWindow
ipcMain.on("openWindow", function() {
  //调用 BrowserWindow打开新窗口
  win = new BrowserWindow({
    width: 400,
    height: 300
    // frame:false,
    // fullscreen:true
  });
  win.loadURL(path.join("file:", __dirname, "../new.html"));
  win.on("closed", () => {
    win = null;
  });
});

main.js主进程引入ipcMainNewOpen模块

function createWindiw(){
    mainWindow = new BrowserWindow({ width: 800, height: 600 });
    mainWindow.loadURL(path.join('file:', __dirname, 'index.html'));//绝对路径
    mainWindow.webContents.openDevTools();
    mainWindow.on('closed', function () {
        mainWindow = null;
    })

    //主进程中的打开新窗口方法
    require("./main/ipcMainNewOpen");
}

app.on('ready', createWindiw)

index.html引入渲染进程的js

新创建new.html文件和index同级（新窗口打开的是new.html）

1 2	<!-- 渲染进程执行主进程中的打开新窗口方法（异步） --> <script src="renderer/ipcOpenNewWindow.js"></script>

Electron 渲染进程与渲染进程之间的通信

窗口跟窗口之间的通信
最简单的方法是通过localstorage 给另一个渲染进程传值(建议使用方式)
1
2
localStorage.setItem(key,value)
localStorage.getItem(key)
通过 BrowserWindow 和 webContents 模块实现渲染进程和渲染进程的通信

webContents 是一个事件发出者.它负责渲染并控制网页，也是 BrowserWindow 对象的属性。

1
2
3

var {BrowserWindow} =require('electron');
//主进程直接向渲染进程广播
BrowserWindow.getFocusedWindow().webContents.send('action','save')

var {ipcRenderer}=require('electron');
ipcRenderer.on('action',function(event,action){
    console.log(action);
})

需要了解的几个知识点

获取当前窗口的 id

1	const winId = BrowserWindow.getFocusedWindow().id;

监听当前窗口加载完成的事件

1	win.webContents.on('did-finish-load',(event,data) => { })

同一窗口之间广播数据

1
2
3

win.webContents.on('did-finish-load',(event) => {
    win.webContents.send('msg',winId,'我是 index.html 的数据');
})

渲染进程通过运行主进程方法来向渲染页面传递参数

renderer/ipcOpenNewWindow.js

var { ipcRenderer } = require('electron');

var btn = document.querySelector("#btn_new");
btn.onclick = function () {
    var nid = "123456";
    //渲染进程执行主进程的openWindow方法打开新窗口
    ipcRenderer.send('openWindow', nid);
}

main/ipcMainNewOpen(主进程模块需要在main.js中require导入到ready监听事件中)

var {ipcMain,BrowserWindow} =require('electron');
var path=require('path');
var win=null;
//接收到广播以及参数nid = "123456" 这是index.html渲染进程向new.html渲染进程传递数据
ipcMain.on("openWindow", function (event, nid) {
  var winId = BrowserWindow.getFocusedWindow().id;
  //调用 BrowserWindow打开新窗口
  win = new BrowserWindow({
    width: 400,
    height: 300
  });
  win.loadURL(path.join("file:", __dirname, "../new.html"));
  //开启渲染进程中的调试模式
  win.webContents.openDevTools();
  //通过win.webContents.send把当前数据广播给new进程
  //did-finish-load窗口加载完在广播
  win.webContents.on("did-finish-load", function() {
    win.webContents.send("toNews", nid);
  });
  win.on("closed", () => {
    win = null;
  });
});

renderer/new.js（渲染进程在用到的html中引入js）

var { ipcRenderer } = require('electron')
ipcRenderer.on("toNews", function(event, nid) {
    console.log(nid);//123456
});

new.html

1	<script src='renderer/new.js'></script>

上边只是单纯的index.html渲染进程向new.html渲染进程传递参数**下边是全部代码**
渲染页面向渲染页面通信（代码全）
**接下来我们要怎么样在new的渲染进程接收参数在向index渲染进程传递参数**

index.html

1
2
3

<button id='btn_new'>渲染进程执行主进程中打开新窗口方法</button>
<!-- 渲染进程执行主进程中的打开新窗口方法 （异步） -->
<script src="renderer/ipcOpenNewWindow.js"></script>

new.html

<body>
    我是new页面
</body>
<script src='renderer/new.js'></script>

renderer/ipcOpenNewWindow.js

var { ipcRenderer } = require('electron');
var btn = document.querySelector("#btn_new");
btn.onclick = function () {
    var nid = "123456";
    //渲染进程触发主进程中的openWindow方法打开新窗口
    ipcRenderer.send('openWindow', nid);
 }
//接收new 传过来的数据
ipcRenderer.on('toIndex', function (event, data) {
    console.log(data)
})

主进程main/ipcMainNewOpen.js模块

var {ipcMain,BrowserWindow} =require('electron');
var path=require('path');
var win=null;
//接收到广播
ipcMain.on("openWindow", function (event, nid) {
  //获取当前窗口的对象 当前第几个窗口然后传递给渲染页面拿到窗口id
  //index的窗口mainWindow.loadURL(path.join('file:', __dirname, 'index.html'));
  var winId = BrowserWindow.getFocusedWindow().id;
  console.log('winId',winId)//1

  //调用 BrowserWindow打开新窗口
  win = new BrowserWindow({
    width: 400,
    height: 300
    // frame:false,
    // fullscreen:true
  });
  win.loadURL(path.join("file:", __dirname, "../new.html"));
  //var winId = BrowserWindow.getFocusedWindow().id;如果放在这id就是2 是new的窗口

  //开启渲染进程中的调试模式
  win.webContents.openDevTools();
  //  通过win.webContents.send把当前数据广播给new进程
  //did-finish-load窗口加载玩在广播
  win.webContents.on("did-finish-load", function() {
    //将数据和winId传递给new渲染进程
    win.webContents.send("toNews", nid, winId);
  });
  win.on("closed", () => {
    win = null;
  });
});

渲染进程renderer/new.js

var { ipcRenderer } = require('electron');
 /*注意 渲染进程使用主进程的模块需要remote*/
var BrowserWindow = require('electron').remote.BrowserWindow;
ipcRenderer.on("toNews", function (event, nid, winId) {
    console.log(nid);
    //winId第一个窗口的id
    console.log("winId", winId);
    //获取对应id的窗口 winId相当于主进程中的index.html(mainWindow)
    //mainWindow.loadURL(path.join('file:', __dirname, 'index.html'));
    //firstWin相当于拿到了index.html的窗口
    var firstWin = BrowserWindow.fromId(winId);
    //向index渲染进程窗口发送toIndex通信和数据
    firstWin.webContents.send('toIndex','this is news');
});

主进程main.js引入ipcMainNewOpen模块(main.js增加的代码部分)

function createWindiw(){
    //主进程中的打开新窗口方法
    require("./main/ipcMainNewOpen");
}
//监听应用准备完成的事件
app.on('ready', createWindiw)

Electron Shell模块在用户默认浏览器中打开外部URL网址、标签嵌入新的页面

shell 模块提供了集成其他桌面客户端的关联功能.
1
2
var shell = require('shell');
shell.openExternal('https://github.com');
Shell模块在用户默认浏览器中打开外部URL网址

index.html

1
2
3

<a id='adom' href="https://www.baidu.com">打开百度网址</a>
<!-- shell模块 打开外部浏览器  -->
<script src="renderer/linkUrl.js"></script>

renderer/linkUrl.js

var { shell } = require('electron')
var aDom = document.querySelector('#adom');
aDom.onclick = function (e) {
    // 阻止a标签的默认行为
    e.preventDefault();
    var href = this.getAttribute('href');
    //sheel模块打开外部浏览器
    shell.openExternal(href)
}

Electron DOM 标签嵌入新的页面

Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的应用运行的是不同的进程。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的。因为这能保证应用的安全性不受嵌入内容的影响。
1
<webview id="webview" src="https://www.itying.com" style="position:fixed; width:100%; height:100%"></webview>
案例:自定义头部菜单点击嵌入url网址和外部打开url网址

index.html

<!-- 内嵌网页 和iframe功能一样 -->
<webview id="myWebview" src="https://www.itying.com"></webview>
<!-- 自定义头部菜单 加载页面时内嵌url  -->
<script src="renderer/webview.js"></script>

主进程中自定义顶部菜单 main/TopMenu.js模块

var { Menu, shell, BrowserWindow } = require('electron');
//在默认浏览器打开url地址
function openWeb(url) {
    shell.openExternal(url);
}
function openWebview(url) {
    //获取当前窗口
    var win = BrowserWindow.getFocusedWindow();
    //向渲染进程广播发送数据url
    win.webContents.send('openWebview', url);
}
var template = [
    {
        label: '加载网页',
        submenu: [
            {
                label: '优酷',
                click: function () {
                    /*
                     看看当前窗口和获取的窗口是不是一个
                     console.log(BrowserWindow.getFocusedWindow());
                     var winId=BrowserWindow.getFocusedWindow().id;
                     console.log(winId);
                     console.log(BrowserWindow.fromId(winId))
                    */
                    openWebview('http://www.youku.com')
                }
            },
            {
                type: 'separator'//分隔符 文件中间隔着的线
            },
            {
                label: '百度',
                click: function () {
                    openWebview('http://www.baidu.com')
                }
            }

        ]
    },
    {
        label: '帮助',
        submenu: [
            {
                label: '百度',
                click: function () {
                    openWeb('https://www.baidu.com');
                }
            },
            {
                type: 'separator'  /*分隔符*/
            },
            {
                label: '联系我们',
                click: function () {
                    openWeb('https://www.itying.com');
                }
            }
        ]
    }
]
var m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);

main.js主进程导入TopMenu模块(新增部分代码)

function createWindiw(){
    //执行设置顶部菜单操作
    require('./main/TopMenu');
}
//监听应用准备完成的事件
app.on('ready', createWindiw)

renderer/webvier渲染进程

// 顶部菜单对应打开内嵌的url页面
var { ipcRenderer } = require('electron');

var myWebviewDom = document.querySelector('#myWebview');
//ipcRenderer接收主进程的广播openWebview发送的数据
ipcRenderer.on('openWebview', function (event, data) {
    // data就是链接地址
    myWebviewDom.src = data;
})

Electron 调用系统弹出框

https://electronjs.org/docs/api/dialog
系统默认的弹出框功能以及打开文件和保存文件的功能
1

一、electron环境搭建

安装 （全局安装 只需要一次）

第一种方式创建项目

第二种方式通过electron-forge创建项目

全局安装 electron-forge(只需要一次)

第三种方式手动搭建electron项目

二、Electron 主进程和渲染进程

Electorn remote模块

Electron 渲染进程中通过 remote 模块调用主进程中的BrowserWindow 打开新窗口

Electron 自定义软件顶部菜单、以及绑定快捷键

渲染进程remote模块实现顶部菜单以及右键菜单

Electron 主进程和渲染进程通信

渲染进程(renderer/ipcRenderer.js)执行主进程(main.js)中的方法

主进程main.js中的ipcMain模块(main/ipcMain.js)

主进程main.js引入ipcMain模块

案例 渲染进程执行主进程的打开新窗口方法

Electron 渲染进程与渲染进程之间的通信

最简单的方法是通过localstorage 给另一个渲染进程传值(建议使用方式)

通过 BrowserWindow 和 webContents 模块实现渲染进程和渲染进程的通信

需要了解的几个知识点

渲染进程通过运行主进程方法来向渲染页面传递参数

渲染页面向渲染页面通信（代码全）

Electron Shell模块在用户默认浏览器中打开外部URL网址、 标签 嵌入新的页面

Shell模块在用户默认浏览器中打开外部URL网址

Electron DOM 标签 嵌入新的页面

案例:自定义头部菜单点击嵌入url网址和外部打开url网址

Electron 调用系统弹出框

安装（全局安装只需要一次）

案例渲染进程执行主进程的打开新窗口方法

Electron Shell模块在用户默认浏览器中打开外部URL网址、标签嵌入新的页面

Electron DOM 标签嵌入新的页面