Electron入门示例ITeye - 凯时娱乐

Electron入门示例ITeye

2019-01-11 17:34:34 | 作者: 昌黎 | 标签: 文件,简略,内容 | 浏览: 2828

最近发现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
文本文件,文件内容恣意。
版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表凯时娱乐立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章