跨平台GUI程序开发平台--electron

开发GUI程序,以前用VB、VC、Delphi,C#,Java,QT,pyQt

现在,可以用html5,自带一个浏览器引擎,且可以访问本地文件系统。vscode这个轻量级开发工具,就是用electron开发的。

1、新建目录 demo1

2、cd demo1

     npm init -f 

     创建出package.json。(package.json文件 http://javascript.ruanyifeng.com/nodejs/packagejson.html)

3、npm install electron -save

      创建node_modules目录,并下载依赖的模块,package.json中也自动添加了electron这个模块依赖。

    (-save和-save-dev   https://www.cnblogs.com/limitcode/p/7906447.html)

4、新建文件main.js

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({width:800, height:600, autoHideMenuBar:true})
    mainWindow.loadURL('file://'+__dirname+'/index.html')
    mainWindow.openDevTools()
    mainWindow.on('closed', function () {
        console.log('hello')
        mainWindow = null
      })
}
app.on('ready', createWindow)

5、新建index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>hello world</h1>
    <a href="http://www.w3school.com.cn">W3School</a>
</body>
</html>

6、在package.json中增加

  "main": "main.js",
  "scripts": {
    "start": "electron .",

7、在demo1目录下,npm start

     看到窗口弹出,打开了index.html网页。


猜你喜欢

转载自blog.csdn.net/ggaofengg/article/details/80155623
今日推荐