首先你先完成了初識，以及引入VUE履澳、修改了main.js的一些參數(shù)。
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" />
<!-- 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的使用救拉。更多參數(shù)：官網(wǎng)Dialog文檔
- 使用Fs讀寫文件
- 使用ini讀寫配置
