用electron写桌面应用_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

用electron写桌面应用_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:54 AM

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

实际上，桌面应用的历史并不算久远，不去查找各种资料，仅凭记忆，我能想到的曾经出现过的桌面应用编写语言就有： C++、 Delphi、 VB、 winForm、 WPF、 swing、 awt、 QT、 flash、 Objective-C、 Swift...或许还有更多。

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

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

electron是什么？

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

谁在用electron？

著名的前端界IDE Atom就是使用 electron编写的，震颤了有不有？

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

那么接下来，让我开始吧！

准备工作

安装 nodejs
安装 yeoman

使用程序生成器

npm install -g generator-electron-naive

如果使用 unix like操作系统，请在命令前加 sudo

创建项目

那么我就先来一个简单的叫 todo小应用：

yo electron-naive

当键入上述命令后，生成器会有一系列问题问你，按需回答即可：

问题中的 Use remote URL是指，是否想直接加载一个远程的URL？如果选"是"，那么会再要求你输入精确地址

调试

cd todonpm 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

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

愉快的双击使用吧！！！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser