目录

先决条件

第1步——设置开发环境

安装Node.js和NPM

设置Python虚拟环境

创建虚拟环境

第4步——创建Node.js应用程序

如何在Electron和Python之间进行通讯

什么是IPC?

使用child_process生成Python进程

使用python-shell

使用客户端-服务器通信

概括


先决条件

本教程专为希望使用现代Web技术、HTML、CSS和JS及相关框架构建桌面应用程序和GUI的Python开发人员而设计。

为了能够轻松地学习本教程,您需要具备一些先决条件:

  • 必须具备Python知识。
  • 您应该习惯使用JavaScript,HTML和CSS等网络技术。
  • 您还应该熟悉npm中的Node.js软件包的安装和使用。

第1步——设置开发环境

在本节中,我们将建立一个运行示例的开发环境。我们需要在计算机上安装Node.js以及NPM和Python 3。

安装Node.js和NPM

您可以遵循多种方法在开发机器上安装Node.js和NPM,例如使用:

  • 目标操作系统的官方二进制文件
  • 您系统的官方软件包管理器
  • NVM(节点版本管理器),用于在同一台计算机上安装和管理Node.js的多个版本

让我们保持简单,只需访问官方网站并下载目标操作系统的二进制文件,然后按照说明在系统上安装Node.js和NPM。

设置Python虚拟环境

您很有可能已经在开发计算机上安装了Python 3。如果未安装,最简单的方法是访问官方网站并获取目标系统的二进制文件。

您可以通过打开命令行界面并运行以下命令来确保在系统上安装了Python 3:

$ python --version
Python 3.7.0

现在,让我们建立一个虚拟环境。

创建虚拟环境

在本节中,您将用venv创建隔离的虚拟环境以运行示例并安装所需的软件包。

虚拟环境允许您创建一个环境来隔离当前项目的依赖关系。这将使您避免具有不同版本的相同软件包之间的冲突。

在Python 3中,您可以利用venv模块创建虚拟环境。

现在,转到您的终端并运行以下命令来创建虚拟环境:

$ python -m venv env

接下来,您需要使用以下命令激活环境:

$ source env/bin/activate

在Windows上,您可以使用Scripts\activate.bat文件激活虚拟环境,如下所示:

$ env\Scripts\activate.bat

就是这样。现在,您已经激活了虚拟环境,并且可以为示例安装软件包。

第4步——创建Node.js应用程序

现在,我们已经通过将Node.js与npm一起安装并创建Python虚拟环境,来设置了用于Python和Electron开发的开发环境,让我们继续创建Electron应用程序。

首先,为项目创建一个文件夹,并使用以下命令在其中创建package.json文件:

$ mkdir python-nodejs-example
$ cd python-nodejs-example
$ npm init -y

Npm的init命令会产生一个具有以下默认值package.json文件

