python做界面的一个新思路（初始篇）

python做界面我首先想到的是pyqt5，但是笔者之前基本是用wpf做界面，再用其他的做界面都有点不畅快的感觉。直接用到了HTML + CSS + js。随着前端技术的快速发展，如VUE，AUI这类框架的兴起，做个炫酷的页面，远比后端做个界面要快捷方便的多。

但是HTML + CSS + js是运行在浏览器里的，这个系列文章就是要打破python和前端的壁垒，让它们樱巧谨携手打造桌面程序。

那么这个心思路就是，利用pyqt5的QtWebEngineWidgets和QtWebChannel来做媒介，

python完成后台功能，HTML + CSS + js完成全部的界面功能。

界面需要python功能时，js方便的调用python函数并获取返回值。这样各自完成擅长部分，想想都有点小激动呢。

那这样是否靠谱呢？

根据笔者的目前尝试，感觉还是很靠谱的：

1 运行不卡顿，相对于纯的pyqt我感觉这种界面运行起来更流畅。

2 QtWebEngineWidgets移植V8引擎，基本和谷歌的效果是一样的。Vue这样的框架也可以直接引用。

讲宽扮QtWebEngineWidgets的文章有很多，我学习这个时候看到网上的很多文章也和受益，但是，基本都是讲的一样的，没有深挖。

首先，QtWebEngineWidgets和QtWebChannel是可以实现双向交互的，但是，在应用的过程中我发现，python调用js会比较简单，有现成的语法可用，而且传输过程中有的数据的类型都不用转换。而且能获取到js的返回值。

而js调用python就复杂一点，传递类型也只能字符串和int（目前我测试的结果是这脊基样），目前网上大多的例子就是基于共享属性这个概念，js是可以调用python函数，但是没法获取到返回值。

但是应用中你就会发现，基本都是js调用python，比如界面中的按钮点击后需要执行数据分析，然后将结果渲染在界面上。那么过程就是js调用py并获取返回值。

今天的内容就是这些，喜欢的可以点赞支持，如果点赞较多，关于这个知识点我将继续做一期有趣的内容。谢谢！

官网下载Python3，LZ的配置环境是Python3.6，PyCharm 2017.2.1

File->Settings->Tools->External Tools，点击+好配置好即可，LZ已经配置好了，刚开始是没有的

Program里面填designer.exe的位置，Working directory里面点击右面的Insert按钮，插入和悔枣侍图片一样的值即可

Program里面填python.exe的安装目录，Parameters里面填如下内容

Working directory点击右面Insert按钮插岩袭入相同内容即可

兴建一个项目，右键点击项目->External Tools->QtDesigner，d出QtDesigner的图形界面如下，LZ拖入了2个按钮

这时你会发现多了一个untiled.ui文件，文件名LZ用的是默认的，右键点击这个ui文件->External Tools->PyUIC，这时文件夹下多了一个untitled.py文件，打开untitled.py，加入以下内容Ctrl+Shift+F10运行即可

untitled.py

运行结果

LZ用的是pyinstaller，pyinstaller不支持Python3.6，无奈又下载了一个Python3.5的环境，运行和打包在Python3.5下，工具用的是Python3.6下的，也不影响已经配置好的工具的使用，命令行中输入一下即可

在命令行中进入要打包的py文件所在的目录，输入一下命令

然后到py文件所在目录的dist文件中，打开exe，结果一闪而退，原来是找不到外部的动态链接库，输入一下命令，指明外部链接库

-F的效果是打包成一个单文件，-w的效果是取消控制台。

这个是我开发的，将doc文件批量转为碧吵docx的小工具，源码放在github上，大家可以参考

https://github.com/erlieStar/doc2docx

欢迎star

PyQt，一个基于Qt的Python接口包，可以直接使用Qt的控件薯轿茄，还可以使用QSS进行界面美化，下面我简单介绍一下这个包的安装和使用，实验环境Win7+Python3.6+PyCharm5.0，主要内容如下：

1.首先数察，安装PyQt，这个直接在cmd窗口输入命令“pip install pyqt5”就行，如下，由于安装包比较大，所以需要等待一会儿：

这里我新建了一个简单的窗口程序，一个登录页面对话框，2个QLabel，2个QLineEdit和2个QPushButton，如下，设计完成后，可以直接编辑对应控件的styleSheet属性，利用QSS（类似CSS）对控件进行美化，也可以在代码中进行详细美化设计（如果美化比较复杂的话，可以专门编写QSS文帆腊件，然后在程序中加载就行）：

这里我新建了一个简单的窗口程序，一个登录页面对话框，2个QLabel，2个QLineEdit和2个QPushButton，如下，设计完成后，可以直接编辑对应控件的styleSheet属性，利用QSS（类似CSS）对控件进行美化，也可以在代码中进行详细美化设计（如果美化比较复杂的话，可以专门编写QSS文件，然后在程序中加载就行）：

设计完成的UI界面，可以直接使用自带转化工具pyuic5转化为Python程序（命令pyuic5 -o py文件 ui文件，如pyuic5 -o test.py test.ui），如下，就是刚才设计的UI界面的Python代码：

这里我们再添加一下main函数，直接创建上面类的对象，显示对话框就行，如下：

点击运行这个程序，效果如下，和上面设计的一样，非常方便：

---