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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 使用towxml解析html流程及踩坑记录相关的知识,希望对你有一定的参考价值。

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 通过wx.login接口获取的登录凭证code可直接换取UnionIDOpenID,这么换取我会在下面告诉各位XDM。
  • 回收wx.getUserInfo接口可获取用户个人信息能力,就是说这个接口获取不到用户的授权信息了,但是这个接口获取加密后的openIDunionID数据的能力不做调整。
  • 1、下图就是这次接口调整以后wx.getUserInfo获取到的信息对比,并且以4月13日为版本调整分界时间点。
  • 2、改版后userInfo前端不可以直接获取到用户信息,只能拿到默认用户的昵称为微信用户灰色头像
  • 3、改版后前端传给服务端的encryptedData加密数据,服务端解密以后也是不能拿到用户的信息了,只能拿到默认用户的昵称为微信用户灰色头像以及OpenIDUnionID

    【一句话总结: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进行解密,我艹,OpenIDUnionID是不是真的解密获取不到了,直接就是个null,蒙圈吧,脑袋嗡嗡的。

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

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

  • 如果只是获取OpenIDUnionID不获取用户的信息前端还是可以继续使用wx.getUserInfo的。
  • 如果想要获取用户的信息那前端就要使用wx.getUserProfile。服务端拿到encryptedData解析的时候只能获得用户信息,但是获取不到OpenIDUnionID
  • 如果想要获取用户的信息AND获取到OpenIDUnionID,那就要通过使用wx.getUserProfile获取用户信息以及通过前端的 wx.login 接口获得临时登录凭证code传到服务端调用auth.code2Session换取到OpenIDUnionID。下图就是换取到的数据。

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

七、授之以渔

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

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

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

以上是关于微信小程序 使用towxml解析html流程及踩坑记录的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序支持Markdown教程

微信小程序wxml-to-canvas使用完整流程以及踩坑记录

uniapp markdown最佳渲染方案

微信小程序富文本解析器rich-textweb-viewwxParsemp-htmltowxml对比

重磅推荐:可将 HTML 和 Markdown 一键转换为微信小程序 WXML 的库

Netty ChunkedStream 实现文件下载的流程及踩坑记录