{"name": "python-nodejs-example","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

您可以自定义这个文件中您认为适合您的项目的值,您也可以简单地使用这个简单示例的默认值。

接下来,我们需要在项目的文件夹中创建两个文件index.htmlindex.js

$ touch index.js
$ touch index.html

如何在Electron和Python之间进行通讯

在本节中,我们将看到可用于实现Electron和Python进程之间的通信的各种可用方法。

什么是IPC?

根据维基百科:

在计算机科学中,进程间通信(IPC)特指操作系统提供的机制,允许进程管理共享数据。通常,应用程序可以使用IPC,分类为客户机和服务器,其中客户机请求数据,服务器响应客户机请求。

IPC是指操作系统支持的一组机制,以使不同的本地或远程进程能够相互通信。例如,在我们的例子中,我们希望允许在Electron进程和Python进程之间进行通信。

让我们看一些实现IPC的方法。

使用child_process生成Python进程

Node.js提供了{ child_process](https://nodejs.org/api/child_process.html)模块,该模块允许您生成子进程。

让我们用它来生成一个Python进程并运行一个简单的calc.py脚本。

我们将使用simplecalculator在Python中进行简单的计算,因此我们首先运行以下命令进行安装:

$ sudo pip install simplecalculator

首先,在项目的文件夹中,创建一个py文件夹,并在其中创建一个calc.py文件:

$ mkdir py & cd py
$ touch calc.py

打开calc.py文件,并添加以下Python代码,该代码执行计算并将结果打印到标准输出中:

from sys import argv
from calculator.simple import SimpleCalculatordef calc(text):"""based on the input text, return the operation result"""try:c = SimpleCalculator()c.run(text)return c.log[-1]except Exception as e:print(e)return 0.0if __name__ == '__main__':print(calc(argv[1]))

接下来,创建一个renderer.js文件,并添加以下代码以生成Python进程并执行py/calc.py脚本:

function sendToPython() {var python = require('child_process').spawn('python', ['./py/calc.py', input.value]);python.stdout.on('data', function (data) {console.log("Python response: ", data.toString('utf8'));result.textContent = data.toString('utf8');});python.stderr.on('data', (data) => {console.error(`stderr: ${data}`);});python.on('close', (code) => {console.log(`child process exited with code ${code}`);});
}btn.addEventListener('click', () => {sendToPython();
});btn.dispatchEvent(new Event('click'));

接下来,打开index.html文件并按如下所示进行更新:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Calling Python from Electron!</title>
</head><body><h1>Simple Python Calculator!</h1><p>Input something like <code>1 + 1</code>.</p><input id="input" value="1 + 1"></input><input id="btn" type="button" value="Send to Python!"></input></br>Got <span id="result"></span><script src="./renderer.js"></script></body>
</html>

使用python-shell

在了解了如何使用child_process在Electron和Python之间进行通信之后,现在让我们看看如何使用python-shell。

python-shell 是一个npm软件包,它提供了一种从Node.js运行Python脚本的简便方法,并具有基本且有效的进程间通信和错误处理。

您可以将python-shell用于:

  • 生成Python脚本
  • 在文本、JSON和二进制模式之间切换
  • 通过stdin和stdout流进行数据传输
  • 在发生错误的情况下获取堆栈跟踪

转到终端,然后运行以下命令从npm 安装python-shell:

$ npm install --save python-shell

在撰写本文时,python-shell v1.0.8已安装在我们的项目中。

接下来,打开renderer.js文件并按如下所示更新sendToPython()函数:

function sendToPython() {var { PythonShell } = require('python-shell');let options = {mode: 'text',args: [input.value]};PythonShell.run('./py/calc.py', options, function (err, results) {if (err) throw err;// results is an array consisting of messages collected during executionconsole.log('results: ', results);result.textContent = results[0];});
}

使用客户端-服务器通信

现在让我们看看使用HTTP服务器在Python和Electron之间实现通信的另一种方法。

回到终端并运行以下命令来安装Flask和Flask-Cors:

$ pip install flask
$ pip install Flask-Cors

接下来,在您项目的py文件夹中,创建一个server.py文件,并添加以下代码以运行Flask服务器,该服务器仅执行计算并将结果作为HTTP响应返回:

import sys
from flask import Flask
from flask_cors import cross_origin
from calculator.simple import SimpleCalculatordef calcOp(text):"""based on the input text, return the operation result"""try:c = SimpleCalculator()c.run(text)return c.log[-1]except Exception as e:print(e)return 0.0app = Flask(__name__)@app.route("/<input>")
@cross_origin()
def calc(input):    return calcOp(input)if __name__ == "__main__":app.run(host='127.0.0.1', port=5001)

接下来,打开renderer.js文件,并添加以下代码以生成Python并运行server.py文件:

let input = document.querySelector('#input')
let result = document.querySelector('#result')
let btn = document.querySelector('#btn')function sendToPython() {var { PythonShell } = require('python-shell');let options = {mode: 'text'};PythonShell.run('./py/server.py', options, function (err, results) {if (err) throw err;// results is an array consisting of messages collected during executionconsole.log('response: ', results);});
}function onclick(){fetch(`http://127.0.0.1:5001/${input.value}`).then((data)=>{      return data.text();}).then((text)=>{console.log("data: ", text);result.textContent = text;}).catch(e=>{console.log(e);})
}
sendToPython();btn.addEventListener('click', () => {onclick();
});btn.dispatchEvent(new Event('click'))

概括

在本教程中,我们已经为Python开发人员介绍了electronic,如果他们想使用基于HTML、CSS和JavaScript的现代网络技术为自己的Python应用程序构建GUI,那么这将是一个很好的工具。我们还看到了连接Python和electronic的不同方法,例如child_process,python-shell和HTTP(Flask)服务器。

连接Python 3和Electron/Node.JS:构建现代桌面应用程序相关推荐

  1. 用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld

    场景 Electron介绍 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js ...

  2. 使用Chatkit构建Node.js命令行聊天应用程序

    by Hugo 雨果 使用Chatkit构建Node.js命令行聊天应用程序 (Build a Node.js command-line chat application with Chatkit) ...

  3. react apollo_Apollo GraphQL:如何使用React和Node Js构建全栈应用

    react apollo Apollo Client is a complete state management library for JavaScript apps. It's a powerf ...

  4. 如何使用Node.js构建完整的GraphQL服务器

    by Jack R. Scott 杰克·R·斯科特(Jack R.Scott) 如何使用Node.js构建完整的GraphQL服务器 (How to build a full GraphQL serv ...

  5. react-emotion_如何使用Web Speech API和Node.js构建语音转Emotion Converter

    react-emotion Have you ever wondered - can we make Node.js check to see if what we say is positive o ...

  6. meetup_如何使用标准库和Node.js构建Meetup Slack机器人

    meetup by Janeth Ledezma 简妮丝·莱德兹玛(Janeth Ledezma) 如何使用标准库和Node.js构建Meetup Slack机器人 (How to build a M ...

  7. 构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用

    构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...

  8. node.js云学堂微信小程序学习系统的设计与实现毕业设计源码011735

    Node.js云学堂微信小程序 摘要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课 ...

  9. 用Node.js实现一个HTTP服务器程序(文件服务器)

    http Node.js开发的目的就是为了用JavaScript编写Web服务器程序.因为JavaScript实际上已经统治了浏览器端的脚本,其优势就是有世界上数量最多的前端开发人员.如果已经掌握了J ...

最新文章

  1. 如何删除linux的root权限,永久删除现代Linux的root权限
  2. 改善java程序的建议
  3. informatica 参数文件配置
  4. iOS个人中心渐变动画、微信对话框、标签选择器、自定义导航栏、短信验证输入框等源码...
  5. 俄罗斯“指尖旋风”席卷南京
  6. 微型计算机的三级存储体系是,简述存储系统的三级存储体系及分级的目的。
  7. cesh222/h2这到底是一个什么鬼cesces
  8. 关Jquery判断input type=checkbox元素是否被选中的判断
  9. 计算机的代表性产品,电脑展回顾 十款最具代表性存储产品
  10. Filter过滤器详解
  11. 一元二次方程解法的实现(Python)
  12. HTML常用标签(上)
  13. 花卉培育信息管理系统设计与实现
  14. [openwrt] [WIFI] 修改默认的SSID和密码
  15. python写出雷霆战机_利用Python自制雷霆战机小游戏,娱乐编程,快乐学习!
  16. 【web开发】利用User-Agent获取浏览器类型
  17. 学生信息管理系统——python版(附流程图)
  18. 【算法学习笔记】65. 双向扫描 SJTU OJ 1382 畅畅的牙签盒
  19. BWAPP靶场-HTML injection-Reflected(GET)
  20. C语言猜数字游戏实现

热门文章

  1. html ie 版本设置密码,如何给IE浏览器设置一个密码的详细图文步骤
  2. mysql配置修改记录_mysql设置修改时间,更新记录当前时间
  3. 华为商城抢手机软件_华为p40配置详细参数
  4. 可编辑PSD分层疫情防护宣传海报
  5. 设计灵感|文字排版海报有多少种可能?
  6. 电商风靡2020的C4D立体感海报设计,psd分层模板来了。
  7. mysql+存储过程+模式,Mysql(7)---存储过程
  8. C++ zip压缩库使用
  9. ISOLINUX: A bootloader for Linux using ISO 9660/El Torito CD-ROMs
  10. 稀疏内存模型sparsemem memory model | 文章