第一个pycharm应用

Have you ever heard about hybrid applications?

您听说过混合应用程序吗？

Hybrid application development is a topic highly discussed nowadays and we are seeing a dizzying growth of this way of making applications.

混合应用程序开发是当今高度讨论的话题，并且我们看到这种制作应用程序的方式令人眼花growth乱。

Surely, you’ve heard about hybrid applications in the mobile environment with frameworks such as Cordova and Ionic, but today I want to introduce you to a framework that lets you make the exact same thing but with desktop operating systems and creating cross-platform desktop applications: Electron.

当然，您已经听说过在移动环境中使用Cordova和Ionic之类的框架的混合应用程序，但是今天我想向您介绍一个框架，该框架使您可以使用桌面操作系统和创建跨平台桌面进行完全相同的操作。应用范围：电子。

Electron is an open-source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript, next we’ll see how to create your first Electron application which can run on different operating systems and coding it only one time.

电子是 一个由GitHub开发的开源库，用于使用HTML ， CSS和JavaScript构建跨平台的桌面应用程序，接下来，我们将了解如何创建您的第一个可以在不同操作系统上运行的Electron应用程序，并且只能对其进行一次编码。

那么，什么是混合应用程序？ (So, what is a hybrid application?)

“A Hybrid Application is a program written with web technologies which can be compiled for different operating systems by coding it only one time”.

“混合应用程序是一种使用Web技术编写的程序，只需对其进行一次编码就可以针对不同的操作系统进行编译”。

So we are going to create an application with languages like HTML, CSS, and JavaScript which will not run in a web environment and in our specific case, but in a desktop one.

因此，我们将使用HTML，CSS和JavaScript之类的语言创建一个应用程序，该应用程序不能在Web环境中运行(在我们的特定情况下，而是在桌面环境中运行)。

The term “hybrid” refers to a characteristic that describes the combination of different worlds and technologies.

术语“混合”是指描述组合的特征 不同的世界和技术。

When we made an application, that is a web, mobile or desktop, we use a set of technologies which could be languages, frameworks, libraries etc, of all the types.

当我们创建一个应用程序时，即Web，移动或桌面，我们使用了一系列技术，这些技术可以是所有类型的语言，框架，库等。

When those technologies came from the “web” but we are not making a web application, we’re talking about “hybrid”.

当那些技术来自“网络”但我们没有在开发Web应用程序时，我们在谈论“混合” 。

There are many languages used for web and desktop application development which are not called “hybrid”, like Java or Python, but making an application with Electron is a little bit different.

用于Web和桌面应用程序开发的许多语言都没有被称为“混合”语言，例如Java或Python ，但是使用Electron编写应用程序则有些不同。

The main reason is simple:

主要原因很简单：

Electron is not a language, is a framework.

电子不是语言，而是框架。

As a framework, Electron is composed by some tools which make all the magic, the main two are :

作为一个框架，Electron由一些工具组成，这些工具发挥了所有魔力，主要的两个是：

NodeJS (Access to the system)

NodeJS (访问系统)

Chromium (Windows Rendering)

Chrome(Windows渲染)

We can say that JavaScript as a strong component but it’s not still the core language.

我们可以说JavaScript是一个强大的组件，但它仍然不是核心语言。

We’ll not create “JavaScript binaries” because like HTML and CSS, is not designed for the purpose of creating desktop application.This, and basic knowledge of HTML, CSS, JavaScript and NodeJs, are all you need to start making Electron apps.

我们不会创建“ JavaScript二进制文件”，因为与HTML和CSS一样，它并不是为创建桌面应用程序而设计的。这以及HTML，CSS，JavaScript和NodeJs的基本知识，都是开始创建Electron应用程序所需要的。

用电子制造 (Made with Electron)

Electron has a lot of great features and its popularity make some famous companies choose to use this framework for their application

Electron具有许多强大的功能，其受欢迎程度使一些著名的公司选择使用此框架进行应用

让我们编码吧！(Let’s code!)

What we are making now is setting up an Electron project and launch a very simple window

我们现在正在做的是建立一个Electron项目并启动一个非常简单的窗口

Let’s create our first Electron project, what we are making now is launching a very simple window with a label saying “Hello World, I’m a new Electron application!”

让我们创建我们的第一个Electron项目，我们现在正在创建一个非常简单的窗口，上面带有标签，上面写着：“ Hello World，我是一个新的Electron应用程序！”

First, you need to create the application folder, open the CMD and type

首先，您需要创建应用程序文件夹，打开CMD并键入

mkdir electronHelloWorldcd electronHelloWorld

Then we use a useful command for creating basic information about our app and all of them will be stored in a package.json file

然后，我们使用一个有用的命令来创建有关我们应用的基本信息，所有这些信息都将存储在package.json文件中

npm init

Open the package.json file and make sure you have something like below, I suggest you insert the start script to easily run “npm start” in the console

打开package.json文件，并确保您具有如下所示的内容，建议您插入启动脚本以在控制台中轻松运行“ npm start”

