什么是Electron

Node.js和Chromium的结合品。允许只使用HTML，CSS和JavaScript来开发跨平台桌面应用。

编写第一个Electron程序（Hello World）

  1. 在开始之前确保Node.js和Electron已经正确安装，可以用node -v,electron -v来看看有没有输出版号信息

  2. 确定必要环境都安装好之后就可以开始

    1. 首先创建一个新的文件夹，可以叫做Hello World
    2. 在该文件夹下创建三个文件，分别是index.html，main.js，package.json

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Hello World</title>

  </head>

  <body>

    Hello World！

  </body>

</html>

main.js

const electron = require("electron");

const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

const path = require("path");

const url = require("url");   //基本是electron应用必备的语句，用来导入包，处理不同的内容

let win;    //让JavaScript不要回收窗口，保持全局引用

function createWindow(){

    win = new BrowserWindow();

    win.loadURL(url.format({

        pathname: path.join(__dirname, 'index.html'),

        protocol: 'file',

        slashes: true

    }));	//载入对应的html文件

    win.on('closed', ()=> {

        win = null;

    }) //关闭窗口时释放掉

}   //创建窗口的函数

app.on('ready', createWindow);   //打开应用时，调用createWindow，即创建窗口函数

package.json

{

  "name": "electron-js-test",  //应用的名字

  "version": "1.0.0",	//应用的版本

  "main": "main.js", //主进程

  "scripts": {

    "start": "electron ."

  }		//告诉npm应该加载什么命令

}

最后在Hello World文件夹里打开命令行，输入npm start就可以看到应用打开而且输出Hello，World了

如何用Electron Js创建第一个应用Hello World的更多相关文章

  1. Node.js 创建第一个应用

    如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个"接收 HTTP 请求并提供 ...

  2. 使用node.js创建第一个应用

    node.js应用组成部分 1.引入require模块:我们可以使用require指令来载入Node.js模块. 2.创建服务器:服务器可以监听客户端的请求,类似于Apache,Nninx等HTTP服 ...

  3. Node.js创建第一个应用

    在我们创建 Node.js 第一个 "Hello, World!" 应用前,让我们先了解下 Node.js 应用是由哪几部分组成的: 引入 required 模块:我们可以使用 r ...

  4. 7.Node.js 创建第一个应用

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器, ...

  5. Vue.js 创建第一个应用

    VUE官网下载Vue.js文件或者用Vue的CDN地址 在项目中引入Vue.js文件 代码: <!doctype html> <html lang="en"> ...

  6. Node.js：创建第一个应用

    ylbtech-Node.js:创建第一个应用 1.返回顶部 1. Node.js 创建第一个应用 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 ...

  7. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

  8. 如何用js创建表格？

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  9. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

随机推荐

  1. SmartUpload工具包的中文乱码问题详解

    关于SmartUpload工具包的中文乱码问题,输出在服务端的中文显示是乱码,而英文数字,没有任何问题,我在网上看了其他人的问题和回答,让我觉得有道理,却又用不着,最后在多次试验中,终于找到了问题所在 ...

  2. Struts2中五个重要的常量

    一.五个常量的位置:位于xwork核心包下的Action字节码文件里 二.五个常量的介绍: a: SUCCESS public static final String SUCCESS = " ...

  3. git报错

    -Initial commit Untracked files nothing added to commit but untracked 代码并没有被成功提交,看信息是文件没有被tracked gi ...

  4. 使用Huginn抓取Discourse论坛

    Hi! I don't know why the xpath does not work, but have an easier solution. Discourse also has a JSON ...

  5. [置顶]生鲜配送管理系统_升鲜宝V2.0 销售订单汇总_采购任务分配功能_操作说明

    做好生鲜供应链系统,要注意三个方面,1.分拣 2 采购  3 库存,市面上做的比较成熟的功能,还是分拣这一块(按客户分拣.按订单分拣.按商品分类分拣.按商品分拣.按线路分拣.客户自由组合分拣)[下篇文 ...

  6. 生鲜配送管理系统_升鲜宝供应链系统V2.0 设计思想及主要模块，欢迎大家批评指点。

    前言: 经过这几年的开发,升鲜宝生鲜供应链系统管理软件,终于完成C/S与B/S二个版本的开发,先主要介绍B/S版本的功能,C/S版本的功能更加完善. 升鲜宝供应链系统主要由以下几个主要端组成:     ...

  7. 浏览器与android移动端视频互播技术实现

    手机端与平台之间的视频直播功能,主要通过集成多种开源视频框架以及采购第三方视频直播服务器产品来实现预定业务需求.视频直播对话功能的实现,主要经历了三个阶段:利用开源视频框架实现视频直播.采购第三方视频 ...

  8. vue 导出xlsx表功能

    详细步骤: 1.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 两个命令行包含三个依赖. 2.项目中src下 ...

  9. MySql安装教程

    一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Comp ...

  10. RocketMQ知识整理与总结

    1.架构 RocketMQ的master broker与master broker没有任何消息通讯,nameserver之间也同样没有消息通信 MQ历史 由数据结构队列发展而来 MQ使用场景    异 ...