electron小例子

時間 2019-11-29

標籤 electron 例子简体版

原文原文鏈接

說明：該例子主要實現把輸入框中的文字保存到本地的文本文檔中。html

在main中添加幾句代碼electron

const ipcMain = electron.ipcMain;
const dialog = electron.dialog;

ipcMain.on("openDir", function (e) {
    var fileName = dialog.showOpenDialog(mainWindow, {title: "選擇一個目錄", properties: ["openDirectory"]});
    e.returnValue = fileName ? fileName : null;
});

這段代碼防止文件沒有名字而出錯ui

html代碼this

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6 </head>
 7 <body>
 8 <button id="btn-select-dest-dir">選擇保存的目錄</button>
 9 <form id="form-data">
10     <div>
11         <textarea name="txt" style="width: 300px;height: 200px" required="required"></textarea>
12     </div>
13     <div>
14         <input type="submit" value="保存">
15     </div>
16 </form>
17 </body>
18 
19 <script>
20     // You can also require other files to run in this process
21     require('./renderer.js')
22 </script>
23 </html>

renderer代碼spa

 1 // This file is required by the index.html file and will
 2 // be executed in the renderer process for that window.
 3 // All of the Node.js APIs are available in this process.
 4 const {ipcRenderer}=require("electron");
 5 const fs = require("fs");
 6 
 7 class Renderer {
 8     constructor() {
 9         this.btnSelectDestDir = document.getElementById("btn-select-dest-dir");
10         this.formSaveData = document.getElementById("form-data");
11 
12         this.addListeners();
13     }
14 
15     addListeners() {
16         var self = this;
17 
18         this.btnSelectDestDir.onclick = function () {
19             var files = ipcRenderer.sendSync("openDir");
20 
21             if (files && files.length) {
22                 self.destDir = files[0];
23             }
24         };
25 
26         this.formSaveData.onsubmit = function (e) {
27             e.preventDefault();
28 
29             if (!self.destDir) {
30                 alert("請選擇要保存的目錄");
31                 return;
32             }
33 
34             var destFile = `${self.destDir}/data.txt`;
35             fs.writeFile(destFile, this["txt"].value, function (err) {
36                 if (!err) {
37                     alert(`成功保存文件${destFile}`);
38                 } else {
39                     alert("沒法保存文件");
40                 }
41             })
42         };
43     }
44 }
45 new Renderer();

運行便可code

補充：在main.js裏面的orm

能夠修改運行文件的路徑。。。htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。