微信小程序 使用towxml解析html流程及踩坑记录

Posted 2023-04-17

参考技术A         towxml相对于wxParse还是有一定优势的，首先一些废弃或者过新的标签wxParse是不能解析的，会导致整个页面不能显示，其次 towxml对于界面的排版优化是比较美观的，对于开发者还算比较友好，个人是建议在wxParse没有完善之前使用towxml这个库来解析html以及markdown格式。

我这里使用的是绝对路径，各位同学根据自己的存放路径修改

这里模板名称固定，data固定写法为...解析后的变量名

记录一次微信小程序getUserProfile的踩坑经历

一、新注册的微信用户怎么昵称都变成了微信用户了？

最近我们公司的运营小姐姐反馈说小程序新注册的用户的昵称都是微信用户，而且头像也都是一张灰色的头像。以前能拿到的省市区也都没了。并且质问我们是不是我们开发人员在憋什么大招，搞出了一个BUG。

之前前端一直使用的wx.getUserInfo方法获取到的encryptedData传给服务端是一直可以解析到用户信息的，最近发现新注册的用户都变成了微信用户，灰色头像。

查看微信官方文档发现原来微信对getUserInfo接口做了调整，以及新增了一个getUserProfile方法获取获取用户的信息。

二、wx.getUserInfo被微信官方阉割了🩴

小程序登录、用户信息相关接口调整说明【官方通知地址】

以下废话是我整理的此次调整说明的一些重点，你也可以直接去看官方通知。

很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。

原来是微信为了方便自己的小程序获取新的用户做了接口的调整.如下图

• 通过wx.login接口获取的登录凭证code可直接换取UnionID和OpenID,这么换取我会在下面告诉各位XDM。
• 回收wx.getUserInfo接口可获取用户个人信息能力,就是说这个接口获取不到用户的授权信息了,但是这个接口获取加密后的openID、unionID数据的能力不做调整。
  

• 1、下图就是这次接口调整以后wx.getUserInfo获取到的信息对比，并且以4月13日为版本调整分界时间点。
• 2、改版后userInfo前端不可以直接获取到用户信息，只能拿到默认用户的昵称为微信用户和灰色头像。
• 3、改版后前端传给服务端的encryptedData加密数据，服务端解密以后也是不能拿到用户的信息了，只能拿到默认用户的昵称为微信用户和灰色头像以及OpenID和UnionID。
  
  【一句话总结:wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。】

三、热乎乎的getUserProfile新增接口

获取用户信息新接口wx.getUserProfile【官方文档链接】

上图有官方给的重点重点

四、服务端解密getUserProfile获取到的encryptedData

import cn.binarywang.wx.miniapp.bean.WxMaUserInfo;
import cn.binarywang.wx.miniapp.util.crypt.WxMaCryptUtils;
@Test
public void test_dec()
      WxMaUserInfo wxMaUserInfo = WxMaUserInfo.fromJson(WxMaCryptUtils.decrypt("Zs63PfOBXjcS1DNNTt7KW4w==", "EJzGzfWh/8bmVc0eelCuugYH4Xa3DaHxJXrbBpfqcVgdTvsS2EuWCC0vot6OzUvqX/pZYxDWYeapEjmHmQnPzlEF/WRJNCMShqeJ9YpDovRYxDHhOtf3/IvSvC1F7ZrVwX1VcVsHeJ/Xww5a8sk0VSKVuDtR6McxKc2vhG4Prfti5J2CbvJ2RFO54gTgCdGIn/tgbaFzpZFD+bqyrsOV5+X48mXDYJbdb6wfKUa+K1zLb2xnLZOVXX3LuBEmPGustf46AmMwbVbba6fzntTy5lB40+KozzTNPS/jL+WzR/+7YG3uDw/lRsGfm4zZkCbmbwR5iwpma4jGUSGXPYs4nB7ed+txJ1nmHgXcEY+Xjl5Zb4mGQXvt+yoWZsvr0BNd9urrA/3BBALXwfNL2aQ6zGQGuu1WPeIpbE4Lr/ewgqyn1KNyQIj+AngC13L2vTsY0", "NGQ5urNw2xxZni+svY41n5Q=="));
      System.out.println(wxMaUserInfo);

如下图，【抓取解密的信息】这里对encryptedData进行解密，我艹，OpenID和UnionID是不是真的解密获取不到了，直接就是个null,蒙圈吧，脑袋嗡嗡的。

五、逛一圈微信开放社区发现哨兵

• 1、getUserProfile后解密没有openId了？
  

• 2、getUserProfile有iv和encryptedData参数 解密没有openid？
  

六、鱼和熊掌不可得兼【解决问题】

• 如果只是获取OpenID和UnionID不获取用户的信息前端还是可以继续使用wx.getUserInfo的。

• 如果想要获取用户的信息那前端就要使用wx.getUserProfile。服务端拿到encryptedData解析的时候只能获得用户信息，但是获取不到OpenID和UnionID。

• 如果想要获取用户的信息AND获取到OpenID和UnionID,那就要通过使用wx.getUserProfile获取用户信息以及通过前端的 wx.login 接口获得临时登录凭证code传到服务端调用auth.code2Session换取到OpenID和UnionID。下图就是换取到的数据。
  

【官方文档给的如何换取xxxID接口】

• 1、前端怎么获取code【官方文档】
• 2、服务端用code换取OpenID和UnionID【官方文档】
  
  前端通过上面的1获取到code，然后前端将获取到的code传到服务端，服务端可以根据code调用2中的auth.code2Session接口换取到OpenID和UnionID。

七、授之以渔

如果我们不需要用户的信息只需要OpenID和UnionID那么前端和服务端都不需要该什么接口。

如果只是想要用户的信息，前端需要使用新的接口wx.getUserProfile,服务端不需要改。

如果两者都要，前端要改成新的接口wx.getUserProfile，服务端获取用户信息解密不需要改动，但是服务端获取OpenID和UnionID要使用auth.code2Session接口根据code换取。