最近发现Electron是个不错的东西，简单学了学，上网找了些资料，整理了一个小例子，界面很简单，一个textarea、两个button，可以将textarea的内容写入文件，或读取文件内容，显示在textarea中。注意文件使用UTF-8编码保存，不然会遭遇乱码问题。
例子很简单，高手绕行。
本文使用的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
文本文件，文件内容任意。
- 大小: 6.2 KB
- 大小: 31.9 KB
分享到：
相关推荐
这个“webrtc初学者的入门示例应用”是为那些想要学习如何使用WebRTC构建跨平台通信系统的人准备的。通过这个项目，你将了解如何在Web、Android、iOS和Windows上实现视频和音频通信的基本流程。 1. **基本概念** -...
这个“electron入门篇”很可能是为初学者准备的一份教程资料，涵盖了Electron的基础概念以及一些常见的开发技巧。 首先，我们来了解一下Electron的核心概念。Electron是由Node.js和Chromium浏览器引擎组成的。Node....
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许...这个代码是electron文档上的示例代码，经过一些调整加上了自己的一些注释和自己的理解。
**Electron Fiddle入门指南** Electron Fiddle是一款强大的工具，专为JavaScript开发者设计，用于探索和构建基于Electron框架的小型应用。Electron是一个开源平台，它允许开发者使用Web技术（HTML、CSS和JavaScript...
标题 "electron.js数据库应用---入门(mysql+element-ui)" 指的是一个教程或者项目，它涵盖了使用Electron.js框架创建桌面应用程序，并结合MySQL数据库和Element-UI库进行数据管理的入门知识。 Electron.js是一个流行...
描述中的信息虽简洁，但暗示了这个压缩包可能包含了一个完整的开发环境或者示例项目，可以帮助用户快速入门Electron应用的开发。这可能是为了帮助学习者或开发者理解如何利用Electron构建桌面应用，尤其是对于那些...
描述中提到的"hello,world程序"是初学者入门编程时常用的示例，用于演示基本的程序输出功能。在这个上下文中，这个程序是一个使用Electron框架构建的简单应用，打开后会在屏幕上显示"hello,world"的页面。这表明...
这个"electron-quick-start.rar"文件是一个入门级别的项目，旨在帮助新手快速上手 Electron 开发。通过这个压缩包，你可以学习到如何构建一个简单的 "Hello world" 应用，而不必先安装 Git。 首先，"Hello world" ...
`electron-quick-start-master`是一个基础的Electron应用示例，通常用于新手入门，帮助开发者快速了解Electron的工作原理。 在`electron-quick-start-master`压缩包中，我们可以期待找到以下关键组成部分： 1. **...
- **第 2 章：创建第一个 Electron 应用程序** —— 通过构建简单的示例应用来熟悉 Electron 的核心组件和架构。 - **第二部分：构建跨平台应用程序** - **第 3 章：构建笔记应用** —— 实践一个完整的笔记应用...
《Electron快速入门详解》 Electron是一款由GitHub开发的开源框架，它允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。本教程将基于"electron-quick-start-master.zip"压缩包，深入讲解如何利用...
1. **入门教程**：这些教程通常以文章或视频的形式，介绍如何设置开发环境，创建第一个Electron应用，以及如何组织和运行代码。它们会解释`main`进程（Node.js进程，负责管理应用程序的生命周期）和`renderer`进程...
我的电子破解器 my-electron-crasher示例...有关Electron入门的更多信息，请查看Electron文档中的《 。 有关使用BugSplat的其他帮助，如果有任何疑问，请查阅我们网站上的或发送电子邮件至bugsplat.com。 祝你好运！
实例电子 电子应用示例。 入门套件 音频播放器 多窗口 简单文件管理器 这是Electron应用程序开发的入门工具包。 Electron上简单音频播放器的示例。 在上管理多个窗口的示例。 上简单文件管理器的示例。
电子浏览器同步示例使用Browsersync重新加载Electron App的示例。入门运行npm install 。 奔跑gulp watch 。 编辑并保存renderer.js和/或index.html ，然后Browsersync应该重新加载BrowserWindow。
这个压缩文件包含的是可执行的示例代码，可能覆盖了各种Electron应用场景，如文件操作、系统通知、网络请求等。通过研究和运行这些代码，学习者可以更直观地理解Electron的工作原理和最佳实践。 通过这些资源，你...
1. **快速入门**：介绍如何搭建开发环境，编写第一个Electron应用，以及运行和打包应用的基本步骤。 2. **API文档**： - **主进程**：讲解Electron中的主进程，即运行Node.js代码的部分，负责管理应用生命周期和与...
将此应用程序与应用程序结合使用以获取API代码示例，以帮助您入门。 基本的Electron应用程序仅需要以下文件： package.json指向应用程序的主文件，并列出其详细信息和依赖项。 main.js启动应用程序并创建一个...
入门 克隆回购： git clone https://github.com/PSPDFKit/pspdfkit-electron-example.git cd pspdfkit-electron-example 使用npm安装项目依赖项： npm install 重要提示：如果您使用的是 Windows，请不要使用 ...