跟我一起实现一个基于electron的hello-world吧～

Come with me to implement an electron-based project hello-world.

先看图

Look at the picture first.



由图我们可以看出什么来？

What can we see from the picture?

electron的项目是可以不运行在浏览器中的对吧，是不是挺有意思的啊？

Electron project can not run in the browser, right, is it very interesting?

我们先看怎么实现这个小demo的吧～

Let's see how to implement this little demo first.

第一步： mkdir hello-electron /cd hello-electron/sudo cnpm install -g electron

第二步：我们新建三个文件

Step 2: We create three new files

index.html

<html>

  <head>

    <title>Hello World</title>

    <style>

      body {

        background-image: linear-gradient(45deg, #EAD790 0%, #EF8C53 100%);

        text-align: center;

      }

      button {

        background: rgba(0,0,0,0.40);

        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.50);

        border-radius: 8px;

        color: white;

        padding: 1em 2em;

        border: none;

        font-family: 'Roboto', sans-serif;

        font-weight: 300;

        font-size: 14pt;

        position: relative;

        top: 40%;

        cursor: pointer;

        outline: none;

      }

      button:hover {

        background: rgba(0,0,0,0.30);

      }

    </style>

    <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css' />

    <script>

      function sayHello () {

        alert('Hello World');

      }

    </script>

  </head>

  <body>

    <button onclick="sayHello()">Say Hello</button>

  </body>

</html>


package.json

{

	"name" : "hello-world",

	"version" : "1.0.0",

	"main" : "main.js"

}


main.js

'use strict';

const electron = require('electron');//use npm install electron

const app = electron.app;  //create electron object reference

const BrowserWindow = electron.BrowserWindow;//create electron object reference  

let mainWindow = null;//mainWindow save 对应视窗的reference

app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') app.quit();

});//监听所有视窗的关闭事件 Listen for all window closures

app.on('ready', () => {

  mainWindow = new BrowserWindow();//创建一个新的应用窗口并将值负值给mainwindow变量以防止nodejs进行垃圾回收时将视窗关闭

    /Create a new application window and assign the value to the main window variable to prevent the window from closing when node JS collects garbage

  mainWindow.loadURL(`file://${__dirname}/index.html`);//将index.html加载进应用视窗中 Load index. HTML into the application window

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

});//当视窗关闭时释放所有视窗的引用 Release references to all windows when windows are closed

第三步：运行项目 electron .

Step 3: Running the project electron .

这样我们就很轻松的实现了我们的hello world 啦

So we can easily implement our Hello world.

本文的例子学习自 <<跨平台桌面应用开发基于Electron与NW.js>>这本书

by我还差的很远，有很多要学的 I'm still a long way from here. I have a lot to learn.

all that by Translation from Baidu

有趣的electron(一)的更多相关文章

  1. Electron 不完全快速手册

    Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   L ...

  2. 现在,以编程方式在 Electron 中上传文件,是非常简单的!

    必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...

  3. 极客手中的利器Electron

    作为一个前端开发人员,你可能已经听说过Electron了,你知道VS Code是基于这个技术开发的.不但VS Code, 目前一些大热的软件:飞书.Slack.WhatsApp都是基于这个技术开发的. ...

  4. 大型Electron应用本地数据库技术选型

    开发一个大型Electron的应用,或许需要在客户端存储大量的数据,比如聊天应用或邮件客户端 可选的客户端数据库方案看似很多,但一一对比下来,最优解只有一个 接下来我们就一起来经历一下这个技术选型的过 ...

  5. 个人项目WC.exe Node.js+electron实现

    前言 实现语言:Javascript 编译工具:webstorm GitHub:https://github.com/NPjuan/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本 ...

  6. 有趣的开源项目集结完毕，HelloGitHub 月刊第 63 期发布啦！

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这里有实战项目.入门教程.黑科技.开源书籍.大厂开源项目等,涵盖多种编程语言 Pyt ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 几个有趣的WEB设备API（二）

    浏览器和设备之间还有很多有趣的接口, 1.屏幕朝向接口 浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏. (1)使用css媒体查询的方法 /* 竖屏 */ @media screen and (or ...

随机推荐

  1. PHP 设置调试工具XDebug PHPStorm IDE

    先下载PHP扩展Xdebug https://xdebug.org, 可以复制自己的phpinfo粘贴到https://xdebug.org/wizard.php中, 会生成需要下载的版本, php. ...

  2. Docker容器学习梳理 - 私有仓库Registry使用

    但有时候使用Docker Hub这样的公共仓库可能不方便,这种情况下用户可以使用registry创建一个本地仓库供私人使用,这点跟Maven的管理类似.使用私有仓库有许多优点: 1)节省网络带宽,针对 ...

  3. python基础知识小结-运维笔记

    接触python已有一段时间了,下面针对python基础知识的使用做一完整梳理:1)避免‘\n’等特殊字符的两种方式: a)利用转义字符‘\’ b)利用原始字符‘r’ print r'c:\now' ...

  4. cometd简单用例

    准备工作 整个例子的源码下载:http://pan.baidu.com/s/1gfFYSbp 下载服务端jar文件 Comet4J目前仅支持Tomcat6.7版本,根据您所使用的Tomcat版本下载[ ...

  5. python基础学习笔记（十二）

    模块 前面有简单介绍如何使用import从外部模块获取函数并且为自己的程序所用: >>> import math >>> math.sin(0) #sin为正弦函数 ...

  6. 【CV】ICCV2015_Unsupervised Visual Representation Learning by Context Prediction

    Unsupervised Visual Representation Learning by Context Prediction Note here: it's a learning note on ...

  7. Scrum Meeting 8

                第八次会议 No_00:工作情况 No_01:任务说明 待完成 已完成 No_10:燃尽图 No_11:照片记录 待更新 No_100:代码/文档签入记录 No_101:出席表 ...

  8. 【Beta阶段】第七次Scrum Meeting！

    每日任务内容: 本次会议为第七次Scrum Meeting会议~ 由于本次会议项目经理召开时间为10:00,在宿舍召开,召开时长约20分钟. 队员 昨日完成任务 明日要完成任务 刘乾 #177(未完成 ...

  9. 实训十二（stick的设定）

    上篇我们介绍到人物主角的设定,其实人物是有工具使的,那就是——stick小棍. 信息的获取.起始位置.长度的加载.边界的判断.位置.长度重置是需要我们主要考虑的问题 信息获取上考虑的使什么时候加载st ...

  10. IT行业的创新的读后感

    一.什么是创新 创新是以新思维.新发明和新描述为特征的一种概念化过程.它原意有三层含义,第一,更新:第二,创造新的东西:第三,改变.创新是人类特有的认识能力和实践能力,是人类主观能动性的高级表现形式, ...