Electron – 基础学习(1): 环境安装、创建项目及入门

前端开发作者： 2024-08-22 11:25:01

这几天到年底了，公司也没啥事，闲着就到处瞅瞅。记得上一家公司的时候用 Electron+ng1 写过项目，只是那个时候项目框架都是别人搭的，自己只负责写功能，对Electron没啥认识。这几天想着反

一、环境安装：

   npm install -g electron 或 cnpm install -g electron (不会cnpm 自行度娘cnpm)

二、创建项目：

　　(1)、Git拷贝：Git拷贝，实际就是复制官方 "尝试此例" 代码结构，然后根据自身项目需求进行修改。

　　 (2)、第二种是通过electron社群提供的命令行工具(CLI) electron-forge 创建项目。

　　   npm install -g electron-forge 或 cnpm install -g electron-forge

　　   electron-forge init electronTest

，Installing NPM Dependencies 和安装electron一样，会比较久，耐心等候。　

　　(3)、第三种是新建各种文件，直接创建项目。

　　　　npm init

　　　　npm install --save-dev electron 或 cnpm install --save-dev electron

　　　　npm install 或 cnpm install

三、入门：

<!DOCTYPE html>
<html>
    head>
        meta charset="UTF-8"title>Hello World!</<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
        http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    bodyh1>
        We are using node
        script>document.write(process.versions.node),Chrome
        document.write(process.versions.chrome)document.write(process.versions.electron).
    >

const {app,BrowserWindow} = require('electron');

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;

function createWindow() {
     创建浏览器窗口。
    win = new BrowserWindow({
        width: 800true
        }
    });

     加载index.html文件
    win.loadFile('index.html');

     打开开发者工具
    win.webContents.openDevTools();

     当 window 被关闭，这个事件会被触发。
    win.on('closed',() => {
         取消引用 window 对象，如果你的应用支持多窗口的话，
         通常会把多个 window 对象存放在一个数组里面，
         与此同时，你应该删除相应的元素。
        win = null;
    });
}

 Electron 会在初始化后并准备 创建浏览器窗口时，调用这个函数。 部分 API 在 ready 事件触发后才能使用。
app.on('ready' 当全部窗口关闭时退出。
app.on('window-all-closed',1)"> {
     在 macOS 上，除非用户用 Cmd + Q 确定地退出，
     否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate',1)"> 在macOS上，当单击dock图标并且没有其他窗口打开时，
     通常在应用程序中重新创建一个窗口。
    if (win === ) {
        createWindow();
    }
});

 在这个文件中，你可以续写应用剩下主进程代码。 也可以拆分成几个文件，然后用 require 导入。

{
  "name": "electron-self-built": {
    "start": "electron ." electron-packager 打包配置
  },"author": "": {
    "electron": "^7.1.9"
  },"private": 
}

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66639.html

相关资讯： Electron – 基础学习(1): 环境安装、创建项目及入门

Electron – 基础学习(1): 环境安装、创建项目及入门

一、环境安装：

二、创建项目：

(1)、Git拷贝：Git拷贝，实际就是复制官方 "尝试此例" 代码结构，然后根据自身项目需求进行修改。

(2)、第二种是通过electron社群提供的命令行工具(CLI) electron-forge 创建项目。

(3)、第三种是新建各种文件，直接创建项目。

三、入门：

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签