{ "name": "electronhelloworld", "version": "1.0.0", "description": "hello world", "main": "src/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "author": "", "license": "ISC" }

At this point, you’ll need to install electron itself.

此时，您需要自己安装electron 。

The recommended way of doing so is to install it as a development dependency in your app, which allows you to work on multiple apps with different Electron versions

推荐的做法是将其作为开发依赖项安装在您的应用程序中，这使您可以处理具有不同Electron版本的多个应用程序

npm install --save-dev electron

Now, create the src folder where you’ll locate all the important files of your project, create the index.js file and a folder named src, then position the file inside the folder.

现在，创建src文件夹，您将在其中找到项目的所有重要文件，创建index.js文件和一个名为src的文件夹，然后将文件放置在该文件夹内。

Remember to update the main entry in your package.json file.

记住要更新package.json文件中的主条目。

...main: "src/index.js",...

第一次测试 (First Test)

Now let’s check if you have set up the project correctly, open index.js and type a simple

现在，让我们检查您是否正确设置了项目，打开index.js并键入一个简单的

console.log(“Hi Electron!”)

then open the CMD and run npm start, you should see “Hi Electron!” inside your CMD.

然后打开CMD并运行npm start ，您应该看到“ Hi Electron！” 在您的CMD中。

电子应用 (The Electron App)

Now let’s start with the real thing with Electron.

现在让我们从Electron的真实事物开始。

First of all, we need the Electron module which drives our app

首先，我们需要电子模块来驱动我们的应用

const electron = require(“electron”);

Under the “electron” module, there are some interesting sub-module for creating different parts of the application.

在“电子”模块下，有一些有趣的子模块可用于创建应用程序的不同部分。

Let’s use the app module to declare an Electron application

让我们使用app模块声明一个Electron应用程序

const app = electron.app;

The app variable contains the instance of our Electron application, we can check the creation by attaching a ready event that will fire a the end of the compilation

app变量包含我们的Electron应用程序的实例，我们可以通过附加一个就绪事件来检查创建，该事件将触发编译的结束

app.on('ready', _ =>{ console.log("I'm ready!"); });

Run npm start and after a few seconds, you’ll see the message “I’m ready!” printed in your console.

运行npm start 几秒钟后，您会看到消息“我准备好了！” 打印在您的控制台中。

您的第一个窗口 (Your First Window)

Now that we created a basic Electron app, the next goal is to display something to users instead of printing simple messages in the console, which is the real purpose of a desktop application.

现在，我们已经创建了基本的Electron应用程序，下一个目标是向用户显示内容，而不是在控制台中打印简单消息，这是桌面应用程序的真正目的。

Open index.js and use the BrowserWindow Module and create a basic window

打开index.js并使用BrowserWindow模块并创建一个基本窗口

const BrowserWindow = electron.BrowserWindow app.on('ready', _ =>{ new BrowserWindow({ height:400, width:400 }) });

launch npm start and you should see your first electron window on your screen

启动npm start ，您应该在屏幕上看到第一个电子窗口

Just to get more familiar with desktop application building, let’s listen for another event, the window closing.

只是为了更加熟悉桌面应用程序的构建，让我们听另一个事件，窗口关闭。

Create a variable to an easier management of the window

创建变量以简化窗口管理

mainWindow = new BrowserWindow({ height:400, width:400 })

then declare the closed event attached on mainWindow

然后声明关闭事件附加在mainWindow上

mainWindow.on('closed', _ =>{ console.log("closed!"); mainWindow = null; })

用户界面(The User Interface)

Now we have a blank window and we are listening for some events, let’s create some basic UI to let users interface with our app.

现在我们有一个空白窗口，我们正在侦听一些事件，让我们创建一些基本的UI来让用户与我们的应用程序交互。

As we told and the start of this article, Electron uses web technologies not only for your app engine but also to display element on the screen by using HTML and CSS

正如我们在本文开头所说， Electron不仅将Web技术用于您的应用程序引擎，而且还通过使用HTML和CSS在屏幕上显示元素

Create an electronHelloWorld.html file inside the src folder and add this simple snippet

在src文件夹中创建一个electronicHelloWorld.html文件，并添加以下简单代码段

<html> <head></head> <body> <h1>Hello World, I'm a new Electron application!</h1> </body> </html>

In the app, we need to import this file and tell Electron to display it in the window we created before, we’ll use loadUrl which has an intuitive syntax.

在应用程序中，我们需要导入该文件并告诉Electron在我们之前创建的窗口中显示它，我们将使用具有直观语法的loadUrl 。

First, import the path and url module

首先，导入路径和URL模块

const path = require('path') const url = require('url')

and then use loadURL

然后使用loadURL

mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'countdown.html'), protocol: 'file:', slashes: true }))

Launch npm start and you should see something like this

启动npm start ，您应该会看到类似这样的信息

结论(Conclusion)

This the entire code we made so far

至此，我们完成的整个代码

index.js(index.js)

const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow app.on('ready', _ => { let mainWindow = new BrowserWindow({ height: 400, width: 400 }) mainWindow.on('closed', _ => { console.log("closed!"); mainWindow = null; }) const path = require('path') const url = require('url') mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'electronHelloWorld.html'), protocol: 'file:', slashes: true })) });

electronicHelloWorld.html(electronHelloWorld.html)

<html> <head></head> <body> <h1>Hello World, I'm a new Electron application!</h1> </body> </html>

Congratulation, you created your first Electron application!

恭喜，您创建了您的第一个Electron应用程序！

Keep learning and doing stuff with this framework, it’s very powerful and flexible and lets you start today building desktop applications without having specific knowledge on this field.

继续学习和使用此框架，它非常强大且灵活，可以让您立即开始构建桌面应用程序，而无需对该领域有特定的了解。

Thanks for reading!

谢谢阅读！

翻译自: https://medium.com/javascript-in-plain-english/your-first-electron-application-84f0bc64ea60

第一个pycharm应用

相关资源：微信小程序源码-合集6.rar