Electron项目的开始和扩展问题

项目的开启

原生项目的构建

# 创建文件夹并进入文件夹
mkdir demo && cd demo

# 初始化项目
yarn init -y

# 安装 electron
yarn add --dev electron

#

package.json
...
"main": "main.js", //入口文件
"scripts": {
  "start": "electron ." //启动命令
},

main.js
const { app, BrowserWindow ,Menu} = require('electron')
const path = require('path') // 路径模块

// 设置自定义菜单
const template=[]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

// 创建窗口函数
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false, //禁止缩放
    show:false, //配合优化渲染
    backgroundColor: '#fff', //背景颜色
    webPreferences: {
      // __dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)
      preload: path.join(__dirname, 'preload.js')
    }
  })

  //开启调试模式 => 模式：`right` `left` `bottom` `detach`
  win.webContents.openDevTools({mode:'detach'})

  // 加载渲染html文件，也可以指定URL
  win.loadFile('index.html')

  // 优化渲染：第一次完成绘制时，如果窗口还没有被显示，渲染进程会发出 ready-to-show 事件 
  win.once('ready-to-show', () => {
    win.show()
  })
}

// 只有在app模块的ready事件被激发后才能创建浏览器窗口
app.whenReady().then(() => {
  createWindow() //通过调用createWindow
  app.on('activate', () => { // 兼容：在macOS上，当单击图标，并没有其他窗口打开
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 监听关闭窗口，在所有窗口关闭后，退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

preload 预加载脚本,将不同类型的进程桥接在一起,通过 versions 这一全局变量，将 Electron 的 process.versions 对象暴露给渲染器

preload.js

const { contextBridge } = require('electron');
// 预加载脚本,将不同类型的进程桥接在一起
contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
});

index.html
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
    <p id="info"></p>
    <!-- 执行脚本，可以添加其他的执行脚本 -->
    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js
//通过renderer.js读取各个模块的版本号并显示
const information = document.getElementById('info');
information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`;

Vue项目的构建

目前市面上大多采用了 electron-vue(已废弃) 和 vue-cli-plugin-electron-builder 来实习vue开发Electron的方法。

electron-vue(已废弃)

vue-cli-plugin-electron-builder

项目的调试

数据持久存储

electron-store

专门给electron设置的存储数据库，保存和加载用户首选项，应用程序状态，缓存等

yarn add electron-store || npm install electron-store

main.js
// main.js
const { app,ipcMain} = require('electron')
const Store = require('electron-store');
const store = new Store();

// 定义ipcRenderer监听事件
ipcMain.on('setStore', (_, key, value) => {
  store.set(key, value)
})
ipcMain.on('getStore', (_, key) => {
  let value = store.get(key)
  _.returnValue = value || ""
})

preload.js
// preload.js
const { contextBridge,ipcRenderer } = require('electron');

// 主进程和渲染进程进行通信，并暴露接口
const electronHandler = {
  ipcRenderer: {
    setStoreValue: (key, value) => {
      ipcRenderer.send("setStore", key, value)
    },
    getStoreValue(key) {
      const resp = ipcRenderer.sendSync("getStore", key)
      return resp
    },
  }
}
contextBridge.exposeInMainWorld('electron', electronHandler);

index.html
//存储及读取
electron.ipcRenderer.setStoreValue('token', '123456');
console.log(electron.ipcRenderer.getStoreValue('token'))

项目的打包

Electron Forge

安装 Electron Forge ,通过这个打包成无需安装的免安装版，也可以打包成exe安装软件，但是这个太拉了，不用这个,考虑 Inno Setup。

yarn add --dev @electron-forge/cli
npx electron-forge import

package.json
{
  "name": "my-app",
  "version": "0.0.1",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-zip"
        }
      ]
    }
  }
}

命令集合

// 打包命令，打包成为免安装版，输出目录默认为 out/
yarn package

// 打包命令，打包成为exe安装执行文件
yarn make

Inno Setup

打包软件，官方没有中文版本IDE，需要使用可以通过网络进行收集，中文版InnoSetup

Inno Setup 官网

如果需要打包成中文安装包，需要将配置文件修改为中文版本的，复制安装目录下的 Default.isl 文件，黏贴在 Languages 目录文件下，重命名为 Chinese，然后修改里面的内容为下列；注意格式需要为 UTF-8 with BOM 否则会出现乱码。
或者直接下载，然后将其放入 Languages 目录文件下下载文件