@
新闻:2024年10月,微信4.0版本采用了Qt + C++的跨平台架构,取代了旧版的WebView + JavaScript架构。
一.前言
今天给大家分享我使用PyQt5复刻的微信界面,本篇为半成品,做了部分功能,仍有技术苦难未突破。

二.展示
1.服务端
拿到代码的朋友请先启动服务端server.py,我们的聊天服务默认开启在本机,地址是127.0.0.1,端口是12345端口,这个服务端是有GUI的,能够实时显示所有服务端接收到的日志,每一条日志都有具体的日期时间打印,很方便我们开发者调试程序。
所有用户登录到系统都先会连接到本服务端,所有消息都会经过服务端。

2.客户端
客户端分为登录注册页面以及主界面
1.注册
首先是注册页面,我们的注册页面很简约,就是边框为圆角的窗口,用户可以输入自定义的用户名和密码,注册成功后数据将写入本地的sqlite3数据库里,密码都是经过加密处理的,具体来说是用户提交注册信息到写入数据之前有一个对密码的处理,使用了sha256+盐的方式保证只有用户才知道自己的密码,大大提升了密码和数据库数据的安全性!

2.登录
登录界面顾名思义,用户使用自己的登录信息进行登录操作,后端使用加密的密码进行验证,验证通过后方可进入到软件的主页面使用正式功能,登录是必经之路。

3.主界面
下图为本软件的主界面,我们本次完全模仿微信的UI风格,但是具体有功能的位置只有聊天区域,其他位置大家可以自行拓展,本软件的可拓展性还是很强的,下图的数据都是测试数据。

4.主界面-发表情
我们设计了个性化的表情组件,有将近100个表情可以选择,交互逻辑也模仿了微信的效果

5.主界面-发文件
一款聊天软件最基本的当然是发送文字消息,本次模仿了发文件的操作,具体来说是用户可以在聊天窗口区域点击“文件”按钮,选择本地文件,选择好了之后会弹出发送前确认的窗口,窗口中包含目标用户的头像、昵称以及文件的类型、文件名、文件大小,还能给用户留言~

6.主界面-个性名片
用户可以在聊天区域点击对方的弄成或者备注查看TA的名片,名片中能看到对方的微信号、以及对方设置的地区。

7.主界面-截图功能
用户点击界面上的截图按钮就可以进行截图了,截图完成后图片会自动放到输入框中。

8.个性化的托盘菜单
为了方便用户操作,本次设计了个性化的托盘菜单,风格样式简约。

三.心得体会
1.加密存储密码
使用SHA-256加盐存储密码的好处如下:
- 增强安全性
防止彩虹表攻击:加盐使每个密码的哈希值唯一,即使多个用户使用相同密码,哈希值也不同,增加了破解难度。
增加复杂度:盐值增加了密码的随机性,进一步提升了安全性。
-
唯一性
唯一哈希值:即使密码相同,不同盐值也会生成不同的哈希值,防止攻击者通过对比哈希值推断密码。 -
防止预计算攻击
增加计算成本:攻击者无法预先计算常见密码的哈希值,必须为每个盐值单独计算,提高了攻击难度。 -
提高密码存储安全性
保护弱密码:即使用户使用弱密码,加盐也能增加破解难度,提升整体安全性。 -
符合安全最佳实践
行业标准:加盐哈希是密码存储的推荐方法,符合安全最佳实践。 -
防止密码重用攻击
降低风险:即使用户在不同系统使用相同密码,加盐也能确保哈希值不同,减少密码重用带来的风险。 -
提高整体系统安全性
增强防御:加盐哈希增加了攻击者破解密码的难度,提升了系统的整体安全性。
2.UI设计
本次UI设计采用QT设计师+手写代码的方式,给大家贴一张软件主界面设计图
其实笔者只是设计了个基本框架样式,把主要的布局和简单的颜色样式进行了设计,设计师是无法实现自定义的需求的,当然我们可以使用组件提升的方式动态的添加个性化的自定义组件到界面或布局里,QT设计师或许不是一个最佳实践,但是确实是小白进阶到大佬的必经之路!

最终效果见下图

3.技术难点
本次的微信项目为一个半成品,因为遇到了一些技术阻力,没能支撑笔者开发下去
1.客户端与服务端交互
2.服务端和客户端交互
界面中的聊天数据如何保证UI与数据同步
4.项目代码结构
整体代码行数有几千行。

四.总结
本次和大家分享了我复刻微信做的界面效果,用截图的方式展示了每一个工作细节,希望大家支持!

浙公网安备 33010602011771号