Electron使用前端技术写桌面程序实验

建立一个目录test1

使用vscode编程。

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
const ipc = require('electron').ipcMain
//声明我们的greeting窗体变量
let greetingWin;
let newwin;
//当app完成初始化时，执行窗体的创建。
app.on('ready', createGreetingWindow)

function createGreetingWindow(){
    //构建一个高600，宽800的窗体，可以认为，一个窗体是一个浏览器的tab选项卡。
    greetingWin = new BrowserWindow({width: 800, height: 600})
    //窗体中显示的内容是index.html文件中的内容，将按照google浏览器的渲染方式，渲染显示。
    //__dirname,表示main.js所在的目录路径
    greetingWin.loadURL(__dirname + "/index.html")
    //监听窗体关闭事件，当窗体已经关闭时，将win赋值为null，垃圾回收。
    greetingWin.on('closed', () => {
       win = null
    }) 
} 

ipc.on('add',()=>
{
    newwin = new BrowserWindow({
        width: 600, 
        height: 400,
        frame:false,
        parent: greetingWin, //win是主窗口
    })
    //newwin.loadURL(path.join('file:',__dirname,'nav1.html')); //new.html是新开窗口的渲染进程
    newwin.loadURL(__dirname +"/nav1.html"); //new.html是新开窗口的渲染进程
    newwin.on('closed',()=>{newwin = null})

})

index.html

  
    
    
  
  
    
Hello Electron!
 
    新建窗口

    
  
  

在test1目录下，运行npm init -f ，生成package.json文件。在script字段下，增加package内容。

如下图，这样，就可以通过npm run-script package 或者npm run-script test 实现运行功能。npm run-script package进行打包程序为win64平台的exe文件。

{
  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "package": "electron-packager . test1 --platform=win32 --arch=x64  --out=./app2 --electron-version=4.0.1  --overwrite "
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
 
}

打包成exe文件后，是这样的，整个目录大约150M，把目录直接拷贝到别的机器就能直接运行，无需另外安装别的东西。

注意：在windows开发平台下，也可以进行linux平台的打包工作。打包过程，会自动下载linux下的electron安装包。

配置vscode的调试文件launch.json，实现vscode调试。