electron简单demo

小仓桑

已于 2023-03-17 16:01:53 修改

阅读量285

点赞数

分类专栏： Electron 文章标签： electron javascript 前端 Powered by 金山文档

于 2023-03-16 23:13:15 首次发布

本文链接：https://blog.csdn.net/qq_43462019/article/details/129603330

版权

Electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

结合到上一篇博客继续往下做点击跳转到上一篇

第一步：创建一个TXT文件

第二步：在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,
                contextIsolation: false,
            }
        }
    ) // 窗口的高度宽度
    mainWindow.loadFile('index.html') // 引入需要加载的页面
    mainWindow.on('close', () => {
        mainWindow = null
    })
})

第三步：创建一个编写逻辑的js文件

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

第四步：引入到html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
<div>
    <button id="btn">小姐姐请进来</button>
    <div id="myBaby"></div>
</div>
<script src="render/index.js"></script>
</body>
</html>