“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第n篇文章，点击查看活动详情”
身为苦逼前端，公司项目需要做桌面应用，于是学习electron来开发。
在这里记录一个简单的demo，基本逻辑为固定高宽的桌面应用有一个按钮，点击按钮在容器里显示txt文件的内容。
1.首先全局安装electron（局部也可以，我喜欢全局）
npm install -g electron
2.接着创建一个html文件，放入一个btn，以及显示用的容器content，并赋予id
<!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>Hello World</title>
</head>
<body>
<button id="btn">点我点我点我</button>
<div id="content"></div>
</body>
</html>
3.创建主进程文件main.js，并引入electron，且定义窗口高宽，配置入口文件以及允许使用node的api。
var electron = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow
var mainWindow = null
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 400,
height: 400,
webPreferences: {
nodeIntegration: true,
contextIsolation: false //nodejs 14及以上版本需添加，否则使用nodejs以及第三方的时候出现Uncaught ReferenceError: require is not defined
}
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', () => {
mainWindow = null
})
})
4.这时需要初始化项目，创建package.json
npm init
5.随便创建一个有内容的test.txt文件
我是随便的txt文件略略略
6.创建render/index.js，编写点击按钮显示txt内容的逻辑，在html中引入
<!-- index.html -->
<body>
<button id="btn">点我点我点我</button>
<div id="content"></div>
<script src="render/index.js"></script>
</body>
//render/index.js
var fs = require ('fs') //引入文件读写模块
window.onload = function(){
var btn = this.document.querySelector('#btn')
var content = this.document.querySelector('#content')
btn.onclick = function(){
fs.readFile('test.txt', (err, data) => {
console.log('data',data)
content.innerHTML = data
})
}
}
7.到目录文件夹下，运行命令
electron .
结果↓
点击效果↓
