最簡單的electron程序莫過於：https://github.com/electron/electron-quick-start.git
但是該程序缺乏打包過程，因此藉助 electron-builder-start 來熟悉更佳：https://github.com/QDMarkMan/electron-builder-start.git
練習代碼地址：https://github.com/SmileEricXin/electronPractice.git
在 electron-builder-start 中，並沒有放置html，因此要藉助 electron-builder-start 作爲模板來熟悉electron，第一步就是加入自己的html。
function createMainWindow() {
const window = new BrowserWindow()
if (isDevelopment) {
window.webContents.openDevTools()
}
// 修改的這裏，把html放入static
let indexPath = path.join(__static, '/html/index.html')
console.log('indexPath:', indexPath)
window.loadURL(formatUrl({
pathname: indexPath,
protocol: 'file',
slashes: true
}))
window.on('closed', () => {
mainWindow = null
})
window.webContents.on('devtools-opened', () => {
window.focus()
setImmediate(() => {
window.focus()
})
})
return window
}
接下來就是放html文件了，在 electron-builder-start 目錄下建立static/html文件夾，放入代碼加載的html即可。
<html>
<body>
<div>
hello electron!!!
2019
2020
</div>
</body>
</html>
效果如圖：
build 之後，在dist包也是能看到相應html的
