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>
<img id="images" style="width: 100%"/>
</body>
<script>
const {dialog} = require("@electron/remote")
var openBtn = document.querySelector("#openBtn")
openBtn.onclick = function(){
dialog.showOpenDialog({
// 标题
title:'打开图片',
// 默认赋值
defaultPath:'9.jpg',
// 过滤器,name 后面的值随便写 extensions 里面写允许上传的类型
filters:[{
name:'image',
extensions:['jpg']
}],
buttonLabel:'选择图片'
}).then(result => {
console.log(result)
let image = document.querySelector("#images")
image.setAttribute("src", result.filePaths[0])
}).catch(err => {
console.log(err)
})
}
</script>
</html>
第二步
修改main.js
var electron = require('electron')
const {BrowserView} = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow
var mainWindow = null
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width:1200,
height:1200,
webPreferences: {
nodeIntegration: true, //设置开启nodejs环境
contextIsolation: false,
}
})
require('@electron/remote/main').initialize()
require('@electron/remote/main').enable(mainWindow.webContents)
require('./main/Menu.js')
mainWindow.loadFile('demo4.html')
mainWindow.webContents.openDevTools()
// 使用windowsView 打开子窗口
// const view = new BrowserView()
// mainWindow.setBrowserView(view)
// view.setBounds({
// x:0,
// y:120,
// width:800,
// height:800
// })
// view.webContents.loadURL('https://www.jianshu.com/u/e9a31a3c3bdb')
mainWindow.on('closed',()=>{
mainWindow = null
})
})
第三步
测试
electron .
出现以下画面代表操作成功
image.png
红色为本次修改或新增的内容
image.png
