如何用Electron Js创建第一个应用Hello World
什么是Electron
Node.js和Chromium的结合品。允许只使用HTML，CSS和JavaScript来开发跨平台桌面应用。
编写第一个Electron程序（Hello World）
在开始之前确保Node.js和Electron已经正确安装，可以用
node -v,electron -v来看看有没有输出版号信息确定必要环境都安装好之后就可以开始
- 首先创建一个新的文件夹，可以叫做Hello World
- 在该文件夹下创建三个文件，分别是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的更多相关文章
- Node.js 创建第一个应用
如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个"接收 HTTP 请求并提供 ...
- 使用node.js创建第一个应用
node.js应用组成部分 1.引入require模块:我们可以使用require指令来载入Node.js模块. 2.创建服务器:服务器可以监听客户端的请求,类似于Apache,Nninx等HTTP服 ...
- Node.js创建第一个应用
在我们创建 Node.js 第一个 "Hello, World!" 应用前,让我们先了解下 Node.js 应用是由哪几部分组成的: 引入 required 模块:我们可以使用 r ...
- 7.Node.js 创建第一个应用
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器, ...
- Vue.js 创建第一个应用
VUE官网下载Vue.js文件或者用Vue的CDN地址 在项目中引入Vue.js文件 代码: <!doctype html> <html lang="en"> ...
- Node.js：创建第一个应用
ylbtech-Node.js:创建第一个应用 1.返回顶部 1. Node.js 创建第一个应用 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 ...
- 第一章 用three.js创建你的第一个3D场景
第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...
- 如何用js创建表格？
1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...
- 使用three.js创建3D机房模型-分享一
序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...
随机推荐
- 从零开始学安全(四十六)●sqli-labs 1-4关 涉及的知识点
Less-1 到Less-4 基础知识注入 我们可以在 http://127.0.0.1/sqllib/Less-1/?id=1 后面直接添加一个 ‘ ,来看一下效果: 从上述错误当中,我们可以看到 ...
- 学习day03
1.结构标记 ***** 做布局 1.<header>元素 <header></header> ==> <div id=&quo ...
- Kail Linux的安装方法
众所周知,kail 是一个基于Debian的Linux发行版,它的目标就是为了在一个实用的工具包里尽可能多的包含渗透和审计工具 kail就实现了这个目标,里面包含有很多关于安全测试的开源工具,如果现在 ...
- python正常时间和unix时间戳时间的相互转换源码
在学习过程,将内容过程比较常用的一些内容做个珍藏,下面的内容段是关于python正常时间和unix时间戳时间的相互转换的内容,应该是对各朋友有些帮助. import time def timestam ...
- 随笔：关于去年的WordPress建站的回忆
2018-02-26 建站 2018-02-28 选择主题Clearision 2018-03-01 学习插入视频.修改主题 <iframe src="//playe ...
- 安装Docker时错误提示 "could not change group /var/run/docker.sock to docker: group docker not found"的解决方案
安装Dock服务,主要命令是 yum install docker. 但是在启动的时候报错:warning msg="could not change group /var/run/doc ...
- Spring Boot使用Maven打包替换资源文件占位符
在Spring Boot开发中,通过Maven构建项目依赖是一件比较舒心的事,可以为我们省去处理冲突等大部分问题,将更多的精力用于业务功能上.近期在项目中,由于项目集成了其他外部系统资源文件,需要根据 ...
- thinkPHP HTML输出多条查询结果
控制端 $select=M('Baojiao')->query("select * from think_Baojiao where COMPANY='$comname'") ...
- mysql8.0绿色版安装及mysqldump备份
1.下载mysql绿色版压缩包https://dev.mysql.com/downloads/mysql/ 2.解压到安装目录后,在根目录创建data文件夹 3.把mysql下的bin目录添加到环境变 ...
- MATLAB中“repmat”与“cat”函数的用法
MATLAB中“repmat”与“cat”函数的用法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. repmat函数 >> z=re ...