如何用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的技术博客],在那篇博文的 ...
随机推荐
- GTX 750TI 使用 ffmpeg 时无法用 GPU HEVC(h.265) 进行加速
官网版本好像不是能加速的,所以在github上找到一个已经带gpu加速的. https://github.com/illuspas/ffmpeg-hw-win32 GPU加速命令格式: ffmpeg. ...
- JavaScript常用代码书写规范
javascript 代码规范 代码规范我们应该遵循古老的原则:“能做并不意味着应该做”. 全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块. 不推荐 , y = ; c ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- java 线程方法 ---- sleep()
class MyThread implements Runnable{ @Override public void run() { for (int i = 0; i < 5; i++){ Sy ...
- 测者的测试技术手册:Junit执行单元测试用例成功,mvn test却失败的问题和解决方法
今天遇见了一个奇怪的问题,在IDE中run unit test,全部cases都成功了,但是后来通过mvn test运行case确保错了.在寻求原因的同时也找到了对应的解决方法. Run Unit T ...
- 解决Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.7.0:compile
原因: 由于项目所需jdk版本和你当前使用的jdk版本不一致导致的,因为我项目的pom.xml中定义了java版本为1.8,但是我实际idea中run这个项目却是1.7 解决方案: 更换当前jdk版本 ...
- python 验证码识别库pytesseract的使用
笔者环境 centos7 python3 pytesseract只是tesseract-ocr的一种实现接口.所以要先安装tesseract-ocr(大名鼎鼎的开源的OCR识别引擎). 依赖安装 yu ...
- websocket简单实现在线聊天
WebSocket简介与消息推送 B/S架构的系统多使用HTTP协议,HTTP协议的特点: 1 无状态协议2 用于通过 Internet 发送请求消息和响应消息3 使用端口接收和发送消息,默认为80端 ...
- Keepalibed监控nginx
配置Keepalived监控nginx --wang 目的: 通过Keepalived实现对nginx的监控,每两秒扫描一次,如果nginx关闭,尝试重启nginx,两秒后检查nginx是否启动,如果 ...
- How to Make Fibonacci Confusing
前几天同事发了这么一段代码 (fn => (f => f(f))(f => fn(n => f(f)(n))) )(g => n => [1, 2].indexOf ...