2-1 Electron将网站直接生成桌面应用

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

本次演示通过网址方式生成桌面应用

第一步 为你的新Electron应用创建一个新的空文件夹

本次文件夹命名为 electron-app

第二步 在文件夹中新建main.js文件

const electron = require('electron');
const app = electron.app;
const BrowserWindow  = electron.BrowserWindow;
const Menu = electron.Menu;
function createWindow(){
    // fullscreen  全屏  //show :false 隐藏窗口
    win = new BrowserWindow({autoHideMenuBar:true,show:false,fullscreen:false});
    /**
     * 优化加载方式 当页面在窗口中直接加载时，用户会看到未完成的页面，
     * 这不是一个好的原生应用的体验,使用此事件后显示窗口将没有视觉闪烁
     */
     win.on('ready-to-show',()=>{
        win.show();
     });
     //生成调试工具栏
     // win.webContents.openDevTools()
     // 窗口最大化
     win.maximize()
     // 加载远程URL(网址)
      win.loadURL('https://www.avl.top/')
     // 设置菜单栏
     const template = [{
         label:'文件',
         submenu:[
             {
                label:'关于',
                role:'about' 
             },
             {
                label:'关闭',
                accelerator:'Command+Q',
                click:()=>{
                    win.close()
                }
             },
         ]
    }]
     const menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);
     win.on('closed', () => {
      // 取消引用 window 对象，如果你的应用支持多窗口的话，
      // 通常会把多个 window 对象存放在一个数组里面，
      // 与此同时，你应该删除相应的元素。
      win = null
     })
}
app.on('ready',createWindow);

第三步 在文件夹中新建package.json文件

{
  "name": "项目名称",
  "version": "1.0.0",
  "description": "北京XXX科技有限公司",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
  },
  "author": "作者",
  "devDependencies": {
    "electron": "^5.0.7"
  }
}

第四步 启动你的应用

在创建并初始化完成 main.js和package.json之后，您就可以在当前工程的根目录执行 electron . 命令来启动刚刚编写好的Electron程序了。

# 进入仓库
cd electron-app
# 安装依赖库
npm install
# 运行应用
electron .