使用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. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  2. Network Wars-ZOJ2676最小割+01规划

    Time Limit: 5 Seconds Memory Limit: 32768 KB Special Judge Network of Byteland consists of n servers ...

  3. 高效 JavaScript

    高效 JavaScript 原译文地址 http://kb.operachina.com/node/207 传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能.但随着网页越来越像 Web 应 ...

  4. CSS篇

    一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. CSS盒子 ...

  5. [OC] autoLayout 博客文档

    tip :记录几个博客文档 iOS 8 Auto Layout界面自动布局系列5-自身内容尺寸约束.修改约束.布局动画 iOS AutoLayout自动布局中级开发教程(5)-修改约束的值,延迟加载 ...

  6. 微信小程序-视图视图引用

    引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...

  7. 不定长链表队列C语言实现

    #ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...

  8. 监狱3D指纹门禁系统解决方案

    由于监狱的行业特殊性,其安全性对社会的安定团结具有重大影响力.因此,采用高新技术来建立监狱的安全屏障,提高监狱安全的规范化.科学化管理水平.用高效的技术防范手段对监狱安全实行事前的主动的防范,保障社会 ...

  9. Sprint第三阶段(第四天12.12)

  10. 个推,手机推送API的使用

    参考:http://www.cnblogs.com/may-25/p/5501804.html 推送成功后返回的任务Id: String contentId = push.getContentId(m ...