{"id":749,"date":"2023-07-26T22:07:22","date_gmt":"2023-07-26T14:07:22","guid":{"rendered":"http:\/\/gjweb.top\/?p=749"},"modified":"2024-01-11T09:31:46","modified_gmt":"2024-01-11T01:31:46","slug":"electron%e5%bf%ab%e9%80%9f%e4%b8%8a%e6%89%8b","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=749","title":{"rendered":"electron\u5feb\u901f\u4e0a\u624b"},"content":{"rendered":"\n

electron \u8d77\u624b\u5f0f<\/h2>\n\n\n\n

\u5f53\u524d\u7248\u672c\u4e3a\u5b98\u7f51\u6700\u65b0\u7248\u672c V25.3.0\uff0c\u5b9e\u8df5\u4e2d\u53d1\u73b0\u5728\u66f4\u6539\u955c\u50cf\u7684\u60c5\u51b5\u4e0b\u4f7f\u7528 npm<\/code>\u548c pnpm<\/code>\u4e0b\u8f7d electron<\/code> \u90fd\u4f1a\u7b49\u5f85\u65f6\u95f4\u8fc7\u957f\u7684\u95ee\u9898\uff0c\u63a8\u8350\u4f7f\u7528 yarn<\/code><\/p>\n\n\n\n

yarn init 
yarn add nodemon electron -D <\/code><\/pre>\n\n\n\n
\u914d\u7f6e package.json<\/p>\n\n\n\n
{\n      \"name\": \"demo\",\n      \"version\": \"1.0.0\",\n      \"description\": \"\",\n      \"main\": \"main.js\", \/*electron \u4e3b\u8fdb\u7a0b\u6587\u4ef6*\/\n      \"scripts\": {\n        \"dev\": \"nodemon --exec electron .\"\n      },\n      \"keywords\": [],\n      \"author\": \"\",\n      \"license\": \"ISC\",\n      \"dependencies\": {\n        \"electron\": \"^25.3.0\",\n        \"nodemon\": \"^3.0.1\"\n      }\n}<\/code><\/pre>\n\n\n\n
\u521b\u5efa main.js<\/p>\n\n\n\n
const {app,BrowserWindow} = require(\"electron\");\nconst path = require(\"path\");\nconst createWindows = ()=>{\n  const mainWindow = new BrowserWindow({\n    width:200,\n    height:200,\n    alwaysOnTop:false, \/*\u662f\u5426\u7f6e\u9876*\/\n    x:0, \/*\u7a97\u53e3\u7684x\u8f74\u4f4d\u7f6e*\/\n    y:100, \/*\u7a97\u53e3\u7684y\u8f74\u4f4d\u7f6e*\/\n    frame:false, \/*\u9690\u85cf\u6807\u9898\u680f*\/\n    transparent:true, \/*\u80cc\u666f\u900f\u660e*\/\n  })\n   \/* \u7f51\u9875\u5957\u58f3*\/\n   \/* mainWindow.loadURL(\"http:\/\/www.gjweb.top\")*\/\n   \/* \u89e3\u6790\u9879\u76ee\u6587\u4ef6*\/\n  mainWindow.loadFile(path.resolve(__dirname,\"index.html\"));\n   \/* \u63a7\u5236\u7a97\u53e3\u7f29\u653e\u6bd4\u4f8b 1\uff1a1*\/\n  mainWindow.setAspectRatio(1);\n   \/* \u81ea\u52a8\u6253\u5f00\u5f00\u53d1\u8005\u5de5\u5177*\/\n  mainWindow.webContents.openDevTools();\n}\napp.whenReady().then(()=>{\n  createWindows(); \/* \u521b\u5efa\u7a97\u53e3*\/\n})<\/code><\/pre>\n\n\n\n
\u521b\u5efa index.html \u89c6\u56fe<\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <!-- \u5b89\u5168\u7b56\u7565 -- \u53ea\u6709\u81ea\u8eab\u53ef\u4ee5\u8c03\u7528\u4e3b\u8fdb\u7a0b\u5bf9\u7cfb\u7edf\u8fdb\u884c\u64cd\u4f5c \u6280\u672f\u6808CSP -->
  <meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'; script-src 'self'\" \/>
  <meta charset=\"UTF-8\">
  <title>\u5ba2\u6237\u7aef<\/title>
  <style>
    html{
      \/* \u70b9\u51fbDOM\u53ef\u62d6\u52a8 *\/
      -webkit-app-region:drag 
    }
    textarea{
      \/* \u6587\u672c\u57df\u7981\u6b62\u62d6\u52a8 *\/
      -webkit-app-region:no-drag
    }
  <\/style>
<\/head>
<body>
    <h1>hello electron<\/h1>
<\/body>
    <!--\u521b\u5efa\u6e32\u67d3\u8fdb\u7a0b-->
    <script src=\".\/render.js\"><\/script> 
<\/html><\/code><\/pre>\n\n\n\n
\u521b\u5efa\u6e32\u67d3\u8fdb\u884c render.js<\/p>\n\n\n\n
console.log(\"\u6e32\u67d3\u7ebf\u7a0b\u5df2\u521b\u5efa\")<\/code><\/pre>\n\n\n\n
\u603b\u7ed3: electron \u4e2d main.js \u4f5c\u4e3a\u4e3b\u7ebf\u7a0b\u4e3b\u8981\u5bf9\u7cfb\u7edf\u76f8\u5173\u64cd\u4f5c(\u53ea\u80fd\u6709\u4e00\u4e2a\u4e3b\u7ebf\u7a0b), index.html \u9875\u9762(\u53ef\u4ee5\u6709\u591a\u4e2a\u9875\u9762\u5206\u5230\u4e0d\u540c\u7684\u7a97\u53e3\u548c\u8def\u7531), render.js \u6e32\u67d3\u7ebf\u7a0b\u53ef\u4ee5\u64cd\u4f5c\u6d4f\u89c8\u5668\u5bf9\u8c61(\u53ef\u4ee5\u6709\u591a\u4e2a\u6e32\u67d3\u8fdb\u7a0b)<\/p>\n\n\n\n
\n\n\n\n
\u4e3b\u8fdb\u7a0b\u901a\u4fe1<\/h2>\n\n\n\n
\u4e3b\u8981\u601d\u8def: \u4e3b\u8fdb\u7a0b\uff08main.js\uff09 —> \u9884\u52a0\u8f7d\u5904\u7406\u5668\uff08 preload.js\uff09—> \u6e32\u67d3\u8fdb\u7a0b \uff08render.js\uff09 \u53cd\u5411\u540c\u7406<\/p>\n\n\n\n
\u8003\u8651\u5b89\u5168\u539f\u56e0 preload.js \u53ea\u80fd\u4f7f\u7528\u90e8\u5206\u7684 node \u548c electron API\uff1b \u9700\u8981\u5728 main.js \u4e2d\u914d\u7f6e\u7ed9\u76f8\u5e94\u7684\u6743\u9650\u3002<\/p>\n\n\n\n
\u4e3b\u8fdb\u7a0b \u548c \u6e32\u67d3\u8fdb\u7a0b \u4e5f\u53ef\u76f4\u63a5\u901a\u4fe1\uff08\u5904\u4e8e\u5b89\u5168\u8003\u8651\u4e0d\u63a8\u8350\uff09<\/p>\n\n\n\n
\u914d\u7f6e main.js<\/h3>\n\n\n\n
const { ipcMain, ipcRenderer } = require(\"electron\");\nconst mainWindow = new BrowserWindow({\n    ...\n    \/**\u6307\u5b9a\u9884\u52a0\u8f7d\u811a\u672c\uff0c\u7528\u4e8e\u4e3b\u7ebf\u7a0b\u548c\u6e32\u67d3\u7ebf\u7a0b\u901a\u4fe1 *\/\n    webPreferences:{\n      preload:path.resolve(__dirname,'preload.js'),\n      nodeIntegration:true, \/* \u540c\u610f \u9884\u5904\u7406\u8fdb\u7a0b\u4f7f\u7528 node \u7684\u6a21\u5757*\/\n    }\n  })\n \n \/**\u4e3b\u8fdb\u7a0b \u548c \u9884\u52a0\u8f7d\u6587\u4ef6\u901a\u4fe1 *\/\nipcMain.on(\"saveData\",()=>{\n  console.log(\"\u89e6\u53d1\u4e86saveData\");\n})<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u9884\u5904\u7406\u5668\u4e2d preload.js<\/h3>\n\n\n\n
const { ipcMain, ipcRenderer } = require(\"electron\");\nconst { contextBridge } = require(\"electron\");\nipcRenderer.send(\"saveData\") \/* \u9884\u5904\u7406\u5668\u4e3b\u52a8\u50cf\u4e3b\u8fdb\u7a0b\u901a\u4fe1*\/\n\u200b\n\/**\n * \u521b\u5efa\u4f9b\u6e32\u67d3\u8fdb\u7a0b\u8bbf\u95ee\u7684\u51fd\u6570 \n * \u4f7f\u7528\u6e32\u67d3\u8fdb\u7a0b\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 window \u83b7\u53d6 api \u91cc\u9762\u7684\u51fd\u6570\u65b9\u6cd5\n * *\/\ncontextBridge.exposeInMainWorld('api',{\n  getSaveData:()=>{\n    ipcRenderer.send(\"saveData\")\n  }\n})\n\u200b\n\/*\u9884\u5904\u7406\u5668\u64cd\u4f5c\u6e32\u67d3\u8fdb\u7a0b\u8fdb\u884cdom\u64cd\u4f5c*\/\nwindow.addEventListener('DOMContentLoaded',()=>{\n  for(const app of ['chrome','electron','node']){\n    console.log(app);\n    const el = document.querySelector(`#${app}`)\n    el.innerHTML = `${app}  \u7248\u672c\u53f7 ${process.versions[app]}`\n  } \n})<\/code><\/pre>\n\n\n\n
\u5728\u6e32\u67d3\u8fdb\u7a0b\u4e2d render.js<\/h3>\n\n\n\n
console.log(window); \/* window\u793a\u4f8b\u53ef\u4ee5\u6253\u5370\u51fa api \u5bf9\u8c61\u7684\u65b9\u6cd5*\/\nwindow.api.getSaveData() \/* \u901a\u8fc7\u9884\u5904\u7406\u5668\u901a\u77e5\u4e3b\u8fdb\u7a0b*\/<\/code><\/pre>\n\n\n\n
\u603b\u7ed3\uff1a preload \u9884\u5904\u7406\u5668\u8fdb\u7a0b\u662f \u4e3b\u8fdb\u7a0b \u548c \u6e32\u67d3\u8fdb\u7a0b \u7684\u6865\u6881\uff0c preload \u65e2\u53ef\u4ee5\u64cd\u4f5c\u90e8\u5206\u7684 node API \u4e5f\u53ef\u4ee5\u8c03\u7528 DOM \u5185\u5bb9\u3002<\/p>\n\n\n\n
\n\n\n\n
\u4e3b\u8fdb\u7a0b\u4e3b\u52a8\u5411\u6e32\u67d3\u8fdb\u7a0b\u901a\u4fe1<\/h2>\n\n\n\n
main.js<\/p>\n\n\n\n
const mainWindow = new BrowserWindow({
    ...
    \/**\u6307\u5b9a\u9884\u52a0\u8f7d\u811a\u672c\uff0c\u7528\u4e8e\u4e3b\u7ebf\u7a0b\u548c\u6e32\u67d3\u7ebf\u7a0b\u901a\u4fe1 *\/
    webPreferences:{
      preload:path.resolve(__dirname,'preload.js'),
      nodeIntegration:true, \/\/ \u540c\u610f \u9884\u5904\u7406\u8fdb\u7a0b\u4f7f\u7528 node \u7684\u6a21\u5757
    }
 })
 mainWindow.loadFile(path.resolve(__dirname,\"index.html\"))
\/*mainWindow \u8868\u793a\u5f53\u524d\u7a97\u53e3\u7684\u5bf9\u8c61,\u901a\u8fc7 webContents \u53ef\u4ee5\u83b7\u53d6\u6e32\u67d3\u8fdb\u7a0b\u4e2d\u7684\u5bf9\u8c61(\u83b7\u53d6\u901a\u4fe1\u7684\u65b9\u5f0f\u4e5f\u662f\u901a\u8fc7\u9884\u5904\u7406\u5668\u6765\u4f20\u9012\u7684,\u6240\u6709 webContents \u4e5f\u53ef\u4ee5\u8c03\u7528\u5230 preload \u4e2d\u7684\u5185\u5bb9)*\/
mainWindow.webContents.send(\"toRender\",100);<\/code><\/pre>\n\n\n\n
preload.js<\/p>\n\n\n\n
const { contextBridge,ipcRenderer } = require(\"electron\");
\/**
 * \u521b\u5efa\u4f9b\u6e32\u67d3\u8fdb\u7a0b\u8bbf\u95ee\u7684\u51fd\u6570 
 * \u4f7f\u7528\u6e32\u67d3\u8fdb\u7a0b\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 window \u83b7\u53d6 api \u91cc\u9762\u7684\u51fd\u6570\u65b9\u6cd5
 * *\/
contextBridge.exposeInMainWorld('api',{
  toRender:(callback)=>{
    ipcRenderer.on('test', callback)
  }
})<\/code><\/pre>\n\n\n\n
render.js<\/p>\n\n\n\n
  const testFun = (event,value)=>{
    testContainer.innerHTML = Number(testContainer.innerHTML) + value;
  }
  window.api.toRender(testFun)<\/code><\/pre>\n\n\n\n
webContents \u95ee\u9898<\/h3>\n\n\n\n
webContents \u548c fromWebContents \u6709\u5565\u533a\u522b<\/h4>\n\n\n\n
webContent \u662f electron \u4e2d\u7684\u4e00\u4e2a\u7c7b\uff0c\u7528\u4e8e\u63a7\u5236\u548c\u64cd\u4f5c\u6e32\u67d3\u8fdb\u7a0b\u7684\u5185\u5bb9\uff0c\u5e38\u7528\u6765\u4e0e\u6e32\u67d3\u8fdb\u7a0b\u901a\u4fe1\u3001\u5bfc\u822a\u3001\u6267\u884c JS \u4ee3\u7801\u3001\u6ce8\u5165 css\u7b49\u3002\u53ef\u4ee5\u901a\u8fc7BrowserWindow<\/code>\u5b9e\u4f8b\u7684webContents<\/code> \u5bf9\u8c61\u6765\u8bbf\u95ee\u5f53\u524d\u7a97\u53e3\u5bf9\u8c61\uff0c\u4f8b\u5982 mainWindow.webContents<\/code> \u5c06\u8fd4\u56de mainWindow<\/code> \u7684\u7a97\u53e3\u5bf9\u8c61<\/p>\n\n\n\n
formWebContents \u662f BrowserWindow \u7684\u9759\u6001\u65b9\u6cd5, \u63a5\u53d7\u4e00\u4e2a webContents<\/code> \u5bf9\u8c61\u4e3a\u53c2\u6570, \u8fd4\u56de\u4e0e webContents<\/code> \u5bf9\u8c61\u5173\u8054\u7684 BrowserWindow<\/code> \u5b9e\u4f8b\u3002 \u4f8b\u5982 BrowserWindow.fromWebContents(webContents)<\/code>\u5c06\u8fd4\u56de\u4e0e\u7ed9\u5b9awebContents<\/code>\u5bf9\u8c61\u5173\u8054\u7684BrowserWindow<\/code>\u5b9e\u4f8b\u3002\u8fd9\u4e2a\u65b9\u6cd5\u901a\u5e38\u7528\u4e8e\u5728\u4e3b\u8fdb\u7a0b\u4e2d\u67e5\u627e\u4e0e\u7279\u5b9awebContents<\/code>\u5bf9\u8c61\u76f8\u5173\u8054\u7684\u7a97\u53e3\u3002<\/p>\n\n\n\n
\u603b\u7ed3 fromWebContents<\/code> \u65b9\u6cd5\u7528\u4e8e\u5728\u4e3b\u8fdb\u7a0b\u4e2d\u67e5\u627e\u6307\u5b9a\u7684 webContents<\/code> \u5bf9\u8c61\u76f8\u5173\u7684\u7a97\u53e3\uff1bwebContents \u7528\u4e8e\u63a7\u5236\u64cd\u4f5c\u6e32\u67d3\u8fdb\u7a0b\u5bf9\u8c61\u3002<\/p>\n\n\n\n
\n\n\n\n
\u53cc\u5411\u901a\u4fe1<\/h2>\n\n\n\n
\u57fa\u7840\u7248<\/h3>\n\n\n\n
\u4e3b\u8fdb\u7a0b main.js<\/p>\n\n\n\n
const createWindow = ()=>{\n  const mainWindow = new BrowserWindow({\n   ...\n    webPreferences:{\n      preload:path.resolve(__dirname,'preload.js'),\n      nodeIntegration:true, \/* \u540c\u610f \u9884\u5904\u7406\u8fdb\u7a0b\u4f7f\u7528 node \u7684\u6a21\u5757*\/\n    }\n  })\n\u200b\n  mainWindow.loadFile(path.relative(__dirname,\"index.html\"))\n}\napp.whenReady().then(()=>{\n  createWindow()\n})\n\u200b\nipcMain.on(\"mainData\",(event,value)=>{\n  console.log(\"mainData\",value);\n  \/*\u83b7\u53d6\u5f53\u524d\u7a97\u53e3\u793a\u4f8b\uff0c\u5411\u6e32\u67d3\u8fdb\u7a0b\u901a\u4fe1*\/\n  BrowserWindow.fromWebContents(event.sender).send(\"toRender\",\"\u5411\u6e32\u67d3\u8fdb\u7a0b\u8fd4\u56de\u6d88\u606f\")\n})\n\u200b<\/code><\/pre>\n\n\n\n
\u9884\u5904\u7406\u5668 preload.js<\/p>\n\n\n\n
const {ipcRenderer,contextBridge} = require(\"electron\");
\/**
 * \u521b\u5efa\u4f9b\u6e32\u67d3\u8fdb\u7a0b\u8bbf\u95ee\u7684\u51fd\u6570 
 * \u4f7f\u7528\u6e32\u67d3\u8fdb\u7a0b\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 window \u83b7\u53d6 api \u91cc\u9762\u7684\u51fd\u6570\u65b9\u6cd5
 * *\/
contextBridge.exposeInMainWorld(\"api\",{
  getMainData:()=>{
    ipcRenderer.send(\"mainData\",\"\u5411\u4e3b\u8fdb\u7a0b\u53d1\u9001\u4fe1\u606f\")
  }
})
\/*\u63a5\u53d7\u4e3b\u8fdb\u7a0b\u7684\u4fe1\u606f*\/
ipcRenderer.on(\"toRender\",(event,value)=>{
  console.log(value)
})<\/code><\/pre>\n\n\n\n
invoke\u53cc\u5411\u901a\u4fe1<\/h3>\n\n\n\n
main.js<\/p>\n\n\n\n
ipcMain.handle(\"test\",(event,value)=>{
    console.log(value);
    rteurn \"invoke \u4e3b\u8fdb\u7a0b\u5411\u6e32\u67d3\u8fdb\u7a0b\u901a\u4fe1\"
})<\/code><\/pre>\n\n\n\n
preload.js<\/p>\n\n\n\n
contextBridge.exposeInMainWorld(\"api\",{\n    setTest:(value)=>{\n        return ipcRenderer.invoke(\"test\",value); \/* invoke \u8fd4\u56de promise \u5bf9\u8c61*\/\n    }\n})<\/code><\/pre>\n\n\n\n
render.js<\/p>\n\n\n\n
 const result = await windos.api.setTest(\"\u6e32\u67d3\u8fdb\u7a0b\u5411\u4e3b\u8fdb\u7a0b\u901a\u4fe1\")
 console.log(result)<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u8fdb\u7a0b\u9694\u79bb\u4e0e\u6c99\u76d2\u6a21\u5f0f<\/h2>\n\n\n\n
\u8fdb\u7a0b\u9694\u79bb<\/h3>\n\n\n\n
\u5728 electron \u4e2d\u9884\u5904\u7406\u5668\u4f1a\u9ed8\u8ba4\u9694\u79bb\u4e3b\u8fdb\u7a0b\u548c\u6e32\u67d3\u8fdb\u7a0b\uff0c\u4f8b\u5982<\/p>\n\n\n\n
contextBridge.exposeInMainWorld(\"api\",{
    test:()=>{
        console.log(\"this is test\")
    }
})<\/code><\/pre>\n\n\n\n
\u5982\u4e0a\u9762\u4ee3\u7801 \u5728 preload \u9884\u5904\u7406\u5668\u6587\u4ef6\u4e2d\u9700\u8981\u8fd9\u6837\u6ce8\u518c\u540e\u624d\u80fd\u5728 \u6e32\u67d3\u8fdb\u7a0b\u4e2d \u901a\u8fc7 window.api \u8fdb\u884c\u8c03\u7528\uff0c \u5982\u679c\u60f3\u5728 preload \u6587\u4ef6\u4e2d\u76f4\u63a5\u901a\u8fc7\u589e\u52a0 window \u793a\u4f8b\u7684\u65b9\u5f0f\uff0c\u9700\u8981\u63a5\u89e6\u9ed8\u8ba4\u9694\u79bb\uff0c\u89e3\u9664\u9694\u79bb\u540e\u6e32\u67d3\u8fdb\u7a0b \u548c \u9884\u5904\u7406\u8fdb\u7a0b \u90fd\u53ef\u4ee5\u4f7f\u7528 node \u7684\u5168\u90e8\u6a21\u5757<\/strong><\/p>\n\n\n\n
\u914d\u7f6e\u65b9\u5f0f\u5982\u4e0b\uff1amain.js \u6587\u4ef6<\/p>\n\n\n\n
const createWindow = ()=>{\n  const mainWindow = new BrowserWindow({\n   ...\n    webPreferences:{\n      preload:path.resolve(__dirname,'preload.js'),\n      nodeIntegration:true, \/* \u540c\u610f \u9884\u5904\u7406\u8fdb\u7a0b\u4f7f\u7528 node \u7684\u6a21\u5757*\/\n      contextIsolation:false, \/* \u7ba1\u7406\u9694\u79bb\u72b6\u6001*\/\n    }\n  })\n  mainWindow.loadFile(path.relative(__dirname,\"index.html\"))\n}<\/code><\/pre>\n\n\n\n
\u5982\u4e0a\u914d\u7f6e\u540e preload \u9884\u5904\u7406\u6587\u4ef6\u53ef\u4ee5\u76f4\u63a5\u5bf9 window \u5b9e\u4f8b\u6dfb\u52a0\u65b9\u6cd5\uff0c\u5171\u6e32\u67d3\u8fdb\u7a0b\u4f7f\u7528\uff0c\u4ee3\u7801\u5982\u4e0b<\/p>\n\n\n\n
\/* preload.js*\/\nwindow.api = {\n    test:()=>{\n        console.log(\"this is test\")\n    }\n}\n\u200b\n\/* render.js \u6e32\u67d3\u8fdb\u7a0b*\/\nwindow.api.test();\n\/* main.js \u4e3b\u8fdb\u7a0b\u4e5f\u53ef\u901a\u8fc7 global \u5bf9\u8c61\u8c03\u7528*\/\nglobal.api.test()<\/code><\/pre>\n\n\n\n
\u6c99\u76d2\u6a21\u5f0f<\/h3>\n\n\n\n
\u5f00\u542f\u6c99\u6cb3\u6a21\u5f0f\u540e \u53ea\u6709 \u9884\u5904\u7406\u6587\u4ef6 \uff08preload.js\uff09\u53ef\u4ee5\u7528\u4f7f\u7528 node \u7684\u5168\u90e8\u6a21\u5757\uff08\u76f8\u6bd4\u63a5\u89e6\u8fdb\u7a0b\u9694\u79bb\u66f4\u52a0\u5b89\u5168\uff09<\/p>\n\n\n\n
\u914d\u7f6e\u7a97\u53e3\u5bf9\u8c61<\/p>\n\n\n\n
const createWindow = ()=>{\n  const mainWindow = new BrowserWindow({\n    ...\n    webPreferences:{\n      preload:path.resolve(__dirname,'preload.js'),\n      nodeIntegration:true,\n      contextIsolation:false, \/*\u5f00\u542f\u6c99\u76d2\u6a21\u5f0f*\/\n    }\n  })\n  ...\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u52a8\u6001\u7a97\u53e3\u5c3a\u5bf8<\/h2>\n\n\n\n
mainWidow.center() \/*\u7a97\u53e3\u5c45\u4e2d*\/\nmainWidow.setBounds({\n    width:\n    height:\n    x:\n    y:\n},true) \/*\u5f00\u542f\u52a8\u753b*\/<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u83dc\u5355\u7ba1\u7406<\/h2>\n\n\n\n
\u521b\u5efa menu.js \u7edf\u4e00\u7ba1\u7406\u83dc\u5355<\/p>\n\n\n\n
\u503c\u5f97\u6ce8\u610f\u7684\u5728 mac \u5e73\u53f0\u4e2d \u7b2c\u4e00\u4e2a\u83dc\u5355\u4e3a\u8f6f\u4ef6\u672c\u8eab\u7684\u793a\u4f8b\uff0c\u9700\u8981\u5355\u72ec\u517c\u5bb9<\/strong><\/p>\n\n\n\n
const {Menu} = require(\"electron\");\nconst createMenu = ()=>{\n  const menu = [\n    {\n      label: 'File', \/*\u4e00\u7ea7\u83dc\u5355 \u540d\u79f0*\/\n      submenu: [ \/* \u5b50\u83dc\u5355\u5bf9\u8c61*\/\n        { \n          label: 'New',  \/*\u4e8c\u7ea7\u83dc\u5355\u540d\u79f0*\/\n          accelerator: 'CmdOrCtrl+N',  \/* \u5feb\u6377\u952e*\/\n          click: () => { \/* \u5904\u7406\u70b9\u51fb\u4e8b\u4ef6 *\/ }  \/*\u81ea\u5b9a\u4e49\u4e8b\u4ef6*\/\n        },\n        { \n          label: 'Open', \n          accelerator: 'CmdOrCtrl+O', \n          click: () => { \/* \u5904\u7406\u70b9\u51fb\u4e8b\u4ef6 *\/ } \n        },\n        { \n          type: 'separator'  \/*\u5206\u5272\u7ebf*\/\n        },\n        { \n          label: 'Quit', \n          accelerator: 'CmdOrCtrl+Q', \n          click: () => { \/* \u5904\u7406\u70b9\u51fb\u4e8b\u4ef6 *\/ } \n        }\n      ]\n    },\n    \/*\u5176\u4ed6\u83dc\u5355\u9879...*\/\n  ];\n  const applicationMenu = Menu.buildFromTemplate(menu);\n  Menu.setApplicationMenu(applicationMenu);\n}\n\u200b\nmodule.exports = createMenu;<\/code><\/pre>\n\n\n\n
\u5728 main.js \u4e2d\u5f15\u7528\u521b\u5efa\u83dc\u5355<\/p>\n\n\n\n
const {app,BrowserWindow, ipcMain} = require(\"electron\");\nconst createMenu = require(\"menu.js\")\napp.whenReady().then(()=>{\n    ...\n    createMenu() \/*\u521b\u5efa\u83dc\u5355*\/\n})<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u53f3\u952e\u83dc\u5355<\/h2>\n\n\n\n
\u5728\u9884\u52a0\u8f7d\u8fdb\u7a0b\u4e2d\u76d1\u542c dom \u7684\u53f3\u952e\u4e8b\u4ef6<\/p>\n\n\n\n
\/*preload.js*\/\nconst {ipcRenderer} = require(\"electron\");\n\/* \u5168\u5c40\u76d1\u542c\u53f3\u952e\u70b9\u51fb\u4e8b\u4ef6*\/\nwindow.addEventListener(\"contextmenu\",()=>{\n  console.log(\"\u53f3\u952e\u6d4b\u8bd5\");\n  ipcRenderer.send(\"handelContextmenu\")\n})<\/code><\/pre>\n\n\n\n
\u5728\u4e3b\u8fdb\u7a0b\u4e2d\u901a\u4fe1\u4e2d\u521b\u5efa\u53f3\u952e\u83dc\u5355<\/p>\n\n\n\n
\/**\u521b\u5efa\u53f3\u952e\u83dc\u5355 *\/\nconst {ipcMain, Menu, BrowserWindow} = require('electron')\n\u200b\nipcMain.on(\"handelContextmenu\",(event)=>{\n  const template = [\n    {\n      label:\"\u9000\u51fa\",\n      click:()=>console.log(\"\u9000\u51fa\u5e94\u7528\")\n    }\n    { type: 'separator' }, \/*\u83dc\u5355\u5206\u5272\u7ebf*\/\n  ]\n  const menu = Menu.buildFromTemplate(template)\n  menu.popup(BrowserWindow.fromWebContents(event.sender))\n})<\/code><\/pre>\n\n\n\n
\n\n\n\n
dialog \u5f39\u7a97<\/h2>\n\n\n\n
\u5728\u53ea\u80fd\u5728\u4e3b\u8fdb\u7a0b\u4e2d\u4f7f\u7528, \u8be6\u7ec6\u914d\u7f6e\u89c1\u5b98\u65b9\u6587\u6863<\/strong><\/p>\n\n\n\n
\u4fe1\u606f\u7a97<\/a><\/h3>\n\n\n\n
const {dialog} = require(\"electron\")\n\/*\n* result \u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61 \n*  response \u8868\u793a buttons \u4e2d\u70b9\u51fb\u7684\u4e0b\u6807\n*  checkboxChecked \u8868\u793a checkboxLabel \u5c5e\u6027\u662f\u5426\u88ab\u52fe\u9009\n*\/\nconst result = await dialog.showMessageBox({\n    title:'\u63d0\u793a',\n    detail:'\u786e\u8ba4\u8981\u9000\u51fa\u5417',\n    buttons:[\"\u53d6\u6d88\",\"\u786e\u5b9a\"],\n    cancelId:0, \/*\u6309\u4e0b esc \u65f6\u8d70 \u53d6\u6d88 \u9009\u9879*\/\n    checkboxLabel:\"\u8bb0\u4f4f\u6211\u7684\u9009\u62e9\"\n})<\/code><\/pre>\n\n\n\n
\u9519\u8bef\u5f39\u7a97<\/a><\/h3>\n\n\n\n
dialog.showErrorBox(\"\u6e29\u99a8\u63d0\u793a\",\"\u4e0b\u6b21\u5c06\u4e0d\u5728\u63d0\u793a\u9000\u51fa\u5f39\u7a97\")<\/code><\/pre>\n\n\n\n
\u9009\u62e9\u6587\u4ef6<\/a><\/h3>\n\n\n\n
ipcMain.handle(\"checkFile\",async (event)=>{
  \/*\u9009\u62e9\u6587\u4ef6\uff0c\u8fd4\u56de\u9009\u4e2d\u6587\u4ef6\u7684\u7edd\u5bf9\u8def\u5f84*\/
  const {filePaths} = await dialog.showOpenDialog({
    title:\"\u9009\u62e9\u6587\u4ef6\",
    filters:[{name:\"files\"}],
    properties:[\"openFile\",\"multiSelections\"]
  })
  return filePaths
})<\/code><\/pre>\n\n\n\n
\u4fdd\u5b58\u6587\u4ef6<\/a><\/h3>\n\n\n\n
\/*\u8fd4\u56de\u4fdd\u5b58\u6587\u4ef6\u7684\u8def\u5f84*\/\nconst {filePath} = await dialog.showSaveDialog({\n    title:'\u4fdd\u5b58\u6587\u4ef6'\n})\n\/*\u4f7f\u7528 node fs \u6a21\u5757\u5c06\u4e00\u4e2a\u6587\u4ef6\u5185\u5bb9\u5199\u5165\u5230\u53e6\u4e00\u4e2a\u6587\u4ef6\u4e2d*\/\nfs.readFile(fliePath,'utf8',(err,data)=>{\n    if(err){throw err};\n    \/*\u5199\u5165\u76ee\u6807\u6587\u4ef6*\/\n    fs.writeFile(filePath,data,\"utf8\",(err)=>{\n      if(err){throw err}\n      dialog.showMessageBox({\n        title:'\u63d0\u793a\u4fe1\u606f',\n        detail:\"\u6587\u4ef6\u6210\u529f\u5199\u5165\"\n      })\n    })\n  })<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u6258\u76d8\u56fe\u6807\u8bbe\u7f6e<\/h2>\n\n\n\n
\u89c4\u8303\u6027: mac \u7cfb\u7edf\u7528\u4e2d\u56fe\u6807\u4e3a\u9ed1\u767d\u8272, windows \u7cfb\u7edf\u53ef\u4ee5\u4e3a\u5f69\u8272; \u5c3a\u5bf8: 32*32 144dpi<\/p>\n\n\n\n
\/*\u6a21\u5757\u62bd\u79bb \u4f7f\u7528 createTray.js*\/\nconst {Menu,Tray} = require(\"electron\");\ncons {resolve} = require(\"path\");\nconst createTray = ()=>{\n  \/*\u8bbe\u7f6e\u6258\u76d8\u56fe\u6807\u7684\u56fe\u7247 \u9700\u8981\u653e\u5728 electron \u9879\u76ee\u7684 resources \u6587\u4ef6\u4e0b\u9762*\/\n  const tray = Tray(resolve(__dirname,'resources\u6587\u4ef6\u5939\u4e0b\u7684\u8def\u5f84'))\n  \/* \u8bbe\u7f6e\u6258\u76d8\u56fe\u6807\u53f3\u952e\u7684\u83dc\u5355\uff0c\u83dc\u5355\u5c5e\u6027\u540c Menu \u914d\u7f6e\u4e00\u81f4*\/\n  const contextMenu = Menu.buildFromTemplate([{ label: '\u9000\u51fa', role: 'quit' }])\n  \/* \u9f20\u6807\u60ac\u505c\u5230\u6258\u76d8\u56fe\u6807\u65f6\u7684\u63d0\u793a\u4fe1\u606f*\/\n  tray.setToolTip('hello electron')\n  tray.setContextMenu(contextMenu)\n}\nmodule.exports = {createTray}<\/code><\/pre>\n\n\n\n
\u5728 mian.js \u4e2d\u8c03\u7528<\/p>\n\n\n\n

const {app} = require(\"electron\");
const {crateTray} = require(\"createTray.js\")
\u200b
app.whenReady().then(()=>{
    createTray()
})<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u72b6\u6001\u680f\u56fe\u6807\u8bbe\u7f6e<\/h2>\n\n\n\n
\/*windos\u4e2d\u5728 BrowserWindow \u793a\u4f8b\u4e2d\u914d\u7f6e*\/\nnew BrowserWindow({\n \u00a0 \u00a0skipTaskbar:flase,\/* \u9690\u85cf\u6258\u76d8\u56fe\u6807*\/\n})\n\/*\u5728 mac \u5728 whenReady \u4e2d\u914d\u7f6e*\/\napp.whenReady().then(()=>{\n \u00a0 \u00a0app.dock.hide() \/* \u9690\u85cf\u6258\u76d8\u56fe\u6807*\/\n})<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u53f3\u4e0a\u89d2\u5173\u95ed\u3001\u7f29\u5c0f\u3001\u7a97\u53e3<\/h2>\n\n\n\n
\u521b\u5efa window.ts \u6587\u4ef6 \u62bd\u79bb\u6a21\u5757<\/p>\n\n\n\n
import { BrowserWindow, ipcMain } from \"electron\";\n\n\/**\u5173\u95ed\u7a97\u53e3 *\/\nipcMain.on(\"handelClose\",()=>{\n  const focusedWindow = BrowserWindow.getFocusedWindow();\n  if(focusedWindow){\n    focusedWindow.hide()\n  }\n})\n\/* \u6700\u5c0f\u5316\u7a97\u53e3 *\/\nipcMain.on(\"handelMinimize\",()=>{\n  const focusedWindow = BrowserWindow.getFocusedWindow();\n  if(focusedWindow){\n    focusedWindow.minimize()\n  }\n})\n\/* \u7a97\u53e3\u6700\u5927\u5316 *\/\nipcMain.on(\"handelMaxWindow\",()=>{\n  const focusedWindow = BrowserWindow.getFocusedWindow();\n  if(focusedWindow){\n    focusedWindow.isMaximized()?focusedWindow.restore():focusedWindow.maximize();\n  }\n})\n\/* \u83b7\u53d6\u7a97\u53e3\u5927\u5c0f\u7684\u72b6\u6001 *\/\nipcMain.handle(\"getWindowStatus\",()=>{\n  const focusedWindow = BrowserWindow.getFocusedWindow();\n  return focusedWindow?.isMaximized()\n})<\/code><\/pre>\n\n\n\n
\u5728\u4e3b\u8fdb\u7a0b\u5f15\u5165 index.ts<\/p>\n\n\n\n
import \".\/window\"<\/code><\/pre>\n\n\n\n
\n\n\n\n
electron-vite<\/a> \u6784\u5efa\u6253\u5305<\/h2>\n\n\n\n
\u6784\u5efa<\/h3>\n\n\n\n
pnpm install vite -g
pnpm create @quick-start\/electron
\u2714 Project name: \u2026 <electron-app>
\u2714 Select a framework: \u203a vue
\u2714 Add TypeScript? \u2026 No \/ Yes
\u2714 Add Electron updater plugin? \u2026 No \/ Yes
\u2714 Enable Electron download mirror proxy? \u2026 No \/ Yes
\u200b
Scaffolding project in .\/<electron-app>...
Done.
\u200b<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u70ed\u66f4\u65b0<\/h3>\n\n\n\n
\/*package.json*\/
{
    \"scripts\":{
        \"dev\": \"electron-vite dev --watch\",
    }
}<\/code><\/pre>\n\n\n\n
\u6307\u5b9a\u7684\u76ee\u5f55\u529f\u80fd<\/h3>\n\n\n\n
    \n
  • build \u6587\u4ef6\u5939\u53ef\u5b58\u653e\u684c\u9762\u56fe\u6807<\/li>\n\n\n\n
  • resources \u6587\u4ef6\u5939\u53ef\u5b58\u653e\u6258\u76d8\u56fe\u6807<\/li>\n\n\n\n
  • src \u6587\u4ef6\u5305\u62ec main<\/code> \u4e3b\u7ebf\u7a0b\u6587\u4ef6\u5939 preload<\/code> \u9884\u52a0\u8f7d\u6587\u4ef6\u5939 \u548c renderer<\/code> \u6e32\u67d3\u6587\u4ef6\u5939\uff08\u8be5\u6587\u4ef6\u5939\u4e3b\u8981\u5b58\u653evue\u6216react\u7b49\uff09<\/li>\n<\/ul>\n\n\n\n
    \u914d\u7f6e\u684c\u9762\u56fe\u6807<\/h3>\n\n\n\n
    \u5728 build \u6587\u4ef6\u5b58\u653e icon.png \u56fe\u7247\uff0c\u4f5c\u4e3a\u684c\u9762\u56fe\u6807 \u540c\u65f6\u5c06\u539f\u6709\u7684\u4e09\u4e2a\u6587\u4ef6\u66f4\u6539\u6587\u4ef6\u540d<\/strong><\/p>\n\n\n\n
    mac \u7cfb\u7edf\u8981\u6c42 \u5c3a\u5bf8\uff1a512 * 512<\/p>\n\n\n\n
    windows \u7cfb\u7edf\u8981\u6c42\u5c3a\u5bf8\u4e0d\u5c0f\u4e8e\uff1a 216*216<\/p>\n\n\n\n
    electron\u6253\u5305<\/h3>\n\n\n\n
    \u5728 package.json<\/code> \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    {
        \"name\":\"\u9879\u76ee\u540d\u79f0\",
        \"version\":\"\u7248\u672c\u53f7\"
    }<\/code><\/pre>\n\n\n\n
    \u5728 electron-builder.yml<\/code> \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    appId: com.\u81ea\u5b9a\u4e49.\u81ea\u5b9a\u4e49
    productName: \u8f6f\u4ef6\u7684\u540d\u79f0<\/code><\/pre>\n\n\n\n
    \u5728 mac \u7cfb\u7edf\u4e2d\u53ea\u80fd\u6253\u5305 mac \u7248\u672c\uff0c \u5728mac\u4e2d\u642d\u5efa\u865a\u62df\u673a\u4e5f\u65e0\u6cd5\u6253\u5305\u51fa windows \u7684\u7248\u672c<\/strong><\/p>\n\n\n\n
    pnpm build:mac<\/code><\/pre>\n\n\n\n
    \u5728 windows \u7248\u672c\u4e2d\u6253\u5305<\/p>\n\n\n\n
    pnpm build:win<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    electron \u8d77\u624b\u5f0f \u5f53\u524d\u7248\u672c\u4e3a\u5b98\u7f51\u6700\u65b0\u7248\u672c V25.3.0\uff0c\u5b9e\u8df5\u4e2d\u53d1\u73b0\u5728\u66f4\u6539\u955c\u50cf\u7684\u60c5\u51b5\u4e0b\u4f7f\u7528 npm\u548c  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-749","post","type-post","status-publish","format-standard","hentry","category-electron"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=749"}],"version-history":[{"count":28,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/749\/revisions"}],"predecessor-version":[{"id":897,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/749\/revisions\/897"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}