关于微信网页版

微信⽹页版接⼝详解本系列会讲述微信机器⼈技术的实现，第⼀讲主要了解微信⽹页版给我们提供的http接⼝，这⼀步是做⼀个基于微信⽹页版机器⼈的基础和难点。

本讲将微信⽹页版的主要接⼝罗列出，并给出了⼊参和返回值的含义和⽤法。

⼀些不常⽤的接⼝后续会逐渐补充，也欢迎⼤家与我交流。

后⾯⼏讲将会在代码中探讨微信机器⼈的设计思路，欢迎⼤家持续关注。

⼀、⽹页版微信提供的HTTP接⼝1、获取uuid说明：⽤于获取显⽰⼆维码以及登录所需的uuid，标识获取⼆维码和扫码的为同⼀个⽤户请求⽅式：GET地址：get参数：参数⽰例值说明appid wx782c26e4c19acffb固定值fun new固定值lang zh_CN表⽰中⽂字符集返回：window.QRLogin.code = 200; window.QRLogin.uuid = "wb7R2kx9dA==";2、显⽰⼆维码说明：展⽰⼀张⽤于登陆的⼆维码图⽚，地址⾥的{uuid}传第⼀步所获取的uuid请求⽅式：GET地址：get参数：参数⽰例值说明t webwx固定值返回：⼆维码的⼆进制流，浏览器打开会直接显⽰⼀张⼆维码图⽚3、轮询登录说明：尝试登录。

若此时⽤户⼿机已完成扫码并点击登录，则返回⼀个真正⽤于登录的url地址。

否则接⼝⼤概10s后返回未扫码或未登录的状态码请求⽅式：GET地址：get参数：参数⽰例值说明tip11：未扫描 0：⼀扫描uuid wb7R2kx9dA==第⼀步所获取的uuid返回：redirect_uri的值可以直接⽤于下⼀步的“登录并获取公参”请求window.code=200（408为未扫码，201为已扫码但未点击登录，200为成功登录）;window.redirect_uri="https:///cgi-bin/mmwebwx-bin/webwxnewloginpage?ticket=AfrMMbhsnElmA7xc1R9CWUq-@qrticket_0&uuid=4ZnG7WZ0Cg= 4、登录并获取公参说明：访问后可获取⼀组公参，⽤于之后访问所有的接⼝。

总是对着手机看微信是不是觉得屏幕太小不是特别方便,打字速度是不是也顿时觉得慢了许多,所以偶尔体验一下微信网页版的感觉还是很不错的。

那么现在我就给大家讲一下微信登陆网页版的两种方式吧!
第一种:直接网页登陆
进入个人微信手机页面,点击进入底部菜单的“我”——设置——通用——微信网页版,这样会看到这样一个界面(如图)
在电脑浏览器里面输入网址,然后开始扫描网页上的二维码
扫描结束后,在手机端会提示你是否确认登陆微信网页版,点击确认就可以了。

接下来就是你所看到的的微信网页版了。

第二种方式:下载网页客户端登陆
直接在搜索引擎中输入“微信网页版客户端下载”,看到官方字样点击下载。

进去之后点击微信客户端下载
打开微信网页版客户端,就会出现和第一种方法一样的二维码页面,用户打开微信发现——扫一扫就可以了,接下来的步骤就是确认登陆微信版。

其实最后的结果页面和第一种方式登录一样的,只不过会更加清爽一点,而且网页版的不需要下载客户端,给电脑也适当减压了,当然还有一点非常重要的是,网页版微信还是很少用到的。

wechat⽹页版通信全过程想要记录总结⼀下⾃⼰在这个⼩项⽬中所遇到的坑，以及解决问题的思路。

⾸先我觉得这个⼩项⽬挺有实际市场的，市场上有⼀定的需求量，这个就是驱动⼒吧。

这个⼩项⽬的关键点是wechat⽹页版通信全过程，讲真挺繁琐的。

chrome⾃带的抓包，简直不要太好⽤。

说⼀说最主要的两个post请求，⼀个是⼼跳包，检测是否有消息到达，⼀个是账单消息到达后的账单信息提取。

