用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界面，变成了以下样子：

生成应用程序包

以前生成项目的过程当中，在“Which platform you'd like to package to?”这个问题里，你可选择未来要支持的操做系统，以便生成相应的打包代码。

那么如今咱们就来生成一个程序包吧：

npm run dist

最后生成的可执行程序出就如今了以下位置：

愉快的双击使用吧！！！