需要先自行安装npm
手动创建一个如下结构文件目录(nodejs工程)用来运行electron,如下图:
image.png
命令行模式下,切换到工程根目录(这里就是test目录)
安装typescript:
npm install -g typescript
安装electron:
npm i -D electron
自行建立上图中的各个文件,部分文件内容如下:
tsconfig.json
image
tsconfig更多具体配置参考官方文档:
https://www.tslang.cn/docs/handbook/compiler-options.html
package.json
image
"main": "./build/app.js": 表示程序主入口是build目录下的app.js, app.js文件由是由tsc编译src/app.ts得到
"prestart":"tsc": 表示在执行npm start之前先执行tsc进行当前工程目录的ts文件编译工作.
更多具体配置参考官方文档:
https://docs.npmjs.com/files/package.json
views/css目录和views/js目录是具体业务逻辑:
index.html:
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>Electron</title>
<metaname="viewport"content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<metaname="full-screen"content="true"/>
<metaname="screen-orientation"content="portrait"/>
<metaname="x5-fullscreen"content="true"/>
<metaname="360-fullscreen"content="true"/>
<linkrel=stylesheettype=text/csshref='./views/css/index.css'/><script>if (typeofmodule === 'object') { window.module = module; module = undefined; }</script>
<!-- normal script imports etc -->
<scripttype="text/javascript"src="./views/js/jquery-3.2.1.js"></script>
<script>if (window.module) module = window.module;</script>
</head>
<body>
<divclass='divTop'>
<labelfor='txtPath'>这是一段文字:</label>
</div>
</body>
</html>
app.ts:
import { app, BrowserWindow, Menu, MenuItem, dialog } from'electron';
import {ClassA} from'./a/ClassA';
let mainWindow
let createWindow = function() {
mainWindow = newBrowserWindow({width:800, height:600, fullscreenable:false,maximizable:false,backgroundColor:'#1E1E1E'})
mainWindow.webContents.openDevTools()
mainWindow.loadFile('index.html')
mainWindow.on('closed', function() {
mainWindow = null
})
new ClassA()
}
app.on('ready', createWindow)
app.on('window-all-closed', ()=>{
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', ()=>{
if (mainWindow === null) {
createWindow()
}
})
ClassA.ts:
export class ClassA{
public constructor(){
console.log('this is classa')
}
}
在命令行模式中执行
npm start
显示结果:
image
