用electron写桌面应用
WebApp
右领军大都督
10人收藏 4423次学习

用electron写桌面应用

说起桌面应用,想必大家使用过的就已经海了去了。什么暴风影音、QQ、skype之类的,早已不是新鲜事!不过大家有没有了解过如何编写一个桌面应用?历史上,我们都有哪些方式去编写桌面应用呢?

实际上,桌面应用的历史并不算久远,不去查找各种资料,仅凭记忆,我能想到的曾经出现过的桌面应用编写语言就有:C++DelphiVBwinFormWPFswingawtQTflashObjective-CSwift...或许还有更多。

学习成本是不是有点高?这么多语言\技术!!如果你恰好还碰到了一个吹毛求疵的老板或者PM,他就是那么迫切的希望自己的app能够多平台发布(也不管在那些平台上是否有客户),作为程序员的你,肿么办?是勇挑大梁,然后各技术栈学习失败,最终自尽以谢老板?还是果断离开?

当然都不是,够懒的程序员应该寻找更容易实现,又能满足老板需求的解决方案。那么,我们来看看今天的话题,electron吧!

electron是什么?

根据官网的描述,electron是一种可以使用网页技术来开发跨平台桌面应用的解决方案!感受一下,用你已知的技巧htmljavascriptcss就能写桌面应用,是不是想想就有点儿小激动?!

谁在用electron?

著名的前端界IDEAtom就是使用electron编写的,震颤了有不有?

看看还有哪些著名的应用是基于electron编写的:


那么接下来,让我开始吧!

准备工作

使用程序生成器

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

最后生成的可执行程序出就现在了如下位置:

愉快的双击使用吧!!!

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部