使用Electron开发第一个应用

Electron 应用的目录结构如下:

app/ 
├── package.json 
├── main.js 
└── index.html

新建一个app文件夹 将这三个文件都放在里面 
package.json的内容

{
"name" : "app",
"version" : "0.1.0",
"main" : "main.js"
}
  • 1
  • 2
  • 3
  • 4
  • 5

注意:如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js

main.js的内容

var app = require('app');  。
var BrowserWindow = require('browser-window');
var mainWindow = null; app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
}); app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

index.html的内容

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

运行方法

直接打开electron.exe 将app文件夹拖进去就可以了 

或者在cmd窗口 输入electron.exe 参数是app文件夹所在的路径

Electron-使用Electron开发第一个应用的更多相关文章

  1. (译)通过 HTML、JS 和 Electron 创建你的第一个桌面应用

    原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...

  2. 第一章 Electron介绍 | Electron in Action(中译)

    Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Cod ...

  3. 【Electron】Electron开发入门(二):创建项目Hello Word

    创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文 ...

  4. Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】

    背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已 ...

  5. 中文代码示例之Electron桌面应用开发初体验

    参考: 打造你的第一个 Electron 应用 首先运行下面在目录下创建package.json: $ npm init 去掉了一些无关项后内容如下: { "name": &quo ...

  6. Electron结合React开发环境遇到的问题

    链接 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron 当在React中使用require('electron')时就会报TypeEr ...

  7. Cordova - 使用Cordova开发iOS应用实战1(配置、开发第一个应用)

    Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的 ...

  8. iOS开发——高级技术精选&底层开发之越狱开发第一篇

    底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...

  9. 【翻译习作】 Windows Workflow Foundation程序开发-第一章05

    1.3      开发我们的第一个工作流 也许你曾经在这样的产品经理手下搞过开发:他总是在你身边转悠,并不时的问一句“你还没做完吗?”.在这一部分,我们将用一个简单的Windows Workflow程 ...

随机推荐

  1. NOIP 2013 货车运输 最大生成树加DFS巧妙AC

    #include<set> #include<map> #include<cmath> #include<queue> #include<stac ...

  2. NOI 动态规划题集

    noi 1996 登山 noi 8780 拦截导弹 noi 4977 怪盗基德的滑翔翼 noi 6045 开餐馆 noi 2718 移动路线 noi 2728 摘花生 noi 2985 数字组合 no ...

  3. apache2.4配置访问日志分割并过滤图片CSS等无用内容

    相关信息 1.apache日志有访问日志和错误日志,错误日志根据日志级别来输出错误信息,而访问日志根据定义的日志格式来记录访问动作 2.访问日志格式在httpd.conf文件里面定义,在虚拟主机里面引 ...

  4. tomcat 增加压缩设置

    conf/server.xml中,Connector的配置中添加 compression="on" compressionMinSize="512" noCom ...

  5. UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果

    上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView.UIPageControl.UIImageView这三个控件 ...

  6. shell导出mysql部分数据

    #!/bin/shSYSTEM=`uname -s` echo "echo"$SYSTEM if [[ $SYSTEM = "Linux" ]]; then   ...

  7. 转载:AbstractQueuedSynchronizer的介绍和原理分析

    简介 提供了一个基于FIFO队列,可以用于构建锁或者其他相关同步装置的基础框架.该同步器(以下简称同步器)利用了一个int来表示状态,期望它能够成为实现大部分同步需求的基础.使用的方法是继承,子类通过 ...

  8. python画图设置坐标轴大小

    在console端输入python语句,会一句输一行,而且不保留你所做的操作,但是每一句之间加一个分号就能很好的解决. import pylab as Plot Plot.xlim(-150, 150 ...

  9. C#利用HttpWebRequest进行post请求的示例(HTTPS)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  10. sql-删除无效sql链接

    create proc dtLink ( ) --数据库名称 ) as --查询临时表是否存在 if(OBJECT_ID('temp..db') is not null) begin drop tab ...