Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

参考:https://github.com/electron/electron-quick-start

1、git clone https://github.com/electron/electron-quick-start

2、cd electron-quick-start

3、cnpm install

4、npm start,启动界面如下

5、打包

参考:https://www.cnblogs.com/jackson-zhangjiang/p/10136980.html

cnpm install electron-builder -g

创建res文件夹,随便添加一个icon,一个png

6、在package.json中添加electron-builder编译所需要的属性

"devDependencies": {
"electron": "^3.0.7"
},
"build": {
"appId": "com.y.test",
"copyright":"Y",
"productName":"test",
"dmg":{
"window":{
"x":100,
"y":100,
"width":500,
"height":300
}
},
"win":{
"icon":"res/icon_net.png"
},
"mac": {
"icon": "res/icon.icns"
},
"linux": {
"icon": "res"
}
}

7、build --win --x64

ion_net.png至少要有256*256像素,暂时先不管图片了。

8、会生成一个dist目录,打包过的文件在dist目录下,test.exe可以直接运行

electron入门的更多相关文章

  1. electron 入门小白贴

    electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...

  2. Electron入门应用打包exe(windows)

    最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...

  3. electron入门教程

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  4. 1、Electron入门HelloWorld案例

    一.Electron是什么? 官网:https://electronjs.org/ Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. ...

  5. electron入门代码

    Electron 提供了一个实时构建桌面应用的纯 JavaScript 环境.Electron 可以获取到你定义在 package.json 中 main 文件内容,然后执行它.通过这个文件(通常我们 ...

  6. electron入门心得

    前言 前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个 ...

  7. electron入门笔记(三)- 引入bootstrap

    源码:https://github.com/sueRimn/electron-bootstrap 当引入jQuery和bootstrap文件时,会报错,原因是:electron 的 Renderer ...

  8. Electron入门笔记(二)-快速建立hello world

    官方的文档我没有看懂,看了不少别人的博客和文章,终于慢慢看懂了如何快速的建立一个Electron app demo,前一篇文章不是使用官方快速搭建的,而且还出了小问题,所以去撸了一遍quick-sta ...

  9. Electron入门笔记(一)-自己快速搭建一个app demo

    Electron学习-快速搭建app demo 作者: 狐狸家的鱼 Github: 八至 一.安装Node 1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装. 2. ...

随机推荐

  1. [SNOI2017]一个简单的询问【莫队+容斥原理】

    题目大意 给你一个数列,让你求两个区间内各个数出现次数的乘积的和. 分析 数据范围告诉我们可以用莫队过. 我并不知道什么曼哈顿什么乱七八糟的东西,但是我们可以用容斥原理将这个式子展开来. \[\sum ...

  2. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  3. Swarm stack

    什么是 stack ?例如:首先创建 secret. 然后创建 MySQL service,这是 WordPress 依赖的服务. 最后创建 WordPress service. 也就是说,这个应用包 ...

  4. poj 1733 Parity game(带权并查集+离散化)

    题目链接:http://poj.org/problem?id=1733 题目大意:有一个很长很长含有01的字符串,长度可达1000000000,首先告诉你字符串的长度n,再给一个m,表示给你m条信息, ...

  5. [luogu2292][L语言]

    题目链接 思路 这道题我用的是AC自动机的做法. 先把子串挂到trie树上,在单词结尾打标记的时候,标记的是当前单词的长度.然后去上面查询母串的时候,每查询到一个单词,就建立一条线段,这条线段的结尾位 ...

  6. pandas 连接数据库直接查表建立dataframe。loc,sort_values数据清洗操作

    #导入pandas import pandas as pd import numpy as np #导入SqlAlchemy from sqlalchemy import create_engine ...

  7. 内部git常用总结

    上库git常用命令总结   http://3ms.huawei.com/hi/group/1531/wiki_4955279.html?for_statistic_from=all_group_wik ...

  8. (转)你应该知道的RPC原理

    背景:对于项目中的RPC框架,仅仅停留在使用层面,对于其底层的实现原理不是很清楚.这样的后果是很危险的,对于面试官来说,跟不知道这个东西一样. 转载自:https://www.cnblogs.com/ ...

  9. PHP 生成水印图片

    这段时间因工作需要,学习了下用PHP来给背景图上添加公司logo,宣传语之类的图片合并功能.话不多说,直接上代码. <?php public function getImage() { $dat ...

  10. 每天一个Linux命令 (转)

    一. 文件目录操作命令: 1.每天一个linux命令(1):ls命令 2.每天一个linux命令(2):cd命令  3.每天一个linux命令(3):pwd命令 4.每天一个linux命令(4):mk ...