跨平台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网页。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值