其他所有的预备操作仅仅是为了获取sid，uin，pass_ticket，skey和key-value值，说起这个就头⼤，微信的通信流程还真是复杂，我⼤⽀付宝⾄少还有公开的接⼝，微信全靠google。

难点：⼀：post请求返回空数据，这是我整个项⽬中遇到最常见的问题，原因则是发起请求参数不对，其中domainName是不唯⼀的，浏览器三巨头，headers，host，refer。

⼆：post请求data为json数据，这个也是和⼀般爬⾍项⽬有所不同的地⽅。

三：账单信息乱码问题，返回的json数据⼀部分是正常，但凡是在content内容中的中⽂则出现了乱码情况，很明显是因为编码问题，返回的req.text⽆论如何使⽤decode或是encode都失败了，最后看到已有前⼈，req.content.decode("utf-8")完美解决了这个问题。

四：⽂本⽣成语⾳这部分就真的是条条⼤路通罗马了，可以调⽤系统的语⾳来⽣成语⾳播报，但是语速很感⼈太快了，调⽤第三⽅接⼝（我使⽤的是百度的语⾳合成接⼝）⽣成MP3⽂件，playsound读取MP3⽂件，但是⼜⼀个bug，playsound读取后未将⾳频⽂件关闭。

整个流程基本如下(⽆论是监控微信账单或是收发消息)：1、获取会话UUID微信Web版本不使⽤⽤户名和密码登录，⽽是采⽤扫描⼆维码登录，所以服务器需要⾸先分配⼀个唯⼀的会话ID，⽤来标识当前的⼀次登录。

其中，时间戳这个值是当前距离林威治标准时间的毫秒。

(点击下图可直接进行访问)在信息化社会，面对老年人的“数字困境”，需要年轻人来帮助父母和祖父母辈，进行“文化反哺”语音聊天、视频通话、转发分享、点赞收藏……在社交软件上，年轻人信手拈来的操作，对家里的老年人而言可能会非常复杂。

不久前，浙江杭州一个女孩为外婆手绘了一份“微信使用说明书”，字迹工整、内容详细、图文并茂，打动了很多网友，也将老年人如何更好适应数字生活的话题，再次带进公众视野。

如今，得益于数字化、信息化的发展，智能生活加速推进，为人们带来更多便利。

然而，一些老年人对此却感到力不从心。

在火车站，电子客票的推广极大节省了旅客出行的时间，却也给不会网上购票的老人增加了难度;在医院，预约挂号有助于就医问诊秩序井然，但一筹莫展的老人不得不站在挂号机前寻求导医帮助;在餐厅，扫码点餐、移动支付方便又卫生，而还在使用老年机的人就会无所适从。

对上了年纪的人来说，看似微不足道的生活细节，也有可能构成一道数字鸿沟，造成日常生活的不便。

新冠肺炎疫情防控期间，因为老年人没有健康码导致无法出入小区、乘坐公交的新闻，一度引起社会关注。

数字时代，不能落下那些年迈的身影。

据统计，截至今年6月，在超过9亿的网民中，60岁及以上人群占比为10.3%。

让老年人口更好分享信息化时代的发展红利，需要以更多的耐心帮助他们，让他们更加顺畅地拥抱智能生活。

如果说传统的教育模式是从父母一代到子女一代的知识传递，那么在信息化社会，面对老年人的“数字困境”，需要年轻人来帮助父母和祖父母辈，进行“文化反哺”。

比如，在浙江嘉兴图书馆，有一门专门课程，教授如何开关手机、怎么联网、怎样使用相机等“常规操作”。

2019年，8名馆员共组织了159场讲座，吸引了60岁到89岁的众多老人参与。

这是一堂关于生活的课程，也体现了信息化时代的人文关怀。

对一些互联网平台来说，要针对老年人的需求提供替代选择，构建更具包容性的智慧老龄社会新形态。

有专家建议，除了在技术开发中更加注重老年人需求和习惯外，在公共政策制定和公共服务方面，也要给老年人提供多元选择和替代方案。

微信⽹页版扫⼀扫登录记得第⼀次做这个的时候看⽂档看的⼀篇茫然，不知怎么下⼿。

