Electron入门示例

不念不忘少年蓝@ 2022-04-11 06:58 261阅读 0赞

最近发现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\]

{
       
      "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\]  
文本文件，文件内容任意。