Electron学习笔记（技术胖）

Electron学习笔记（技术胖）

标签（空格分隔）： 前端 桌面 技术胖 Electron

安装

前提：已经安装node，并且是10以上的版本

cnpm install electron --save-dev //仅安装在当前项目
cnpm install -g electron // 全局安装
npx electron -v // 查看版本
npx electron // 打开Electron界面
npx electron . // 运行该程序

打包成exe文件

  • cnpm install electron-packager --save-dev //安装electron-packager
  • "packager": "electron-packager ./ HelloWorld --all --out ./outApp --overwrite --icon=./app/img/icon/icon.ico" // 在package.json添加这个脚本
  • 在项目中新建outAPP文件夹。
  • cnpm run-script packager // 打包

其它资源

官方网站
https://www.electronjs.org/

Demo

Demo1：Hello World

效果：

- 打开一个普通应用程序的界面，主界面只有Hello World

var electron = require('electron');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({width: 800, height: 800})
    mainWindow.loadFile('index.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

Demo2：读取xiaojiejie.txt文件的内容

html

<button id="btn">小姐姐请进来</button>
<div id="mybaby"></div>
<script src="./render/index.js"></script>

index.js如下

var fs = require('fs')
window.onload = function(){
    var btn = this.document.querySelector("#btn");
    var mybaby = this.document.querySelector("#mybaby");
    btn.onclick = function(){
        fs.readFile('xiaojiejie.txt', (err,data)=>{
            mybaby.innerHTML = data;
        })
    }
}

main.js 如下

var electron = require('electron');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {nodeIntegration: true} // 让node下的所有东西都可以在渲染进程中使用
    })
    mainWindow.loadFile('index.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

Demo3：点击打开新窗口

demo.html

<button id="btn">
    打开新的窗口
</button>
<script src="./render/demo.js"></script>

yellow.html

<body style="background-color: yellow;">
    <h1>我是黄色页面</h1>
</body>

demo.js

const btn = this.document.querySelector('#btn')
const BrowserWindow = require('electron').remote.BrowserWindow

window.onload = function(){
    btn.onclick = ()=>{
        newWin = new BrowserWindow({
            width: 500,
            height: 500
        })
        newWin.loadFile('yellow.html')
        newWin.on('close',()=>{
            newWin = null
        })
    }
}

main.js

var electron = require('electron');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {nodeIntegration: true} // 让node下的所有东西都可以在渲染进程中使用
    })
    mainWindow.loadFile('demo.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

Demo4：顶部菜单栏

demo.html

<button id="btn">
    打开新的窗口
</button>
<script src="./render/demo.js"></script>

menu.js

const {Menu, BrowserWindow} = require('electron');
var template = [
    {
        label: '凤来仪洗浴会所',
        submenu: [
            {
                label: '精品SPA',
                accelerator: 'ctrl + n', // 给该菜单添加快捷键
                click:()=>{
                    var win = new BrowserWindow({
                        width: 500,
                        height: 500,
                        webPreferences: {nodeIntegration: true}
                    })
                    win.loadFile('yellow.html')
                    win.on('close', ()=>{
                        win = null;
                    })
                }
            },
            {label: '泰式按摩'}
        ]
    },
    {
        label: '大浪淘沙洗浴中心',
        submenu:[
            {label: '牛奶玫瑰浴'},
            {label: '爱情拍拍手'}
        ]
    }
]

var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)

main.js

