认识Electron 开启新的探索世界一

一、Electron轻松入门

        1.搭建开发环境：

        一般情况下开发者会使用node.js来创建electron项目，node.js是一个基于Chrome V8引擎的javascript运行环境，所以首先需要到官网去下载安装node.js

          下载链接：https://nodejs.org/enhttps://nodejs.org/en

        另外，需要使用yarn依赖包管理工具,安装命令：npm  install  -g  yarn

        接下来，我们创建第一个electron应用，先创建一个目录，再次目录下打开命令行，执行如下命令创建第一个node.js项目：yarn  init

        上述命令执行完成后，会有一系列提示，要求用户输入项目名称、项目版本等信息。之后项目创建完成之后，在该目录下会生成一个package.json文件，该文件为为该项目的配置文件

        2.安装electron依赖包：

        国内用户一般在阿里巴巴搭建好的electron的镜像网站：                   https://npm.taobao.org/mirrors/electronhttps://npm.taobao.org/mirrors/electron     

         

然后设置指令：yarn  config  set  ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron

        之后环境变量设置号之后还需要在命令行中执行以下命令来安装electron:

        yarn add electron  --dev  --platform=win64

        3.安装成功之后，项目目录下会增加一个node_modules子目录，在该目录下存放着项目运行时依赖的node.js包

        4.为了可以使用electron依赖包，可以在package.jsopn中增加一个script配置;

        "script" : { "start" : "electron  ./index.js" }

        上述自定义脚本，代表我们可以使用yarn start使用electron来启动本项目

二、创建窗口界面

        1.在项目的根目录下新建index.html文件

        2.启动窗口：在项目的根目录下创建index.js文件

        其中app代表整个应用，通过它可以获取应用程序生命周期中的各个事件。我们在app的ready事件中创建窗口并且把窗口对象交给一个全局引用，这样做的目的是不让javascript执行引擎在垃圾回收时回收这个窗口对象

        在创建窗口时，我们传入了配置对象 webPreferences: {nodeIntergration: true},此配置对象告诉electron需要为页面集成node.js环境并赋予index.html页面中的javascript访问node.js的能力

        窗口创建完成后，窗口加载了index.html

        在窗口关闭时，将这个win全局置为空，所有的窗口关闭即可以退出app

        执行yarn start 后，窗口成功启动                ​​​​​​​             

三、引用javascript

        1.electron给index.js提供了完整的node.js环境的访问能力，index.js可以像所有node.js程序一样，通过require引入其他的js文件