electron 1. hello world

最新推荐文章于 2024-04-17 22:43:32 发布

等一场春雨

最新推荐文章于 2024-04-17 22:43:32 发布

阅读量248

点赞数

文章标签： electron

本文链接：https://blog.csdn.net/WithCYwind/article/details/102877378

版权

cnpm init -y
cnpm i electron -D //安装electron

package.json

{
  "name": "news-windows",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^6.1.3"
  }
}

main.js

//创建窗口

//引入模块
//app模块 : 控制应用的生命周期
// BrowserWindow 模块：创建一个浏览器窗口
const { app, BrowserWindow } = require('electron');

//nodejs 内置模块  拼接路径
const path = require('path');

//1. 初始化应用，会触发监听 ready 事件
app.on('ready', zl_createWindow);


let win;

//创建窗口 自定义方法
function zl_createWindow() {
    //创建窗口
    win = new BrowserWindow({
        width:1300,
        height:1300,
        movable:true,//是否可以移动
        resizable:false,//是否可以放大 缩小
    });

    //加载内容
    // win.loadURL('https://baidu.com');
    //加载本地html 
    //_dirname 当前js文件所在的路径
    win.loadURL(path.join(__dirname,'./index.html'));

    //webcontents 控制和渲染页面的 也是一个属性
    //调试工具
    win.webContents.openDevTools();

    //关闭窗口
    win.on('close',function(){
        //关闭窗口前想做的事
        win = null;
    });
}

//执行文件 3种方式
//1. electron main.js
//2. electron .
//3. 添加一个脚本 ：package.json

index.html

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>news</title>
    </head>
    <body>
        <h1>hello</h1>
    </body>
</html>

等一场春雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
electron 1. hello world

cnpm init -ycnpm i electron -D //安装electron{ "name": "news-windows", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\"...
复制链接

扫一扫