其实根本不需要想那么多，先将代码敲起来，⼀步步梳理没有完不成的。

⽹上相关的互相copy的实例有很多。

最后其实发现跟着微信的公众平台开发者⽂档⼀步步来就⾏了;当然⾸先开发者需要先到公众平台官⽹中的开发者中⼼页配置授权回调域名，不然就没有下⽂了。

我是根据公司的正义猫公众号(推销⼀波[嘿嘿嘿])来开发的。

授权回调域名配置规范为全域名;好了重点说下具体步骤(附上官⽅步骤):对于第⼀步其实就是⼀个链接:"https:///connect/qrconnect?appid="+WeiXinAppId+ "&redirect_uri="+WX_CALLBACK_URL+ "&response_type=code&scope=snsapi_login&state=***#wechat_redirect"以上需要两个参数:WeiXinAppId就是公司正义猫公众号(继续推销[阴险脸.jpg])的appID，还有就是WX_CALLBACK_URL顾名思义就是回调地址了，这个你⾃⼰来定义回调地址的，你想回调到⾃⼰配置的controller层的哪个接⼝就是哪个，由你掌控开⼼就好。

还是不懂就例如附上我的接⼝:@Hitlog@RequestMapping(value = "/weixin/callback", method = RequestMethod.GET)public String weixinCallback(HttpServletRequest request, HttpServletResponse response, Model model,@RequestParam(value = "state", defaultValue = "") String state,@RequestParam(value = "code", defaultValue = "") String code) {WxUser wxUser = oAuthService.loginByWeiXin(code);if (wxUser == null) {// 登录失败model.addAttribute("status", "fail");model.addAttribute("message", "授权登⼊失败");return "oauth/register";}UserOAuth uo = oAuthService.getWechatUserOAuthByOpenId(wxUser.getOpenId());if (uo == null) {model.addAttribute("status", "success");model.addAttribute("message", "⽤户请注册");model.addAttribute("username", wxUser.getNickname());model.addAttribute("avatar", wxUser.getHeadImgUrl());model.addAttribute("userOAuthType", UserOAuth.TYPE_WECAHT);model.addAttribute("accessToken", wxUser.getAccessToken());model.addAttribute("openId", wxUser.getOpenId());return "oauth/register";}else{oAuthService.updateWechatAccessToken(uo.getUserId(), wxUser.getAccessToken());User u = userService.getUserById(uo.getUserId());if (u != null) {doLogin(u.getId(), request, response);model.addAttribute("status", "success");model.addAttribute("message", "登录成功");return "oauth/register";}}return "oauth/register";}这⾥你可以获得两个参数state和code，重点是code，你可以根据code后端再去发送请求获取accesstoken。

网页版微信实现原理
网页版微信实现原理是通过将微信移植到网页平台上。

具体实现步骤如下：
1. 登录验证：用户在网页上输入微信账号和密码，网页版微信将此信息发送至微信服务器进行验证，验证通过后获取用户的登录凭证。

2. 建立WebSocket连接：通过WebSocket协议，网页版微信与微信服务器之间建立通信连接。

这种实时双向的连接方式可以实现消息的即时推送。

3. 消息同步：网页版微信在登录后会向微信服务器获取用户的消息列表，并进行消息同步，将最新的消息状态和内容获取并展示在网页上。

4. 消息发送与接收：用户在网页上可以发送消息，网页版微信将消息发送至微信服务器，然后再将其转发给对应的接收方。

同样地，当有消息发送给用户时，网页版微信会通过WebSocket接收到消息，并在网页上进行展示。

5. 媒体文件的传输：网页版微信支持发送图片、视频、语音等多种媒体文件。

当用户发送媒体文件时，网页版微信会先将文件上传至微信服务器，然后再将文件链接发送给接收方。

接收方可以通过链接下载媒体文件。

6. 联系人管理：网页版微信可以显示用户的联系人列表，并支
持添加和删除联系人。

与手机版微信同步，用户可以通过网页版微信与联系人进行聊天。

总之，网页版微信通过在网页上模拟手机端微信的功能和界面，利用WebSocket实时通信机制与微信服务器进行数据交互，
从而实现了在网页上使用微信的功能。