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

最新推荐文章于 2024-05-12 17:25:18 发布

wengduke

最新推荐文章于 2024-05-12 17:25:18 发布

阅读量511

点赞数

分类专栏： nodejs+js html 文章标签： electron

本文链接：https://blog.csdn.net/wengduke/article/details/86082888

版权

nodejs+js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

建立一个目录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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1> 
    <button id = "add">新建窗口</button><br/>
    <script>
    const add = document.querySelector("#add")
    const ipc = require('electron').ipcRenderer
    add.onclick = ()=>
    {
           ipc.send('add');
    }
    </script>
  
  </body>
</html>

在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调试。

wengduke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron使用前端技术写桌面程序实验

建立一个目录test1使用vscode编程。main.jsconst {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')const ipc = require('electron').ipcMain//声明我们的greeting窗体变量...
复制链接

扫一扫

专栏目录