TinsFox/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .webview {
      height: 945px;
    }
  </style>
  <script>

  </script>
</head>

<body>
  <h1>来自 Electron 渲染器的问好！</h1>
  <p>👋</p>
  <p id="info"></p>

  <div>
    <button onclick="func()">cmd</button>
  </div>
</body>
<script src="./renderer.js"></script>

</html>

## main.js
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { app, BrowserWindow ,ipcMain} = require('electron')
const path = require('node:path')
const exec = require('child_process').exec
console.log(path.join(__dirname, 'preload.js'));
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true ,
      webviewTag:true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
  win.webContents.openDevTools()
}
app.whenReady().then(() => {
  ipcMain.handle('ping', () => 'pong')
  ipcMain.handle('exec', () => {
    return new Promise((resolve, reject) => {
      exec("ls", (err, stdout, stderr) => {
        if (err) {
          reject(err)
          return
        }
        resolve(stdout)
      })
    })
  })
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

## package.json
{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "rebuild": "electron-rebuild -f -w better-sqlite3",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@electron/rebuild": "^3.3.1",
    "electron": "^26.6.0"
  },
  "dependencies": {
    "better-sqlite3": "^8.7.0",
    "drizzle-orm": "^0.28.6"
  }
}

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

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke('ping'),
  exec: () => ipcRenderer.invoke('exec')
  // 除函数之外，我们也可以暴露变量
})

## renderer.js
/* eslint-disable no-undef */
const information = document.getElementById('info')
information.innerText = `本应用正在使用 Chrome (v${versions?.chrome()}), Node.js (v${versions?.node()}), 和 Electron (v${versions?.electron()})`
const func = async () => {
  const response = await window.versions.exec()
  console.log(response) // 打印 'pong'
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
	.webview {
	height: 945px;
	}
	</style>
	<script>

	</script>
	</head>

	<body>
	<h1>来自 Electron 渲染器的问好！</h1>
	<p>👋</p>
	<p id="info"></p>

	<div>
	<button onclick="func()">cmd</button>
	</div>
	</body>
	<script src="./renderer.js"></script>

	</html>
	// eslint-disable-next-line @typescript-eslint/no-var-requires
	const { app, BrowserWindow ,ipcMain} = require('electron')
	const path = require('node:path')
	const exec = require('child_process').exec
	console.log(path.join(__dirname, 'preload.js'));
	const createWindow = () => {
	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true ,
	webviewTag:true,
	preload: path.join(__dirname, 'preload.js')
	}
	})

	win.loadFile('index.html')
	win.webContents.openDevTools()
	}
	app.whenReady().then(() => {
	ipcMain.handle('ping', () => 'pong')
	ipcMain.handle('exec', () => {
	return new Promise((resolve, reject) => {
	exec("ls", (err, stdout, stderr) => {
	if (err) {
	reject(err)
	return
	}
	resolve(stdout)
	})
	})
	})
	createWindow()
	app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})
	app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') app.quit()
	})
	{
	"name": "electron",
	"version": "1.0.0",
	"description": "",
	"main": "main.js",
	"scripts": {
	"start": "electron .",
	"rebuild": "electron-rebuild -f -w better-sqlite3",
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"@electron/rebuild": "^3.3.1",
	"electron": "^26.6.0"
	},
	"dependencies": {
	"better-sqlite3": "^8.7.0",
	"drizzle-orm": "^0.28.6"
	}
	}
	const { contextBridge, ipcRenderer } = require('electron')

	contextBridge.exposeInMainWorld('versions', {
	node: () => process.versions.node,
	chrome: () => process.versions.chrome,
	electron: () => process.versions.electron,
	ping: () => ipcRenderer.invoke('ping'),
	exec: () => ipcRenderer.invoke('exec')
	// 除函数之外，我们也可以暴露变量
	})
	/* eslint-disable no-undef */
	const information = document.getElementById('info')
	information.innerText = `本应用正在使用 Chrome (v${versions?.chrome()}), Node.js (v${versions?.node()}), 和 Electron (v${versions?.electron()})`
	const func = async () => {
	const response = await window.versions.exec()
	console.log(response) // 打印 'pong'
	}