未来客户端编程的王者

Posted on Sun 23 May 2021 in Journal

Thinking

未来客户端编程的王者，不是 .Net, 不是 Java, 不是 QT，而是 Electron. 看看这几款杀手级应用 Atom, Visual Studio Code, Slack，每一个都能为上述的预测背书。

看看它的官方网站是怎么说的 - ”If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.“

HTML, JavaScript, CSS, NodeJS, 这几样东西搞前端的人没有不会的，很多象我这样的后端工程师也都懂，所以把跨平台的痛抛在脑后，尽情实现你的梦想吧.

从这里开始: https://github.com/electron/electron-quick-start

Electron 5分钟教程

1) 步骤一：安装 yarn 和 electron

mkdir potato
cd potato/
npm install -g yarn 
yarn init
yarn add electron --dev

2) 创建一个 index.js

var electron = require("electron");
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

var win = null;

app.on('ready', function() {
    win = new BrowserWindow({
        webPreferences: { nodeIntegration: true}
    });

    win.loadFile('index.html');
    win.on('closed', function() {
        win = null;
    });
});

app.on('window-all-closed', function() {
    app.quit();
});

2) 创建一个 index.html

<html>
<head>
    <title> Potato Timer</title>
</head>
<body>
    <div>
        <h1> Potato Timer</h1>

        <div>
            <p><button id="startButton">Start</button></p>
            <p><button id="pauseButton">Pause</button></p>
            <p><button id="resumeButton">Resume</button></p>
            <p><button id="stopButton">Stop</button></p>
        </div>
    </div>
</body>
<script>

    let startButton = document.querySelector("#startButton");
    startButton.onclick = function() {
        alert("started");
    };


</script>

4) 启动应用

编辑 package.json

{
  "name": "potato",
  "version": "1.0.0",
  "description": "todo timer",
  "main": "index.js",
  "author": "Walter Fan",
  "license": "MIT",
  "devDependencies": {
    "electron": "^13.1.2"
  },
  "scripts":{"start": "electron ./index.js"}
}

启动应用

yarn start

Previous Post Next Post

Thinking

Electron 5分钟教程

You might enjoy