微信公众号下发模板消息,电脑显示正常,手机没有显示字体颜色原因

使用EasyWeChat下发模板消息,电脑端显示正常的字体颜色,但是手机上却没有显示颜色,这个问题困扰了我好一段时间,我甚至认为是微信升级,取消了颜色的显示。知道最近,认真看了文档后,才找到了原因,这里做一下简单分享。

首先,复现一下过程,使用的版本和代码信息。

一、问题复现

文档版本:EasyWeChat 5.x

文档链接:https://easywechat.com/5.x/official-account/template_message.html#发送模板消息

文档代码:

照葫芦画瓢,我最开始代码是这样的:

微信公众号下发模板消息,电脑显示正常,手机没有显示字体颜色原因

发送后,PC上是这样显示的:

微信公众号下发模板消息,电脑显示正常,手机没有显示字体颜色原因

看起来非常正常,但其实不然,手机上却没有显示颜色:

微信公众号下发模板消息,电脑显示正常,手机没有显示字体颜色原因

“并没有正确显示颜色”。

二、查找原因

这样的问题,我首先想到的是微信的调整导致的,但是找遍了更新记录,没有提过这个事情,有一篇比较接近的问题,则是问为什么first不显示颜色,官方回答是部分模板消息无法正常显示颜色,是正常的。这个问题的链接是:https://developers.weixin.qq.com/community/minihome/doc/000cec949c4c500c42fcb797c56400

此时,再看看微信公众号开发文档模板消息的说明。

给到的实例代码是这样的:

三、模板消息不显示颜色的原因

事实上,在互联网上兜兜转转了一圈,都没有找到真正的原因,不应该啊。

甚至有一个说原因是使用单引号造成的,但我又不是引用变量,单双引号不至于会对数据产生影响,这个回答的链接是:https://segmentfault.com/q/1010000014030690

回过头想想,再认真看看手机收到的消息,我发现了问题的真实原因,还是上面那张图:

微信公众号下发模板消息,电脑显示正常,手机没有显示字体颜色原因

注意,【回复内容】的这里,其实是有颜色的,也就是说,手机端确实显示了颜色,但是并没有完全显示,肯定是哪里出了问题。

可以肯定的是,first确实没有颜色,而其余几个为什么有能显示有不能显示的呢?

和我们的颜色十六进制代码的写法有关!

前端开发中常用的CSS颜色对照 CSS颜色代码大全2022版

新的代码是这样写:

手机上很快就能正确的显示颜色:

微信公众号下发模板消息,电脑显示正常,手机没有显示字体颜色原因

问题的原因是,应该按照微信公众号开发文档的写法,完整的写出颜色的十六进制代码,而不是像EasyWeChat文档中进行缩写,在不同设备间,缩写可能会导致无法正确渲染。

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/11012

(0)
上一篇 2022年5月7日 上午9:45
下一篇 2022年5月13日 下午5:03

发表评论

登录后才能评论