Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序

原创代码 同时被 2 个专栏收录
5 篇文章 0 订阅
22 篇文章 0 订阅

[外链图片转存失败(img-3RucrgcX-1562556984462)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-2.png “Electron”)]

每次 Electron 有最新新闻的时候,都会有很多朋友留言,问有没有相关教程,本人也是观察有一段时间了,一直鲜有人提供相关的学习内容,所以在此就给大家提供下一些入门和进阶教程,希望大家多多支持,谢谢!

本文的主要目的,是要教会大家如何使用 Electron 从 零 创建 Windows 的 .exe 或者 OS X / linux 的 桌面可执行应用程序。

案例演示

由于资源不多,直接将自己之前开源的一个 google chrome extension 代码引用过来,无需修改源码,值要配置好 electron 环境就可以运行!插件的开源仓库地址:http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension

[外链图片转存失败(img-CnCCVGwm-1562556984462)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-demo.gif “实际应用示例”)]

一、Electron 是什么

官方描述

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

个人理解

就是一个Chrome浏览器封装成窗体,然后加载你做的HTML程序,直接看到效果。比较类似于手机端,基于微信的H5微网站。

应用场景

想做桌面应用,又不会c++,又不会c#,又不会swing,也不会python等各大创建桌面窗体语言,但是会HTML、CSS,没错,那就是你了。

注意!注意!注意!

由于 Electron 本身就是基于 Chromium 的,所以它的基础大小就已经很大了,应该有四五十M,如果介意文件大小的话,劝您还是再看看…

由于 Electron 本身就是基于 Chromium 的,所以它的基础大小就已经很大了,应该有四五十M,如果介意文件大小的话,劝您还是再看看…

由于 Electron 本身就是基于 Chromium 的,所以它的基础大小就已经很大了,应该有四五十M,如果介意文件大小的话,劝您还是再看看…

二、开发 Electron 需要会什么

必须的

  • HTML
  • CSS
  • JavaScript

其他

  • node.js (Electron 本身就基于node.js,不会没关系,直接照着教程来就行)
  • git (demo是从git仓库拿的,不会没关系,自己去下载就行)
  • 开发工具 (本人使用的是 vscode)

三、Hello World!

官方三步start

$ git clone https://github.com/electron/electron-quick-start

$ cd electron-quick-start

$ npm install && npm start

启动效果

单独启动

npm start

[外链图片转存失败(img-zArcxGL0-1562556984463)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-1.png “Electron”)]

结构分析

| -- index.html
| -- main.js
| -- package.json

index.html

你没看错,它就只是一个HTML而已!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

main.js

窗口配置,主要是控制窗口的高度、宽度、入口页面、等

下面是代码的内容,一般情况下,只需要看下两个地方就行

  • 入口页面配置:mainWindow.loadURL()
  • 打开调试工具:mainWindow.webContents.openDevTools()
'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 指定一个入口的html文件
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开调试工具,其实就是chrome的那套调试工具
  //mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

package.json

项目名称、版本信息等,以及node.js相关的依赖配置,类似于java引用.jar

  • electron-packager
  • electron-prebuilt

两个都是用来打包成可执行应用程序的必备依赖包,细节我们在下一个步骤里面进行详细的说明

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "n",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "devDependencies": {
    "electron-packager": "^5.2.1",
    "electron-prebuilt": "^0.36.0"
  }
}

四、打包为可执行程序

1、打包

现在我们只能通过 npm start 源码 来运行程序,如何打包成系统可执行程序,不要node.js环境也可以用呢?这里我们将会用到 electron-packager、electron-prebuilt

现在,我们使用 electron-packager 来进行打包,此处我们打包为 windows 系统的 .exe 程序

首先,进入项目根目录,然后执行下面命令行

electron-packager ./ --platform=win32 --arch=x64 --version=0.37.2 --icon=./images/favicon.ico

如果还想打包 linux / OS X 环境的可执行程序,可查看帮助信息

electron-packager

即可看到相关资料,如果不明白的话,可以留言,一起学习!

2、效果

[外链图片转存失败(img-Zjivdoq4-1562556984463)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-3.png “Electron”)]

[外链图片转存失败(img-HUgHTcZP-1562556984463)(http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-4.png “Electron”)]

五、如何跟朋友 show 一个,装个X

教程到这里,入门基本已经结束了,那么估计有些童鞋估计还是不明白,怎么把这个程序发给朋友,显得自己流弊,其实很简单的!你只需要把生成出来的那个文件夹,打一个压缩包,然后告诉他,执行那个.exe文件就够了!!!

= =||||


My Blog

blog.chenyuanzhen.com

技术交流

weixin-x175.jpg

  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p> 本课程大喵将手写每一行代码,手把手带着大家环境搭建开发,逐步开发一个基础入门级实战项目;通过基础实战项目来快速学习掌握Electron相关API知识点,以及掌握使用Electron构建客户端应用程序流程,体验Electron客户端开发魅力和强大;本课程最终,会把我们开发实战项目代码,分别编译打包输出三个平台(windows、mac、linux)系统所支持PC客户端应用。 </p> <p> <span style="font-size:20px;"></span> </p> <p> 本课程主要内容: </p> <p> 01. Electron课程介绍 </p> <p> 02. Electron项目案例介绍 </p> <p> 03. Electron Github源码仓库课程分支 </p> <p> 04. 本地环境搭建及初体验 </p> <p> 05. 主窗口开发 </p> <p> 06. 主窗口页面结构搭建 </p> <p> 07. 顶部文件及新增菜单项 </p> <p> 08. 开发者工具及刷新菜单项 </p> <p> 09. 开发及线上环境配置 </p> <p> 10. 子窗口开发 </p> <p> 11. 子窗口通信 </p> <p> 12. 主窗口通信 </p> <p> 13. 清空信息菜单项 </p> <p> 14. PC客户端打包(windows、mac、linux) </p> <p> <br /> </p> <p> 课程章节代码地址: </p> <p> https://github.com/damiao-classroom/electron-primary </p> <p> <span style="font-size:20px;"><strong><br /> </strong></span> </p> <p> <span style="font-size:20px;"><strong>为什么要学习掌握Electron呢?</strong></span> </p> <p> <br /> </p> <p> 01. 由于Electron是基于Node.js构建,也就是说,Electron应用可以调用Node.js大量API(包括第三方API)、如网络、加密、存储等。 </p> <p> 02. Electron具备简单快捷开发、WEB技术栈、非常良好跨平台性、开源社区等特性,决定了使用Electron开发项目是一个非常不错选择。 </p> <p> <img src="https://img-bss.csdn.net/201909291046482805.jpg" alt="" /><img src="https://img-bss.csdn.net/201909291046563620.jpg" alt="" /><img src="https://img-bss.csdn.net/201909291047064010.jpg" alt="" /> </p>
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样学习方式能让你保持兴趣、充满动力,时刻知道学东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离开发模式,前端使用Vue.js+Element UI实现了Web页面呈现,后端使用Python Django框架实现了数据访问接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端各自承担工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0开发,项目包含了如下几个内容:项目总体介绍、基本功能演示、Vuejs初始化、Element UI使用、在Django中实现针对数据增删改查接口、在Vuejs中实现前端增删改查调用、实现文件上传、实现表格分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格批量化操作等等,所有功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大亮点在于前后端做了分离,真正理解前后端各自承担工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值