前言
本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览器打开,还是有人会用别的浏览器打开,这种情况通常我们会去做适配(前端),最近公司有需求要把一个项目做成Windows桌面应用,由于我们公司的前端工程师刚好离职了,然后就由我去看这块,为了方便以后的查阅和记录学习过程,决定写下这篇文章,希望有看到的会用electron的朋友指点一下。
简介
electron是由GitHub开发,用CSS、HTML和JavaScript来构建跨平台桌面应用程序的一个开源库,Electron通过将Chrom和Node.js合并到同一个运行时环境中,并将其打包为Mac、Windows和Linux系统下的应用来实现这一目的。
官网地址:http://electronjs.org/
官方文档地址:http://electronjs.org/docs/
安装
安装说明:
- 安装环境为Windows10,用的命令行程序是PowerShell
- 文字背景颜色含义:黄色的是命令行命令,红色的是必须项(只会出现在代码行中,意思是必须要这样写)
- 安装electron前确保安装环境下能在命令行中执行npm命令(也就是说确定环境下安装了node.js),检查方式:在命令行中输入 npm -version 查看npm(node.js)的版本
步骤:
- 在任何一个磁盘上创建一个空的文件夹(如,在F盘下创建一个名字叫test的文件夹,则路径为:F:\test,下文用到路径的都用此路径)
- 打开PowerShell进入到F:\test,可以直接在F:\test中按shift+右键,然后选择“在此处打开PowerShell窗口”,但是这样打开的不是以管理员身份打开的,建议还是用管理员身份打开,用管理员身份打开的方式是,在任务栏window图标地方按右键,然后点击“Windows PowerShell(管理员)”,然后在PowerShell中输入并执行 cd F:\test
- 初始化一个node.js的项目,在命令行中输入并执行: npm init ,执行后根据提示输入相应的信息(也可以一直按回车,不输入任何东西,用它的默认值),完成后在F:\test目录下会多出一个 packet.json的文件(注意:操作完这步后命令行不要关闭)
- 编辑刚刚生成的packet.json,用文本编辑器打开packet.json,根据实际情况编辑内容,可以参考以下配置
//初始化后文档内容(一直按回车生成的) { "name": "testtwo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } //修改后的内容 { "name": "testtwo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron ." }, "author": "", "license": "ISC" }
- 配置完之后就是安装electron,回去刚刚的命令行(如果关掉了的话重复操作步骤2),输入并执行 npm install --save-dev electron,然后electron就安装完成了