Electron桌面应用开发2

一、项目初始化1

electron + react

npm install electron-is-dev --save

const { app, BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')

let mainWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 650,
    minWidth: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })

  const urlLocation = isDev ? "http://localhost:3000" : 'myUrl'

  mainWindow.loadURL(urlLocation)

})

npm start + npm run dev就可以启动项目了

接下来做些优化，会用到下面的包和工具

electron-is-dev 
concurrently: 连接多个命令，中间使用空格分开
wait-on：等待某个结果执行之后再去执行后续的命令 解决出现白屏
cross-env : 跨平台的环境变量设置 

bootstrap 
styled-components 

package.json

"dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\""

二

react-simplemde-editor

三、文件操作方法

const fs = window.require('fs').promises

export const readFile = (path) => {
  return fs.readFile(path, 'utf-8')
}

export const writeFile = (path, content) => {
  return fs.writeFile(path, content, 'utf-8')
}

export const renameFile = (path, newPath) => {
  return fs.rename(path, newPath)
}

export const deleteFile = (path) => {
  return fs.unlink(path)
}

四、数据持久化

引入第三方包 electron-store

https://www.npmjs.com/package/electron-store

edge浏览器下载扩展插件是不需要翻墙的