Electron入门示例
程序员文章站
2022-06-07 08:50:25
...
最近发现Electron是个不错的东西，简单学了学，上网找了些资料，整理了一个小例子，界面很简单，一个textarea、两个button，可以将textarea的内容写入文件，或读取文件内容，显示在textarea中。注意文件使用UTF-8编码保存，不然会遭遇乱码问题。
例子很简单，高手绕行。
本文使用的Electron版本为：v1.3.2，64位。
界面和文件列表如下图所示：
代码很简单，简述如下：
1.package.json
2.main.js
3.index.html
5.myapi.js
6.info.txt
文本文件，文件内容任意。
例子很简单，高手绕行。
本文使用的Electron版本为：v1.3.2，64位。
界面和文件列表如下图所示：
代码很简单，简述如下：
1.package.json
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
2.main.js
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()
}
})
3.index.html
<!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>
5.myapi.js
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;
6.info.txt
文本文件，文件内容任意。
- your-app.rar (1.4 KB)
- 描述: 源代码
- 下载次数: 49
下一篇： 糖尿病有5个前期“警示灯”