zoukankan      html  css  js  c++  java
  • Electron入门

    是什么:Electron是npm上的一个开源库,似乎也可以理解为一个“浏览器”,它可以通过Node.js来实现桌面应用程序。

    为什么要用它:传统的桌面应用程序多半是Java、C#、Delphi等后台语言编写的,有了Electron后,掌握Node.js也可以创建桌面应用程序了。

    类似:NW.js(由node-webkit改名而来,但根据所查资料显示,NW坑比较多,现在更倾向用Electron)。

    前提:nodejs和npm环境。

    安装

    1.由于本地无法从npmjs上安装electron,所以第一步需要先安装cnpm,这样就能够从淘宝的npm镜像中获取想要的包了。

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    2.在项目根目录安装electron

    cnpm install electron --save-dev

    代码

    ./index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Try Everything</title>
        <style type="text/css">
            body{
                /*background-color: wheat;*/
            }
            h5{
                color: PaleVioletRed;
            }
        </style>
    </head>
    <body>
        <h5>
    I messed up tonight, I lost another fight</br>
    刚搞砸了今晚 却又遭遇失败</br>
    I still mess up but I'll just start again</br>
    陷入混乱但也想不断重来</br>
    I keep falling down, I keep on hitting the ground</br>
    不断跌倒不断触地失败</br>
    I always get up now to see what's next</br>
    也要重新站起来面对接下来的挑战</br>
    Birds don't just fly, they fall down and get up</br>
    鸟儿亦不会总在翱翔 也会有起落受伤</br>
    Nobody learns without getting it won</br>
    人生亦是在坚持到胜利之后方才寻得答案</br>
    I won't give up, no I won't give in</br>
    我不会放弃 也绝不妥协投降</br>
    Til I reach the end, then I'll start again</br>
    直到到达终点 然后迈向新的战场</br>
        </h5>
    </body>
    </html>

    ./main.js

    const electron = require('electron');
     
    const app = electron.app;
     
    const BrowserWindow = electron.BrowserWindow;
     
    let mainWindow;
     
    function createWindow(){
        mainWindow = new BrowserWindow({
            400,
            height:340,
            autoHideMenuBar:true,
            icon:"./favicon.ico"
        });
    
        mainWindow.loadURL('file://' + __dirname + '/index.html');
     
        // mainWindow.webContents.openDevTools();
     
        mainWindow.on('closed', function () {
            mainWindow = null;
        });
     
    }
     
    app.on('ready',createWindow);
     
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });

    package.json

    {
      "name": "HelloWorld",
      "version": "0.0.1",
      "main": "./main.js",
      "scripts": {
        "start": "electron main.js"
      },
      "devDependencies": {
        "electron": "^1.6.11"
      }
    }

    另外还有一个图标文件

    ./favicon.ico

    运行

    electron main.js

    运行效果

  • 相关阅读:
    hdu 2485 Destroying the bus stations 迭代加深搜索
    hdu 2487 Ugly Windows 模拟
    hdu 2492 Ping pong 线段树
    hdu 1059 Dividing 多重背包
    hdu 3315 My Brute 费用流,费用最小且代价最小
    第四天 下载网络图片显示
    第三天 单元测试和数据库操作
    第二天 布局文件
    第一天 安卓简介
    Android 获取存储空间
  • 原文地址:https://www.cnblogs.com/bettyling/p/7302596.html
Copyright © 2011-2022 走看看