跟我一起实现一个基于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

  1. index.html
  2. <html>
  3.   <head>
  4.     <title>Hello World</title>
  5.     <style>
  6.       body {
  7.         background-image: linear-gradient(45deg, #EAD790 0%, #EF8C53 100%);
  8.         text-align: center;
  9.       }
  10.       button {
  11.         background: rgba(0,0,0,0.40);
  12.         box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.50);
  13.         border-radius: 8px;
  14.         color: white;
  15.         padding: 1em 2em;
  16.         border: none;
  17.         font-family: 'Roboto', sans-serif;
  18.         font-weight: 300;
  19.         font-size: 14pt;
  20.         position: relative;
  21.         top: 40%;
  22.         cursor: pointer;
  23.         outline: none;
  24.       }
  25.       button:hover {
  26.         background: rgba(0,0,0,0.30);
  27.       }
  28.     </style>
  29.     <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css' />
  30.     <script>
  31.       function sayHello () {
  32.         alert('Hello World');
  33.       }
  34.     </script>
  35.   </head>
  36.   <body>
  37.     <button onclick="sayHello()">Say Hello</button>
  38.   </body>
  39. </html>
  1. package.json
  2. {
  3. 	"name" : "hello-world",
  4. 	"version" : "1.0.0",
  5. 	"main" : "main.js"
  6. }
  1. main.js
  2. 'use strict';
  4. const electron = require('electron');//use npm install electron
  5. const app = electron.app;  //create electron object reference
  6. const BrowserWindow = electron.BrowserWindow;//create electron object reference  
  8. let mainWindow = null;//mainWindow save 对应视窗的reference
  10. app.on('window-all-closed', () => {
  11.   if (process.platform !== 'darwin') app.quit();
  12. });//监听所有视窗的关闭事件 Listen for all window closures
  14. app.on('ready', () => {
  15.   mainWindow = new BrowserWindow();//创建一个新的应用窗口并将值负值给mainwindow变量以防止nodejs进行垃圾回收时将视窗关闭
  16.     /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
  17.   mainWindow.loadURL(`file://${__dirname}/index.html`);//将index.html加载进应用视窗中 Load index. HTML into the application window
  18.   mainWindow.on('closed', () => { mainWindow = null; });
  19. });//当视窗关闭时释放所有视窗的引用 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. Linux内核读书笔记第三周 调试

    内核调试的难点在于它不能像用户态程序调试那样打断点,随时暂停查看各个变量的状态. 也不能像用户态程序那样崩溃后迅速的重启,恢复初始状态. 用户态程序和内核交互,用户态程序的各种状态,错误等可以由内核来 ...

  2. NumsCount

    package com.home.test; import java.util.Arrays; public class NumsCount { public void getNumCount(int ...

  3. CentOS 7 Install Adobe Flash Player

    From Officail Adobe Flash Site don't down (YUM )adobe-release-x86_64-1.0-1.noarch.rpm,but to downloa ...

  4. HashMap为什么存取效率那么高？

    HashMap为什么存取效率那么高? 1.Hash 也叫散列.哈希. 主要用于信息安全领域中的算法,把长度不同的信息转化为杂乱的128位的编码,找到一种数据内容与地址之间的映射关系. 注意:不同的输入 ...

  5. loadrunner 基础-学习笔记一

    由于公司要使用loadrunner暂停学习jmeter 1 loadrunner组件: virtual user generator:录制最终用户业务流程并创建自动化性能测试脚本,vuser脚本 co ...

  6. delphi中ini 文件操作记要(1): 使用 TIniFile

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. sorted新用法

  8. if --else的注意点

  9. poj3061(尺取法）

    ---恢复内容开始--- 题目意思:给你一段非负序列,再给你一个值k,找出这段序列中最少的连续子序列使得和为k: 解题思路:因为都是正数,我们只需要找到一段区间不大于k,就停止,然后左边趋近看是否能得 ...

  10. Ubuntu 18.10 版本发布

    Ubuntu 是一个基于 Debian 的以桌面为主的 Linux 发行版,以其应用性而闻名.Ubuntu 提供三种官方版本:用于个人计算机的 Ubuntu 桌面,用于服务器和云的 Ubuntu 服务 ...