欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Electron 自学笔记(一)

程序员文章站 2022-07-01 23:45:55
...

一,Electron 简单了解

  • Electron 是一个跨平台的桌面应用开发框架,用html css js 的技术开发桌面上面可以安装的
    软件。
    Electron 又为前端开发者谋得了一份好的差事”。
    想起在网路里流传很广的一句话“不要和老夫说什么 C++Java,老夫行走江湖就靠一把 JS,遇到需求撸起袖子就是干”。
  • ElectronGithub开发
  • Electron 是一个用 HTMLCSSJavaScript 来构建跨平台桌面应用程序的一个开源库
  • Electron 通过将 ChromiumNode.js合并到同一个运行时环境中,并
    将其打包为 MacWindowsLinux 系统下的应用来实现这一目的。
  • Electron最新版本为 4.0.4 当前时间为(2019-02-08)

二,学前准备

环境安装

  1. 电脑需要安装Node.JS ,点击node中文网 选择对应的版本 node.js 安装:
    npm 使用国内淘宝镜像安装方法(单次有效):
    npm install [模块名] --registry=https://registry.npm.taobao.org
    
    如果想替换全局的npm 安装源,执行下边命令设置配置文件:
    npm config set registry https://registry.npm.taobao.org
    
    查看npm 配置信息;
    npm config list
    
  2. 电脑需要安装Git :
    Git 官网 下载对应版本安装,或者去各大软件平台搜索安装
  3. 需要有 HTML CSS javascript 以及 node.js 基础;
  4. 安装 Electron
    命令行执行以下命令 全局 安装:
    npm install -g electron
    
    -g 表示全局安装
    5.开发工具 Visual Studio Code
    建议下载对应版本的Visual Studio Code 进行开发,个人觉得比较好用

三,克隆一个仓库,快速启动一个项目

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start

体验一下 electron

四,手动搭建一个 electron 项目

方法一:

  1. 新建一个项目目录 例如:electrondemo01

  2. electrondemo01 目录下面新建三个文件: index.htmlmain.jspackage.json

  3. index.html 里面用 css进行布局(以前怎么写现在还是怎么写)

  4. main.js 中写如下代码:

    var electron =require('electron');
    //electron 对象的引用
    const app=electron.app;
    //BrowserWindow 类的引用
    const BrowserWindow=electron.BrowserWindow;
    //创建全局mainWindow的引用
    let mainWindow=null;
    //监听应用准备完成的事件
    app.on('ready',function(){
    //创建窗口
    mainWindow=new BrowserWindow({width: 800, height: 600});//定义宽,高
    mainWindow.loadFile('index.html');//加载页面index.html
    
    mainWindow.on('closed', function () {
    mainWindow = null;
    })
    })
    //监听所有窗口关闭的事件
    app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
    app.quit();
    }
    })
    

方法二:使用 electron-forge 搭建一个electron 项目

electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包electron 项目。

#全局安装 electron-gorge
npm install -g electron-forge
# my-new-app 是指要生成的项目文件夹
electron-forge init my-new-app
#切换到 项目文件夹"my-new-app"
cd my-new-app
#启动项目
npm start

五, Electron 程序目录结构

Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同,应用的入口是 package.json 文件。 一个最基本 的 Electron 应用一般来说会有如下的目录结构:

your-app/
├── package.json
├── main.js
└── index.html
  • 为你的新Electron应用创建一个新的空文件夹。 打开你的命令行工具,然后从该文件夹运行npm init

  • npm 会帮助你创建一个基本的 package.json 文件。 其中的 main 字段所表示的脚本为应用的启动脚本,它将会在主进程中执行。 如下片段是一个 package.json 的示例:

    {
      "name": "your-app",
      "version": "0.1.0",
      "main": "main.js"
    }
    
  • 链接:Electron文档 更多细节参考官方文档

  • (2019-2-10 学习中…)