Electron 入门
Electron 入门
TracyMei
资深软件工程师
展开
-
1.1.14 Electron 监听网络状态
可以用window.addEventListener来进行时间监听网络状态JavaScript的一种方式进行监听网络状态,监听的事件分别是online和offline。 online : 如果链接上网络,就会触发该事件。 offline : 如果突然断网了,就会触发该事件。 1 新建demo5.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">原创 2022-02-04 07:23:48 · 3425 阅读 · 0 评论 -
1.1.13 Electron 消息对话框
1 修改demo4.html2 运行程序原创 2022-02-04 07:23:57 · 733 阅读 · 0 评论 -
1.1.12 Electron 保存对话框
保存对话框dialog.showSaveDialog()1 修改 demo4.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-wid.原创 2022-02-04 07:24:08 · 607 阅读 · 0 评论 -
1.1.11Electron 选择文件对话框
打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开,它有两个参数,一个是设置基本属性,另一个是回调函数,如果是异步可以使用then来实现。 title : String (可选),对话框的标题 defaultPath : String (可选),默认打开的路径 buttonLabel : String (可选), 确认按钮的自定义标签,当为空时,将使用默认标签 filters : 文件选择过滤器,定义后可以对文件扩展名进行筛选 p原创 2022-02-04 07:24:26 · 2353 阅读 · 1 评论 -
1.1.10 Electron 子窗口和父窗口的通信
1 创建popup_page.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">.原创 2022-02-04 07:24:38 · 1488 阅读 · 0 评论 -
1.1.9 Electron 打开子窗口 window.open
window.open1 修改demo3.html2 修改demo3.jsvar {shell}=require('electron')var aHref=document.querySelector('#aHref')aHref.onclick=function(e){e.preventDefault()var href=this.getAttribute('href')shell.openExternal(href)}var mybtn..原创 2022-02-03 07:47:32 · 563 阅读 · 0 评论 -
1.1.8 Electron 中嵌入网页
1 修改main.jsvar electron =require('electron')var app=electron.appvar BrowserWindow=electron.BrowserWindow// 控制窗口的引用var mainWindow=null//打开的主窗口app.on('ready',()=>{mainWindow=new BrowserWindow({webPreferences: {nodeIntegration:.原创 2022-02-03 07:46:05 · 1395 阅读 · 0 评论 -
1.1.7 Electron 通过链接打开浏览器
1 新建demo3.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><.原创 2022-02-03 07:44:55 · 296 阅读 · 0 评论 -
1.1.6 Electron 打开调试框
在主程序中添加一句话mainWindow.webContents.openDevTools()2 运行程序原创 2022-02-03 07:42:52 · 623 阅读 · 0 评论 -
1.1.5 Electron右键菜单
在子进程中添加右键模板const btn=this.document.querySelector('#btn')const { BrowserWindow } = require('@electron/remote')window.onload=function(){btn.onclick=()=>{newwin=new BrowserWindow({width:800,height:800})newwin.loadFile('yellow.htm.原创 2022-02-03 07:40:58 · 831 阅读 · 1 评论 -
1.1.4 Electron的菜单快捷键
1 添加快捷键修改menu.js添加一句accelerator:'ctrl+n',2 运行程序,使用快捷键ctrl原创 2022-02-03 07:39:24 · 627 阅读 · 0 评论 -
1.1.3 Electron的菜单使用
1 创建一个菜单模板新建main目录,新建menu.js编写menu.jsconst {Menu, BrowserWindow} = require('electron')//菜单的模板var template = [{label: '凤来仪洗浴',submenu: [{label: '精品SPA',click:()=>{var win=new BrowserWindow({width:500,height:500,webPrefere.原创 2022-02-03 07:38:15 · 622 阅读 · 0 评论 -
1.1.2 Electron 主窗口打开子窗口
Electron Remode 模块的使用1 创建 demo2.html 文件2 创建 demo2.js 文件const btn=this.document.querySelector('#btn')const { BrowserWindow } = require('@electron/remote')window.onload=function(){btn.onclick=()=>{newwin=new BrowserWindow({..原创 2022-02-03 07:36:22 · 1906 阅读 · 0 评论 -
1.1.1 Electron 读取txt 文件数据
1 添加一个xiaojieje.txt 文件,写上女神的名字2 修改index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=de..原创 2022-02-03 07:33:32 · 982 阅读 · 0 评论 -
1.1.0 Electron 入门 Hello world
VSCodeAtomslackwordpress项目安装 npm install electron --save-dev全局安装npm install -g electron1.0 Hello World项目目录main.jsvar electron =require('electron')var app=electron.appvar BrowserWindow=electron.BrowserWindow// 控制窗口的引用...原创 2022-02-03 07:30:51 · 229 阅读 · 0 评论