vue + electron應(yīng)用文件讀寫(xiě)

在使用electron制作桌面應(yīng)用時(shí)，基本都會(huì)需要數(shù)據(jù)的存儲(chǔ)。

如果要制作的應(yīng)用并不復(fù)雜，完全可以將數(shù)據(jù)存儲(chǔ)在本地文件當(dāng)中，然后應(yīng)用就可以通過(guò)這些文件進(jìn)行數(shù)據(jù)的讀寫(xiě)。

因?yàn)?code>electron的主進(jìn)程是支持node的，所以可以通過(guò)fs文件系統(tǒng)對(duì)文件完成讀寫(xiě)操作。

正常操作流程

• 首先先創(chuàng)建一個(gè)vue項(xiàng)目， 可以使用vue cli進(jìn)行創(chuàng)建

通過(guò)yarn serve命令測(cè)試是否能否運(yùn)行成功，界面正常出現(xiàn)即可。

• 通過(guò)yarn add electron -D加入electron。 然后在package.json同級(jí)目錄下創(chuàng)建一個(gè)electron_main.js文件，作為electron的主進(jìn)程。同時(shí)也需要設(shè)置一下package.json中的main，以及添加"start": "electron ."命令。

• 在loadURL加載頁(yè)面時(shí)，因?yàn)檎{(diào)試，可以先選擇yarn serve運(yùn)行起來(lái)的頁(yè)面
• 另外在webPreferences需要添加nodeIntegration，否則之后渲染進(jìn)程中使用require會(huì)出現(xiàn)問(wèn)題
• 運(yùn)行yarn start能夠成功打開(kāi)應(yīng)用

electron_main.js代碼：

const electron = require('electron');
// 控制應(yīng)用生命周期的模塊。
const {app, ipcMain} = electron;
// 創(chuàng)建原生瀏覽器窗口的模塊。
const {BrowserWindow} = electron;

let mainWindow;
function createWindow() {
  // 創(chuàng)建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 480, 
    height: 670,
    webPreferences: {
      nodeIntegration: true, 
      contextIsolation: false
    }
  });
  // 加載應(yīng)用的 index.html。
  // mainWindow.loadURL(`file://${__dirname}/common/index.html`);
  mainWindow.loadURL('http://localhost:9001/');
  // 啟用開(kāi)發(fā)工具
  mainWindow.webContents.openDevTools();
}

