electron 版本号 v15.3.0
第九章 消息对话框操作
第一步
修改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-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="openBtn">打开图片</button>
<button id="saveBtn">保存</button>
<button id="messageBtn">打开消息对话框</button>
<img id = "images" style="width:100%"/>
</body>
<script>
const {dialog} = require('@electron/remote')
var openBtn = document.getElementById('openBtn')
var fs = require('fs')
openBtn.onclick = function(){
dialog.showOpenDialog({
// 标题
title:'请选择图片',
// 默认赋值
defaultPath:'9.jpg',
// 过滤器,name 后面的值随便写 extensions 里面写允许上传的类型
filters:[{
name:'img',extensions:['jpg']
}],
buttonLabel:'打开壁纸'
}).then(result=>{
console.log(result)
let image = document.getElementById('images')
image.setAttribute("src", result.filePaths[0])
}).catch(err => {
console.log(err)
})
}
var saveBtn = document.querySelector('#saveBtn')
saveBtn.onclick = function(){
dialog.showSaveDialog({
title:'保存文件',
}).then(result => {
console.log(result)
var saveText = '需要保存的信息是,123123123213123'
fs.writeFileSync(result.filePath,saveText)
}).catch(err => {
console.log(err)
})
}
var messageBtn = document.getElementById('messageBtn')
messageBtn.onclick = function(){
dialog.showMessageBox({
type:'warning',
title:'你要是这么想我也没办法！',
message:'你变了，你是不是不爱我了？',
buttons:['没有','爱过']
}).then(result => {
console.log(result)
})
}
</script>
</html>
第二步
测试验证
electron .
出现以下画面代表验证成功
image.png
红色为本次新增或修改的内容
image.png
第十章 断网提醒
第一步
新建demo5.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">
<title>Document</title>
</head>
<body>
<h2>断网提示测试</h2>
</body>
<script>
window.addEventListener('online', () => {
alert('已联网请继续!')
})
window.addEventListener('offline', () => {
alert('网断了,请稍后!')
})
</script>
</html>
第二步
修改main.js
var electron = require('electron') // 加载全局electron
const {ipcMain, Menu,BrowserWindow, BrowserView} = require('electron')
var app = electron.app // 引用 app
// var BrowserWindow = electron.BrowserWindow // 窗口引用
var mainWindow = null // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width:1200,
height:1200,
webPreferences: {
nodeIntegration: true, //设置开启nodejs环境
contextIsolation: false,
enableRemoteModule:true
}
}); // 设置主窗口大小
require('@electron/remote/main').initialize()
require('@electron/remote/main').enable(mainWindow.webContents)
require('./main/Menu.js')
mainWindow.webContents.openDevTools() // 启动打开调试器
mainWindow.loadFile('demo5.html') //加载html 页面
// BrowserView
// const view = new BrowserView()
// mainWindow.setBrowserView(view)
// view.setBounds({
// x:0,
// y:150,
// width:800,
// height:800
// })
// view.webContents.loadURL('https://www.jianshu.com/u/e9a31a3c3bdb')
mainWindow.on('closed',()=>{
mainWindow = null
})
})
// main show-menu 自定义名称，与demo2.js中的名称保持一致
ipcMain.on('show-menu', (event) => {
const template = [
{
label: '复制',
// type: 'checkbox', checked: true 选中的菜单前面会有√
type: 'checkbox', checked: true,
// 点击事件 调用方法 menu-method1 与 demo2.js 中 ipcRenderer.on('menu-method1') 为对应关系
click: () => { event.sender.send('menu-method1', '123213') }
},
// type: 'separator' 分割线 加上之后两个按钮之间有一条分割线
{ type: 'separator' },
{ label: '粘贴'}
]
const menu = Menu.buildFromTemplate(template)
menu.popup(BrowserWindow.fromWebContents(event.sender))
})
第三步
验证测试
electron .
出现以下内容验证成功
image.png
image.png
红色为本次修改或新增的内容
image.png
