也许你不甘心只写网页,被人叫做"他会写网页",也许你有项目需求,必须写桌面应用,然而你只会前端,没关系.网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希望能你在写自己的应用的时候,感到心中有数.话不多说,进入正题: 一.安装electron 为了方便你以后的使用,建议全局安装.以后在任何文件夹都能使用electron.怎么安装就不废话了,不会的去官网,安装好electron之后也安装一个专用的打包工具electron-packager,以方便…

把electron发布的exe打包成setup安装程序,需要使用nsis软件, nsis打包的详细教程,可以参考我的这篇文章: win7下nsis打包exe安装程序教程…

[Electron]Electron Icon 图标说明.及常见问题 其实各种打包模块都有相关的文档说明,相关链接如下: electron-builder:https://www.electron.build/icons.html electron-packager: https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html#icon 1.图片格式 windows 和 ma…

创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文件夹 ①.打开cmd,切换到自己的项目文件目录 然后输入命令 npm init创建 package.json文件, 然后按照步骤一步一步来,一直到最后 最后成功的图: 内容为: { "name": "package.json", "version":…

在做electron桌面通知时,按照文档实现弹出通知,但是默认的应用名为electron.app.Electron 解决办法 就是在主进程中设置 app.setAppUserModelId('myAppId') // myAppId 应用的id 然后就可以了…

1.使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 2.下载https://github.com/electron/electron-quick-start中的示例 3.在示例目录下本地安装electron.以及electron-packager npm install electron --save-dev npm install electron-packager --save-dev 4.修改package.json文件: { "name": "…

一.安装 electron-packager PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 "main": "app/main.js"的路径(去掉app/),不这样子的话,下面打包的时候会报错,有的版本识别不了应用路径. 1.使用命令 npm install --save-dev electron-packager 将electron-package包安装到在项目下面, 安装完成之后,项…

该文章说明基于win平台下,mac及linux没有实验 关于electron-builder打包可以有两种方案: 1. 打包成文件夹及绿色免安装: electron-builder --dir(依赖winCodeSign) 2.打包成exe的安装包 electron-builder (依赖winCodeSign和nsis) electron-builder有一些依赖包如 [winCodeSign].[nsis]:在***的情况下,直接执行命令就会自动处理相关依赖,但天朝基本不***,所以会出现包…

Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器. 有时候面对需求,开发出的web page既要能Online又要Offline(Offline是针对一些特殊网络环境或者page资源很大的情况下,企业或者其他机构要求的) web page offline的时候,甚至…

Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDE Hyper - Terminal. 3万多星的命令行窗口,慌了! 其他 本章主要内容 理解Electron是什么 学习Electron基于什么技术 了解使用Electron和传统Web应用程序有什么不同 构建Electron应用…

1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu = require('electron').Menu; var template = [ { label: '关闭', click: function () { win.close();console.log("关闭")}, // submenu: [ // { // label: 'Undo', // accelerator: 'CmdOrCtrl+Z'…

1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require('electron'); // Open a local file in the default app var path1 = "d:\ProjectsSpace\ElectronProjects\ElectronTest2\app\html\config\record.txt"; shell.openItem(path1); //打开网页链接 // Open a URL in th…

一.调用PC端默认方式打开本地文件 在main.js里 // 打开系统本地文件或者网页链接 const {shell} = require('electron'); // Open a local file in the default app var path1 = "d:\\ProjectsSpace\\ElectronProjects\\ElectronTest2\\app\\html\\config\\record.txt"; shell.openItem(path1); //…

一.main process 和 web page 通信 electron框架主进程(Main Process)与嵌入的网页(web page,也就是renderer process)之间的通信 Main.js里添加代码 //通信模块,mian process与renderer process(web page) const {ipcMain} = require('electron') //监听web page里发出的message ipcMain.on('asynchronous-messa…

刚接触Electron+js开发PC端桌面应用程序的时候,简直一头雾水,搜了网上很多教程,有的要么讲的零零碎碎,要么就是版本太低,很多API语法都不能用了:现在我把一些有用的教程归纳一下,并把目前最新Electron版本1.4.0的使用语法贴出来,目的是为了有个能正常运行的DEMO教程: 一.配置安装 1.安装node ①.node.js下载链接http://nodejs.cn/download/ 选择适合自己电脑系统的安装包,比如win7 64位系统,那么选择下图红框中的 ②.安装完成以后在c…

构建weex项目 安装weex-toolkit cnpm install -g weex-toolkit 初始化一个项目只需新建文件夹并在目录下执行 weex init 即可 安装依赖:cnpm install 编译项目:npm run dev 启动服务器:npm run serve //可以修改package.json的端口号来改变监听端口 可以执行的命令一览 使用weexpack打包weex项目 各种百度 'weex打包' '如何打包weex apk' 'weex 发布 apk' 未果 最后…

在需要打包的项目目录下找到pom.xml文件 (过程中可能遇到 :-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HO  错误) 解决办法:Preference->Java->Installed JREs->Edit 选择一个jdk, 添加  -Dmaven.multiModuleProjectDirectory=$M2_HOME 然后右键pom.xml文件--Run As--点击mave…

Hadoop编译打包,基于2.7.2版本的源码. # 打包过程中需要使用到的工具 java -version mvn -version ant -version type protoc type cmake # Hadoop 2.7.2源码下载地址  http://apache.fayea.com/hadoop/common/hadoop-2.7.2/hadoop-2.7.2-src.tar.gz # 1.开始打包,解决各种报错 打包命令: mvn package -Pdist,native -…

android5.1平板或手机应用层一些常用的修改项及目录所在: 1.所以系统应用所在的目录: \alps\packages\apps 2.一些系统属性的定义:并且可以仿写自行定义变量 \alps\build\tools\buildinfo.sh 3.一些apk的添加和删除: \alps\build\target\product\generic.mk \alps\build\target\product\generic_no_telephony.mk \alps\build\target\pro…

Electron 使用 Webpack2 打包多入口应用程序 接前面一篇文章,前一篇文章中只有一个页面,并且只有一个js文件,所以打包的时候会把那个js打包成一个bundle.js文件.但是假如我们有多个页面,且每个页面需要使用的js文件也不同,那么我们应该怎样打包呢. 安装依赖库 这里准备做个小的演示程序,首先安装一些这个演示程序需要看的第三方库 $ npm install --save-dev electron $ npm install --save-dev electron-packag…

Electron 使用 Webpack2 打包应用程序 前两天看了一下使用 Electron 来开发应用程序,今天说说所怎样集成 Electron 和 Webpack2 来打包应用程序. 安装依赖库 这里准备做个小的演示程序,首先安装一些这个演示程序需要看的第三方库 $ npm install --save-dev electron $ npm install --save-dev electron-packager $ npm install --save-dev webpack $ npm…

最近在折腾把项目打包成桌面应用程序,发现一个工具electron,可以讲项目打包成一个跨平台的应用程序,很方便,来学习一下. 1.先安装electron.electron-packager,安装方法可以使用package.json文件配置,然后npm install也可以使用cnpm安装,速度会快点,具体如下:npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm i package.json如下: { "name&q…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): 使用ffi-napi引入C++的dll electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)   引言 本篇将介绍如何将你开发的electron项目(main.js), 打包成一个可执行桌面程序(.exe). 有…

1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用 在任何地方,建立一个app的目录并新建3个文件: app/ ├── package.json ├── main.js └── index.html package.json { "name" : "your-app", "version" : "0.1.0&quo…

electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 快速开始electron 直接运行github上关于electron的构建工具 git clone https://github.com/electron/electron-quick-start cd…

上一篇讲了使用electron进行打包的配置相关文件,这篇主要讲electron中很重要的通信方式. 首先解释一个概念: electron打包的应用包含两个部分 electron的环境(node),也就是主进程. web渲染环境,副进程. 这两个环境之间是相互隔离的,无法直接进行数据通信,所以有了这篇文章. 三个角色: ipcRender ipcMain webContents ipcRenderer用于渲染进程 ipcRenderer.on(channel, listener) --> cha…

因为信奉一句话:JavaScript 终将一统天下,所以要想方设法开疆扩土. 今天介绍的这个electron就是一大神器,可以很方便的将网页应用打包为Mac, Win, Linux下的可执行文件,只需进行简单的配置,虽比不上原生的速度和瘦小,但是性价比着实不错. 一 在package.json中指明对应版本,(electron和electron-builder需放在devDependencies中),使用yarn添加模块 { "name": "electron_example…

判断是否开发环境 安装 electron-is-dev npm install electron-is-dev // main.js const isDev = require('electron-is-dev') 或者 // electron-is-dev 的源码 const electron = require('electron'); const app = electron.app || electron.remote.app; const isEnvSet = 'ELECTRON_IS…

在看张鑫旭博客得时候看到了electron这个东西,来了兴趣,就按照上面写的将已经做好得vue项目拿来试了试,出乎意料得顺利 electron简单说下electron,就是把 chrome内核和你的项目文件打包成一个程序,和移动端得混合应用有点类似.当然实现起来肯定没有说得这么简单得. 那么怎么做呢? 首先,你电脑上面要有git 和 node ,git可以不要,不过最好安装了,Node必须要. 第二步  使用git clone  https://github.com/electron/elect…

一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了. 1.克隆官方demo:git clone https://github.com/electron/electron-quick-start 2.cd electron-quick-start->npm insta…