var electron = require('electron');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {nodeIntegration: true} // 让node下的所有东西都可以在渲染进程中使用
    })
    require('./main/menu.js')
    mainWindow.loadFile('demo.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

Demo5：右键菜单

demo.html

<button id="btn">
    打开新的窗口
</button>
<script src="./render/demo.js"></script>

demo.js

// const { require } = require('globalthis/implementation')

const btn = this.document.querySelector('#btn')
const BrowserWindow = require('electron').remote.BrowserWindow

window.onload = function(){
    btn.onclick = ()=>{
        newWin = new BrowserWindow({
            width: 500,
            height: 500
        })
        newWin.loadFile('yellow.html')
        newWin.on('close',()=>{
            newWin = null
        })
    }
}

const {remote} = require('electron')

var rightTemplate = [
    {label: '粘贴', accelerator: 'ctrl+c'},
    {label: '复制', accelerator: 'ctrl+v'}
]

var m = remote.Menu.buildFromTemplate(rightTemplate)

window.addEventListener('contextmenu',function(e){
    // alert(111)
    e.preventDefault()
    m.popup({window:remote.getCurrentWindow()})
})

Demo6：在浏览器中打开超链接

demo2.html

<h1>
    <a id="aHref" href="https://jspang.com">技术胖的博客</a>
</h1>
<script src="./render/demo2.js"></script>

demo2.js

var {shell} = require('electron')
var aHref = document.querySelector('#aHref')

aHref.onclick = function(e){
    e.preventDefault()
    var href = this.getAttribute('href')
    shell.openExternal(href)
}

main.js

var electron = require('electron');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {nodeIntegration: true} // 让node下的所有东西都可以在渲染进程中使用
    })
    mainWindow.webContents.openDevTools()
    require('./main/menu.js')
    mainWindow.loadFile('demo2.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

Demo7：内嵌一个网页

main.js

var electron = require('electron');
const { console } = require('globalthis/implementation');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {nodeIntegration: true} // 让node下的所有东西都可以在渲染进程中使用
    })
    mainWindow.webContents.openDevTools()
    require('./main/menu.js')
    mainWindow.loadFile('demo2.html') // 加载html界面，也就是渲染进程

    // BrowserView
    var BrowserView = electron.BrowserView
    var view = new BrowserView()
    mainWindow.setBrowserView(view)
    view.setBounds({x:0, y:120, width:1000, height:680})
    view.webContents.loadURL('https://jspang.com')

    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

Demo8：子窗口——在新窗口打开此链接

demo2.html

<h1>
    <a id="aHref" href="https://jspang.com">技术胖的博客</a>
</h1>
<button id="mybtn">打开子窗口</button>
<script src="./render/demo2.js"></script>

demo2.js

var {shell} = require('electron')
var aHref = document.querySelector('#aHref')

aHref.onclick = function(e){
    e.preventDefault()
    var href = this.getAttribute('href')
    shell.openExternal(href)
}

var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function(e){
    window.open('https://jspang.com')
}

Demo9：子窗口向父窗口传递信息

demo2.html

<h1>
    <a id="aHref" href="https://jspang.com">技术胖的博客</a>
</h1>
<button id="mybtn">打开子窗口</button>
<!--接收子窗口传递过来的信息-->
<div id="mytext"></div>
<script src="./render/demo2.js"></script>

demo2.js

var {shell} = require('electron')
// const { window, document } = require('globalthis/implementation')
var aHref = document.querySelector('#aHref')

aHref.onclick = function(e){
    e.preventDefault()
    var href = this.getAttribute('href')
    shell.openExternal(href)
}

var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function(e){
    window.open('./popup_page.html')
}

window.addEventListener('message', (msg)=>{
    let mytext = document.querySelector('#mytext')
    mytext.innerHTML = JSON.stringify(msg.data)
})

popup_page.html

<h2>我是弹出子窗口</h2>
    <button id="popbtn">向父窗口传递信息</button>
    <script>
        var popbtn = this.document.querySelector('#popbtn')
        popbtn.onclick = function(e){
            // alert('111')
            window.opener.postMessage('我是子窗口传递过来的信息')
        }
    </script>

Demo10：打开一张图片并且在应用中显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开美女图片</button>
    <img id="images" src="" style="width: 100%;" />
</body>
<script>
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn')
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title: '请选择你喜欢的小姐姐照片',
            defaultPath: './xiaojiejie/a1.jpg',
            filters: [{name: 'img', extensions:['jpg']}],
            buttonLabel: '打开小姐姐'
        }).then(result=>{
            let image = document.getElementById('images')
            image.setAttribute("src", result.filePaths[0])
        }).catch(err=>{
            consle.log(err)
        })
    }
</script>
</html>

