Electron学习一——— electron的基础创建

前言

　　本人是做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）的版本

　　步骤：

1. 在任何一个磁盘上创建一个空的文件夹（如，在F盘下创建一个名字叫test的文件夹，则路径为：F:\test，下文用到路径的都用此路径）
2. 打开PowerShell进入到F:\test，可以直接在F:\test中按shift+右键，然后选择“在此处打开PowerShell窗口”，但是这样打开的不是以管理员身份打开的，建议还是用管理员身份打开，用管理员身份打开的方式是，在任务栏window图标地方按右键，然后点击“Windows PowerShell(管理员)”，然后在PowerShell中输入并执行 cd F:\test 
3. 初始化一个node.js的项目，在命令行中输入并执行： npm init ，执行后根据提示输入相应的信息（也可以一直按回车，不输入任何东西，用它的默认值），完成后在F:\test目录下会多出一个 packet.json的文件（注意：操作完这步后命令行不要关闭）
4. 编辑刚刚生成的packet.json，用文本编辑器打开packet.json，根据实际情况编辑内容，可以参考以下配置

   

   

    1 //初始化后文档内容（一直按回车生成的）
    2 
    3 {
    4 
    5   "name": "testtwo",
    6 
    7   "version": "1.0.0",
    8 
    9   "description": "",
   10 
   11   "main": "index.js",
   12 
   13   "scripts": {
   14 
   15     "test": "echo \"Error: no test specified\" && exit 1"
   16 
   17   },
   18 
   19   "author": "",
   20 
   21   "license": "ISC"
   22 
   23 }
   24 
   25  
   26 
   27 //修改后的内容
   28 
   29 {
   30 
   31   "name": "testtwo",
   32 
   33   "version": "1.0.0",
   34 
   35   "description": "",
   36 
   37   "main": "main.js",
   38 
   39   "scripts": {
   40 
   41     "start": "electron ."
   42 
   43   },
   44 
   45   "author": "",
   46 
   47   "license": "ISC"
   48 
   49 }

   View Code

    

   　　

5. 配置完之后就是安装electron，回去刚刚的命令行（如果关掉了的话重复操作步骤2），输入并执行 npm install --save-dev electron，然后electron就安装完成了