狗万官网酒店 > 狗万官网下载 > 前者Electron新手入门教程详解_node.js

前者Electron新手入门教程详解_node.js

来源: 2019-08-04 19:43 我来投稿 参与评论
这篇文章主要介绍了Electron新手入门教程详解,最先围绕Electron框架的重要性知识点进行详细讲解,接下来对DEMO先后进行分析,让前端开发人员对利用Electron付出桌面应用程序有一番初步的询问。,要求的爱人可以参考下

Electron 是什么

定义

Electron是一番能让你利用传统前端技术(Nodejs, Javascript, HTML, CSS)付出一个跨平台桌面应用的框架。此地所说的桌椅应用指的是在Windows、OSX及Linux系统上运行的顺序。

历史

2013年之时光,Atom编辑器问世,表现落实它的底部框架Electron也逐渐把熟知,到2014年时被开源,这次它还是叫Atom Shell。

下一场的几年,Electron在不断的创新迭代,几乎每年都有一番重大的横幅

  • 2013年4月11日,Electron以Atom Shell命名起步。
  • 2014年5月6日,Atom以及Atom Shell以MIT许可证开源。
  • 2015年4月17日,Atom Shell改名为Electron。
  • 2016年5月11日,1.0本版发布。
  • 2016年5月20日,同意向Mac运用商店提交软件包。
  • 2016年8月2日,支持Windows公司。
  • 在最新的平静版本V3.x外方,Electorn购并了Nodejs v10.2.0和本为v66.0.3359.181的Chromium

    基于Electron落实的硬件

    Electron现已被多个开源应用软件所运用,其中被广泛程序员所熟知和应用的Atom和VsCode编辑器就是基于Electron落实的。尝试打开VsCode,点击帮助菜单中的切换开发人员工具,可以在规模上观看咱熟悉的Chrome devtool,如下图

    底层实现

    鉴于采取场景是在系统平台上开发利用,故而我们开发时要求有能调用原生系统api的力量。为了能让前端语言能跟底层可以交互,Electron购并了Nodejs+Chromium。Nodejs重大承担应用程序主线程逻辑控制、底层交互等效果,Chromium重大承担渲染线程窗口的工作逻辑。重大的架构如下图:

    这样的架构让单独升级Chromium本版成为可能。假设你的顺序当前利用的是Electron v3.x的本子,本条版本的Electron所带的Chromium是66本版。此刻如果你用之一些特性必须要使用Chromium 69本版,除了整体升级Electron到指定最新版本外,你还可以单独的对Chromium本版进行升级。

    但是一般情况我们不建议这么做,因为成功之提升需要你具备C和C++相关的所见所闻,并且对Chromium的底部实现具有原则性的询问。即使你成功升级了Chromium的本子,但是对于软件整体的稳定是心有余而力不足保证的。

    为什么要用

    以Windows平台为例,大一些人会首先想到使用QT(C++),WPF(C#) 等语言去开发利用。不得否认的是,那些已经是突出成熟的支出方案了。但是,咱来看下如从两种情景:

  • 合作社要做个全新的APP,但是技术人员组成大部分都是前者开发
  • 合作社原本就有在线的web运用,但是想包个壳能在桌面直接打开,同时增加一些与系统交互的效果
  • 对于重大种情景,初三中开发人员对于C++和C#并不习,虽然可以现学,但是任何项目的艺术管理和项目管理就会变得不可控。

    对于第二种情景,对于应用的工作逻辑要求并不多,是否套一个具有浏览器的运作环境,单独为此配置一个C++、C#付出人员划不来。

    对于这两种情形,如果现有的前端开发人员能直接搞定,那就特别完美了。

    Electron的出生提供了这种可能性。其它可以扶持前端开发者在不需要学习其他语言和艺术的大前提下,迅速开发跨平台的桌椅应用。

    怎么用

    在后头的章节中,咱会根据主要的知识点并辅以切实案例来具体讲解如何使用Electron开展开发。此地我们只简单的介绍下如何使用Electron写一个经典的Hello World。

    最先,组建一个目录,初始化npm

    mkdir helloword
    npm init

    修改package.json文件,追加npm run start命令

    {
    "name": "electron demo",
    "version": "1.0.0",
    "description": "",
    "main": "main.js", //修改为main.js
    "scripts": {
    "start": "electron ." //追加start命令
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
    "electron": "^3.0.10"
    }
    }

    穿越npm安装Electron

    npm i electron --save-dev

    在根目录创建main.js和index.html

    main.js

    const { app, BrowserWindow } = require('electron')
    function createWindow () { 
    // 创造浏览器窗口
    win = new BrowserWindow({ width: 800, height: 600 })
    // 接下来加载应用的 index.html。
    win.loadFile('index.html')
    }
    app.on('ready', createWindow)

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
    </html>

    到此处,咱整个的准备工作都形成了,下一场就是运行它!

    npm run start

    探望效果

    关于Electron的简易介绍就到此处为止,想必大家已经对Electron有了有的初步的认识。

    上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

    义务编辑:狗万官网酒店
     
     
    0% (0)
     
     
    0% (0)
    机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
    地名: 匿名?


      1. 
           
            &lt;label id="02a0cc97"&gt;&lt;/label&gt;