什么是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. C#中public、private、protected等关键字说明

    public 公有访问.不受任何限制.private 私有访问.只限于本类成员访问,子类,实例都不能访问.protected 保护访问.只限于本类和子类访问,实例不能访问.internal 内部访问. ...

  2. Linux高级运维 第二章 Linux基本操作和自己动手组装服务器

    2.1  Linux网络相关概念和修改IP地址的方法 2.1.1  网卡的命名规则       Centos 6的网卡命名方式:它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连 ...

  3. Java 工厂模式(一)— 抽象工厂(Abstract Factory)模式

    一.抽象工厂模式介绍: 1.什么是抽象工厂模式: 抽象工厂模式是所有形态的工厂模式中最为抽象和最具有一般性的一种形态,抽象工厂模式向客户端提供一个接口,使得客户端在不知道具体产品的情类型的情况下,创建 ...

  4. java 线程池 ---- newSingleThreadExecutor()

    class MyThread implements Runnable{ private int index; public MyThread(int index){ this.index = inde ...

  5. 使用 Scrapy 爬取股票代码

    个人博客: https://mypython.me 源码地址: https://github.com/geeeeeeeek/scrapy_stock 抓取工具:scrapy scrapy 介绍 Scr ...

  6. (办公)mybatis工作中常见的问题(不定时更新)

    1.mybatis的like查询的方式. <if test="shopName != null and shopName != ''"> <bind name=& ...

  7. 做优化的数据库工程师请参考!CynosDB的计算层设计优化揭秘

    本文由云+社区发表 本文作者:孙旭,腾讯数据库开发工程师,9年数据库内核开发经验:熟悉数据库查询处理,并发控制,日志以及存储系统:熟悉PostgreSQL(Greenplum,PGXC等).Terad ...

  8. Python基础之字典

    字典初识 字典的认识 首先,我们来认识一下字典: # 定义一个字典 user_dict = {"name": "zhangsan", "age&quo ...

  9. ubunru18.04下面安装docker

    sudo apt-get updat // 更新apt包索引 sudo apt-get remove docker docker-engine docker-ce docker.io // 卸载旧版本 ...

  10. jmeter(二十六)生成HTML性能测试报告

    性能测试工具Jmeter由于其体积小.使用方便.学习成本低等原因,在现在的性能测试过程中,使用率越来越高,但其本身也有一定的缺点,比如提供的测试结果可视化做的很一般. 不过从3.0版本开始,jmete ...