Electron

最新推荐文章于 2024-07-08 20:16:24 发布

一个高贵的路人

最新推荐文章于 2024-07-08 20:16:24 发布

阅读量690

点赞数

分类专栏： electron 前端工具 js 文章标签： electron 前端 javascript

本文链接：https://blog.csdn.net/GoY0G1/article/details/122232526

版权

前端工具同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

electron

1 篇文章 0 订阅

订阅专栏

一安装electron环境

1.安装 npm install electron --save-dev

npm install -g electron

2.检测版本号 npx electron -v

3.启动 ./node-modules/.bin/electron

二简易创建electron项目

1.创建主入口文件 main.js,可设置主浏览器大小样式和选择所要渲染的html页面

var electron = require("electron"); //引用electron

var app = electron.app; //引用app
const BrowserWindow = electron.BrowserWindow; //窗口引用

var mainWindow = null; //声明要打开的主窗口

app.on("ready", () => { //ready 生命周期
  mainWindow = new BrowserWindow(
      { 
        width: 800, 
        height: 800,
        webPreferences:{
            nodeIntegration:true,
            contextIsolation: false,
            enableRemoteModule:true,
        }
      }); //设置html页面属性
  mainWindow.webContents.openDevTools()//打开控制台
  require('./main/main.js')//生成目录
  mainWindow.loadFile("index.html"); //加载的html页面
  mainWindow.on("closed", () => {
    mainWindow = null;
  }); //关闭浏览器监听 减少内存
});

2.创建主渲染文件 index.html，可在html的script标签中引入所需的js文件

<body>
    hello world
    <button id="btn">content按钮</button>
    <div id="content"></div>
    <script src="render/index.js"></script> //可进行dom js操作等
</body>

3.npm init 生成package.json文件

{
  "name": "electron01",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",//可修改主入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yogi",
  "license": "ISC"
}

4.生成render/index.js 进行渲染

三生成目录

1.引用electron中的Menu

2.生成以数组为格式的数据结构作为目录内容

3.使用该方法生产目录

var m = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(m);

var template = [
  {
    label: "菜单1",
    submenu: [
      {
        label: "子菜单1-1",
        accelerator: "ctrl + n", //快捷键操作
        click: () => {
          //点击菜单的方法
          var win = new BrowserWindow({
            width: 500,
            height: 500,
            webPreferences: {
              nodeIntegration: true,
            },
          });
          win.loadFile("open.html");
          win.on("closed", () => {
            win = null;
          });
        },
      },
      {
        label: "子菜单1-2",
      },
    ],
  },
]

一个高贵的路人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron

一安装electron环境1.安装 npm install electron --save-devnpm install -g electron2.检测版本号 npx electron -v3.启动 ./node-modules/.bin/electron二创建项目
复制链接

扫一扫