如何用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的技术博客],在那篇博文的 ...
随机推荐
- 创建索引CreateIndex
nuget引用NEST new一个客户端 源码可查ElasticClient.cs new一个ElasticClient有多种方式 第一种 ES地址是http://localhost:9200,可以直 ...
- JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密
JS实现客户端的网页加密解密技术,可用作选择性隐蔽展示.当然客户端的加密安全度是不能与服务器相提并论,肯定不能用于密码这类内容的加密,但对于一般级别的内容用作展示已经够了. JS加密与解密的解决方案有 ...
- C# WebRequest.Create 锚点“#”字符问题
背景 在与后台API接口对接时,如将网页Url作为参数请求数据时,如果是锚点参数,则会丢失. 锚点参数 请求通过WebRequest.Create创建一个WebRequest: var uri = & ...
- Flask实战第5天：页面跳转和重定向
GET和POST请求 在网络请求中有许多请求方式,比如GET, POST, DELETE, PUT等,最常用的就是GET和POST GET 只会在服务器上获取资源,不会更改服务器的状态,这种请求方式推 ...
- Django 提交 form 表单
创建 Django 的过程可以参考上一篇文章 https://www.cnblogs.com/klvchen/p/10601536.html 在 templates 文件夹下创建一个 index.ht ...
- Odoo 强大的开源微信模块 oejia_wx
详见:http://oejia.net/blog/2018/10/24/oejia_wx_v054.html oejia_wx Odoo 的微信模块,提供了对微信公众号.企业号(企业微信)及小程序的接 ...
- KsUML 免费的类图建模工具
最近基于SharpDevelop和NClass两个开源软件,开发了一个免费的类图建模工具,详情请访问 www.TimeGIS.com KsUML类图建模工具是一个用来给软件开发人员使用的一种UML类图 ...
- Git - git status - 查看当前仓库状态
索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git status 二.说明: 1."status" 部分 该命令可以查出当前分支文件变更状态, 可以查出 ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- jquery html() callback
通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片.问题是JQuery的.html()函数是同步的 ...