// Electron 會(huì)在初始化后并準(zhǔn)備
app.on('ready', createWindow);
// 當(dāng)全部窗口關(guān)閉時(shí)退出。
app.on('window-all-closed', () => {
  // 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  // 絕大部分應(yīng)用會(huì)重新創(chuàng)建一個(gè)窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

• 在public文件夾下可以創(chuàng)建一個(gè)static文件夾，然后創(chuàng)建renderer.js文件，渲染進(jìn)程的一部分需要調(diào)用electron的代碼可以放在這里。

此js文件要引入public的index.html文件當(dāng)中

const { ipcRenderer } = require('electron');
window.ipcRenderer = ipcRenderer;

在window中可以創(chuàng)建一個(gè)ipcRenderer，用來(lái)指向electron中的ipcRenderer。這樣可以讓之后的vue組件中也可以成功調(diào)用ipcRenderer。

因?yàn)樵诮M件中直接調(diào)用require('electron')找不到ipcRenderer， 會(huì)出現(xiàn)index.js?bdb9:8 Uncaught TypeError: fs.existsSync is not a function報(bào)錯(cuò)， 原因：見(jiàn)文末補(bǔ)充介紹

• 創(chuàng)建一個(gè)讀取文件方法readFs.js，和一個(gè)數(shù)據(jù)test.json

讀取方法：

const fs = require('fs')
// 讀取文件方法
function readFile(path){
    return new Promise((resolve, reject)=>{
        fs.readFile(path, { flag: 'r', encoding:'utf-8' }, (err, data) => {
            if (err) { reject('出錯(cuò)啦'); }
            resolve(data);
        }); 
    })
}

module.exports = { readFile }

測(cè)試數(shù)據(jù)：

[
    {
        "name": "張三",
        "age": 18,
        "sex": "boy"
    },
    {
        "name": "李四",
        "age": 47,
        "sex": "boy"
    }
]

然后在electron_main中調(diào)用看看：

let con = readFile('./src/assets/fs/test.json')
con.then(res=>{
  console.log(res)
})

發(fā)現(xiàn)在控制臺(tái)打印時(shí)會(huì)出現(xiàn)中文亂碼：

解決方法：修改package.json中的start: chcp 65001 && electron .

• 現(xiàn)在主進(jìn)程中已經(jīng)能夠成功讀取文件的數(shù)據(jù)了，那么如何將此數(shù)據(jù)傳遞給界面（渲染進(jìn)程）呢，需要使用到ipcMain和ipcRenderer來(lái)進(jìn)行相互通信。

• ipcMain： 從主進(jìn)程到渲染器進(jìn)程的異步通信，在主進(jìn)程中
• ipcRenderer： 從渲染器進(jìn)程到主進(jìn)程的異步通信，在渲染進(jìn)程中，之前已經(jīng)定義為window.ipcRenderer了， 地址：www.electronjs.org/zh/docs/lat…

electron_main.js: 使用event.sender.send可以在ipcMain中將數(shù)據(jù)傳遞到渲染器進(jìn)程中。

...

// 監(jiān)聽(tīng)渲染進(jìn)程發(fā)來(lái)的消息
ipcMain.on('render-msg', async (event, arg) => {
  if (arg == '獲取人物信息') {
    let con = await readFile('./src/assets/fs/test.json')
    event.sender.send('person-list', con)
  }
})

...

這里在vue的組件中使用ipcRenderer先向主進(jìn)程發(fā)送一個(gè)獲取人物信息的請(qǐng)求，

效果：

其實(shí)關(guān)于文件的寫(xiě)入也是相同，只不過(guò)是渲染進(jìn)程直接向主進(jìn)程發(fā)送數(shù)據(jù)即可。

雖然這應(yīng)該是一個(gè)比較簡(jiǎn)單的 api 實(shí)現(xiàn)，但是在過(guò)程上要注意各種配置，否則極容易出現(xiàn)報(bào)錯(cuò)，這時(shí)候就要去網(wǎng)上搜索解決方案了

補(bǔ)充介紹：Uncaught TypeError: fs.existsSync is not a function錯(cuò)誤

錯(cuò)誤代碼

Uncaught TypeError: fs.existsSync is not a function

    at getElectronPath (index.js?bdb9:7)

    at eval (index.js?bdb9:18)

    at Object../node_modules/electron/index.js (chunk-vendors.js:3159)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (reply.js?17a1:1)

    at Module../src/ipc/reply.js (app.js:1145)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:4)

在 Electron 的Issue #7300中找到了解決方案，作為一名 Electron 以及 Web 前端的初學(xué)者，自然要在此問(wèn)題上稍加分析，爭(zhēng)取多了解一些背景知識(shí)，提高學(xué)習(xí)質(zhì)量。

此問(wèn)題出現(xiàn)的原因?yàn)椋簄odejs 運(yùn)行時(shí)的 require 與編譯時(shí) webpack 的 require 是不同的。默認(rèn)情況下，window是全局的，然而在 webpack 編譯時(shí)會(huì)忽略window。

其他的解決方案：使用 preload 方法

mainWindow =new BrowserWindow({
????width: 800,
????height: 600,
????webPreferences: {
??????nodeIntegration: false,
??????preload: __dirname + '/preload.js'????}

??});

在 preload.js 文件中將要使用的模塊引入即可

window.ipcRenderer = require('electron').ipcRenderer;

到此這篇關(guān)于vue + electron應(yīng)用文件讀寫(xiě)操作的文章就介紹到這了,更多相關(guān)vue electron文件讀寫(xiě)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論