Demo11：保存文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开美女图片</button>
    <button id="saveBtn">保存文件</button>
    <img id="images" src="" style="width: 100%;" />
</body>
<script>
    const {dialog} = require('electron').remote
    const fs = require('fs')
    var openBtn = document.getElementById('openBtn')
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title: '请选择你喜欢的小姐姐照片',
            defaultPath: './xiaojiejie/a1.jpg',
            filters: [{name: 'img', extensions:['jpg']}],
            buttonLabel: '打开小姐姐'
        }).then(result=>{
            let image = document.getElementById('images')
            image.setAttribute("src", result.filePaths[0])
        }).catch(err=>{
            consle.log(err)
        })
    }

    var saveBtn = document.getElementById('saveBtn')
    saveBtn.onclick = function(){
        dialog.showSaveDialog({
            title: '保存文件'
        }).then(result=>{
            console.log(result)
            fs.writeFileSync(result.filePath, 'jspang.com')
        }).catch(err=>{
            console.log(err)
        })
    }
</script>
</html>

Demo12：消息对话框

<button id="messageBtn">弹出对话框</button>

var messageBtn = document.getElementById('messageBtn')
messageBtn.onclick = function(){
    dialog.showMessageBox({
        type: 'warning',
        title: '去不去由你',
        message: '是不是要跟胖哥去大宝剑',
        buttons: ['我要去', '不去了']
    }).then(result=>{
        console.log(result)
    })
}

Demo13：断网提醒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>JSPang.com 断网提醒测试</h2>
</body>
<script>
    // online offline
    window.addEventListener('online', function(){
        alert('官人，我来了，我们继续哦')
    })
    window.addEventListener('offline', function(){
        alert('小女子先行离开一会儿，请稍等')
    })
</script>
</html>

Demo14：消息通知

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="notifyBtn">通知消息</button>
</body>
<script>
    var notifyBtn = document.getElementById('notifyBtn')
    var option = {
        title: '小二，来订单了，出来接客了！',
        body: '有大官人翻你牌子了'
    }
    notifyBtn.onclick = function(){
        new window.Notification(option.title, option)
    }
</script>
</html>

Demo15：全局快捷键的注册和取消

main.js

var electron = require('electron');
const { console } = require('globalthis/implementation');

var app = electron.app // 引用app
var globalShortcut = electron.globalShortcut // 全局快捷键
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
    mainWindow = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {nodeIntegration: true} // 让node下的所有东西都可以在渲染进程中使用
    })

    // 全局快捷键打开一个网页
    globalShortcut.register('ctrl+e',()=>{
        mainWindow.loadURL('https://jspang.com')
    })

    // 自动判断绑定全局快捷键是否成功
    let isRegister = globalShortcut.isRegistered('ctrl+e')?'Register Success' : 'Register Fail'
    // 注意：下面这句话会在vscode的终端中输出
    console.log('---------------->' + isRegister)

    mainWindow.webContents.openDevTools()
    require('./main/menu.js')
    mainWindow.loadFile('demo5.html') // 加载html界面，也就是渲染进程

    // BrowserView
    // var BrowserView = electron.BrowserView
    // var view = new BrowserView()
    // mainWindow.setBrowserView(view)
    // view.setBounds({x:0, y:120, width:1000, height:680})
    // view.webContents.loadURL('https://jspang.com')

    mainWindow.on('close', ()=>{
        mainWindow = null
    })
})

app.on('will-quit', function(){
    // 注销全局快捷键
    globalShortcut.unregister('ctrl+e')
    globalShortcut.unregisterAll()
})

Demo16：复制到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        激活码：<span id="code">fafafqfafgggdgda</span>
        <button id="btn">复制激活码</button>
    </div>
</body>
<script>
    const {clipboard} = require('electron')
    const code = document.getElementById('code')
    const btn = document.getElementById('btn')
    btn.onclick = function(){
        clipboard.writeText(code.innerHTML)
        alert('复制成功')
    }
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,367评论 6赞 512
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,959评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,750评论 0赞 357
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,226评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,252评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,975评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,592评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,497评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,027评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,953评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,623评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2赞 358