首先你先完成了初识，以及引入VUE、修改了main.js的一些参数。
Electron初识以及使用VUE调接口+时时刷新
需求：我期望打开某个目录，修改其目录下的某个配置文件
要打开目录、或者文件，就需要用到Electron的dialog。该Api只支持再主程序使用，其他程序要使用就需要跟着我的步揍走。
第一步，引入：@electron/remote 新版取消了remote
npm install --save @electron/remote
第二步，再主程序中使用它。
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path')
// 1.引入remote模块
const remote = require("@electron/remote/main");
remote.initialize()
const createWindow = () => {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
// 禁止用户拖拽改变大小
resizable: false,
icon: "./favicon.ico",
webPreferences: {
nodeIntegration:true,
contextIsolation: false,
enableRemoteModule: true,
preload: path.join(__dirname, 'preload.js'),
},
autoHideMenuBar: true
})
win.loadFile('./src/view/index.html');
// 2.启用remote模块，渲染进程就可以使用主程序模块
remote.enable(win.webContents);
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
完成以上两个步揍后，我就可以在其他窗口使用dialog了。
话不多说，直接先上HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@next"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"/>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<title>测试一下</title>
</head>
<body>
<div id="app">
<el-form :model="form" label-width="120px">
<el-form-item label="请选择你的文件:">
<el-input v-model="filePath" placeholder="请选择你的文件" readonly @click="selectDirectory"/>
</el-form-item>
</el-form>
<el-row>
<el-button @click="readFile">读取配置文件</el-button>
<el-button @click="writeFile">写入配置文件</el-button>
</el-row>
</div>
<script src="../../preload.js"></script>
<script src="./index.js"></script>
</body>
</html>
index.js
const { dialog } = require('@electron/remote')
console.log(dialog, 'dialog')
//引入node原生fs模块
const fs = require("fs")
//引入node原生读写配置
const ini = require('ini');
const AppVue = {
data() {
return {
filePath: "",
config:null,
}
},
methods: {
selectDirectory() {
dialog.showOpenDialog({
properties: ["openFile"] // 选择文件
// properties: ["openDirectory"] // 选择目录
}).then((results) => {
// console.log(results.filePaths);
// console.log(results.canceled);
this.filePath = results.filePaths[0];
})
},
// 读取配置文件
readFile(){
if(!this.filePath){
this.errMsg("请先选择文件")
return
}
this.config = ini.parse(fs.readFileSync(this.filePath).toString());
console.log(this.config,'config')
},
// 写配置文件
writeFile(){
if(!this.config){
this.errMsg("请先读取文件")
return
}
this.config.邪七.简书测试 = "简书测试2022年7月22日12:21:36"
fs.writeFileSync(this.filePath, ini.stringify(this.config))
},
errMsg(msg){
dialog.showErrorBox("错误信息",msg);
},
},
}
const app = Vue.createApp(AppVue);
app.use(ElementPlus);
app.mount('#app')
最终效果：
image.png
image.png
其中输出的值，就自己调试文件看了。
至此，三个知识点结束。
- 学习Dialog的使用。更多参数：官网Dialog文档
- 使用Fs读写文件
- 使用ini读写配置
网友评论