用electron寫桌面應用

時間 2019-11-06

標籤 electron 桌面應用简体版

原文原文鏈接

提及桌面應用，想必你們使用過的就已經海了去了。什麼暴風影音、QQ、skype之類的，早已不是新鮮事！不過你們有沒有了解過如何編寫一個桌面應用？歷史上，咱們都有哪些方式去編寫桌面應用呢？javascript

實際上，桌面應用的歷史並不算久遠，不去查找各類資料，僅憑記憶，我能想到的曾經出現過的桌面應用編寫語言就有：C++、Delphi、VB、winForm、WPF、swing、awt、QT、flash、Objective-C、Swift...或許還有更多。css

學習成本是否是有點高？這麼多語言\技術！！若是你剛好還碰到了一個吹毛求疵的老闆或者PM，他就是那麼迫切的但願本身的app可以多平臺發佈(也無論在那些平臺上是否有客戶)，做爲程序員的你，腫麼辦？是勇挑大樑，而後各技術棧學習失敗，最終自盡以謝老闆？仍是果斷離開？html

固然都不是，夠懶的程序員應該尋找更容易實現，又能知足老闆需求的解決方案。那麼，咱們來看看今天的話題，electron吧！前端

electron是什麼？

根據官網的描述，electron是一種能夠使用網頁技術來開發跨平臺桌面應用的解決方案！感覺一下，用你已知的技巧html、javascript、css就能寫桌面應用，是否是想一想就有點兒小激動？！java

誰在用electron？

著名的前端界IDEAtom就是使用electron編寫的，震顫了有不有？node

看看還有哪些著名的應用是基於electron編寫的：程序員

那麼接下來，讓我開始吧！shell

準備工做

安裝nodejsnpm
安裝yeomanapp

使用程序生成器

npm install -g generator-electron-naive

若是使用unix like操做系統，請在命令前加sudo

建立項目

那麼我就先來一個簡單的叫todo小應用：

yo electron-naive

當鍵入上述命令後，生成器會有一系列問題問你，按需回答便可：

問題中的Use remote URL是指，是否想直接加載一個遠程的URL？若是選"是"，那麼會再要求你輸入精確地址

調試

cd todo
npm run dev

上述命令操做完後，會有以下應用界面打開：

找到todo/src/index.html，用你喜歡的IDE打開，而後拷貝以下代碼覆蓋index.html原先的內容：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TODO</title>
    </head>
    <body>
        <ul id="todolist"></ul>
        <form action="#" method="post">
            <div>
                <label for="newitem">Add item</label>
                <input type="text" name="newitem" id="newitem" placeholder="new item" />
                <input type="submit" value="Add" />
            </div>
        </form>

        <script>

            var todo = document.querySelector('#todolist'),
            form = document.querySelector('form'),
            field = document.querySelector('#newitem');

            form.addEventListener('submit', function(ev) {
                var text = field.value;
                if (text !== '') {
                    todo.innerHTML += '<li>' + text + '</li>';
                    field.value = '';
                    field.focus();
                }
                ev.preventDefault();
            }, false);

            todo.addEventListener('click', function(ev) {
                var t = ev.target;
                if (t.tagName === 'LI') {
                    t.parentNode.removeChild(t);
                };
                ev.preventDefault();
            }, false);

        </script>
    </body>
</html>

再來看咱們app界面，變成了以下樣子：