用electron写桌面应用_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

用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

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

愉快的双击使用吧！！！

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

See all articles