Electron入门示例
程序员文章站
2021-12-25 10:56:26
...
最近发现Electron是个不错的东西，简单学了学，上网找了些资料，整理了一个小例子，界面很简单，一个textarea、两个button，可以将textarea的内容写入文件，或读取文件内容，显示在textarea中。注意文件使用UTF-8编码保存，不然会遭遇乱码问题。
例子很简单，高手绕行。
本文使用的Electron版本为：v1.3.2，64位。
界面和文件列表如下图所示：
[align=center]
[img]http://dl2.iteye.com/upload/attachment/0119/4597/e7d81830-05b9-325b-89e9-69caf0a53145.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0119/4599/d9e753c8-7015-3657-bc75-12fa92a2c173.png[/img]
[/align]
代码很简单，简述如下：
[color=darkred][b]1.package.json[/b][/color]
[color=darkred][b]2.main.js[/b][/color]
[color=darkred][b]3.index.html[/b][/color]
[color=darkred][b]5.myapi.js[/b][/color]
[color=darkred][b]6.info.txt[/b][/color]
文本文件，文件内容任意。
例子很简单，高手绕行。
本文使用的Electron版本为：v1.3.2，64位。
界面和文件列表如下图所示：
[align=center]
[img]http://dl2.iteye.com/upload/attachment/0119/4597/e7d81830-05b9-325b-89e9-69caf0a53145.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0119/4599/d9e753c8-7015-3657-bc75-12fa92a2c173.png[/img]
[/align]
代码很简单，简述如下：
[color=darkred][b]1.package.json[/b][/color]
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
[color=darkred][b]2.main.js[/b][/color]
const {app, BrowserWindow} = require('electron')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(`file://${__dirname}/index.html`)
win.webContents.openDevTools()
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
[color=darkred][b]3.index.html[/b][/color]
<!doctype html>
<html>
<head>
<title>Wallimn的Electron入门示例</title>
<style type="text/css">
body {
margin: 0;
}
textarea {
width: 99%;
margin: 10px 0;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<textarea rows="10"></textarea>
<button id="write_btn">写文件</button>
<button id="read_btn">读文件</button>
<script src="./myapi.js"></script>
</body>
</html>
[color=darkred][b]5.myapi.js[/b][/color]
var fs = require('fs'),
textarea = document.getElementsByTagName('textarea')[0],
read_btn = document.getElementById('read_btn'),
write_btn = document.getElementById('write_btn');
function writeFile() {
var text = textarea.value;
console.log("写内容："+text);
var fileN = __dirname+'/message.txt';
console.log("文件名："+fileN);
fs.writeFileSync(fileN,text, 'utf8');
console.log("写完成！");
}
function readFile() {
var fileN = __dirname+'/info.txt';
console.log("文件名："+fileN);
var content = fs.readFileSync(fileN,'utf-8');
textarea.value=content;
console.log("读完成！");
}
write_btn.onclick = writeFile;
read_btn.onclick = readFile;
[color=darkred][b]6.info.txt[/b][/color]
文本文件，文件内容任意。
下一篇： 访问服务端口冲突