![](https://img-blog.csdnimg.cn/direct/03f9d458b0d44d7c94058c076deb542c.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Electron
Electron专栏,探索跨平台桌面应用开发,分享Electron技术与实际项目经验。
好奇的菜鸟
想,都是问题;做,才是答案。
技术交流wx:yjtzfywh。
展开
-
5.Electron之shell(使用系统默认浏览器打开网页)
一、核心模块shellconst { shell } = require('electron')var aHref = document.querySelector('#ahref')aHref.onclick = function (e) { e.preventDefault() let href = this.getAttribute('href') shell.openExternal(href)}二、全部代码index.jsvar el原创 2022-04-26 14:42:54 · 3381 阅读 · 0 评论 -
4.Electron之自定义菜单(绑定快捷键、点击事件)
electron版本:v18.1.0一、主进程引入Menu模块const { Menu } = require('electron')二、编写菜单数据并启用const { Menu } = require('electron')var template = [ { label: '菜单A',//一级菜单名称 submenu: [ //定义子菜单 { label: '菜单A1' }, { label:原创 2022-04-24 08:21:31 · 3990 阅读 · 0 评论 -
3.Electron之remote,打开新窗体
一、安装依赖npm install --save @electron/remote二、主进程初始化remotevar electron = require('electron') //引入electron组件var app = electron.app //引入组件appvar BrowserWindow = electron.BrowserWindow //窗口引用var mainWindow = null //申明打开窗口app.on('ready', () =>原创 2022-04-24 08:09:26 · 2456 阅读 · 0 评论 -
2.Electron之HelloWorld
环境搭建:1.Electron开发环境搭建一、HelloWorld界面编写1、新建工作目录:F:\study\electron\helloworld2、使用编辑器(VScode)打开工作目录新建index.html文件3、编写界面内容html:5<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2022-04-23 12:08:19 · 2228 阅读 · 0 评论 -
1.Electron开发环境搭建
前置条件:电脑上的node.js环境正常;#查看node版本node -v#查看node包管理工具版本npm -v#查看默认仓库npm config ls查看npm仓库,建议使用国内镜像;一、新建开发目录初始化项目 npm init会生成一个package.json文件二、安装electron依赖npm install electron --save-dev命令说明:npm install xxx:安装某个module到本地项目的..原创 2022-04-23 11:03:07 · 3564 阅读 · 0 评论 -
6.Electron之BrowserView嵌入子视图
一、核心代码app.on('ready', () => { //app初始化参数 mainWindow = new BrowserWindow({ windth: 1200, height: 800, webPreferences: { nodeIntegration: true, //使用node功能 contextIsolation: false, enableRe原创 2022-04-26 15:23:39 · 2433 阅读 · 2 评论