使用EasyWeChat下发模板消息，电脑端显示正常的字体颜色，但是手机上却没有显示颜色，这个问题困扰了我好一段时间，我甚至认为是微信升级，取消了颜色的显示。知道最近，认真看了文档后，才找到了原因，这里做一下简单分享。
首先，复现一下过程，使用的版本和代码信息。
一、问题复现
文档版本：EasyWeChat 5.x
文档链接：https://easywechat.com/5.x/official-account/template_message.html#发送模板消息
文档代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$app->template_message->send([ 'touser' => 'user-openid', 'template_id' => 'template-id', 'url' => 'https://easywechat.org', 'miniprogram' => [ 'appid' => 'xxxxxxx', 'pagepath' => 'pages/xxx', ], 'data' => [ 'key1' => 'VALUE', 'key2' => 'VALUE2', ... ], ]); |
照葫芦画瓢，我最开始代码是这样的：
发送后，PC上是这样显示的：
看起来非常正常，但其实不然，手机上却没有显示颜色：
“并没有正确显示颜色”。
二、查找原因
这样的问题，我首先想到的是微信的调整导致的，但是找遍了更新记录，没有提过这个事情，有一篇比较接近的问题，则是问为什么first不显示颜色，官方回答是部分模板消息无法正常显示颜色，是正常的。这个问题的链接是：https://developers.weixin.qq.com/community/minihome/doc/000cec949c4c500c42fcb797c56400
此时，再看看微信公众号开发文档模板消息的说明。
给到的实例代码是这样的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "touser":"OPENID", "template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY", "url":"http://weixin.qq.com/download", "miniprogram":{ "appid":"xiaochengxuappid12345", "pagepath":"index?foo=bar" }, "data":{ "first": { "value":"恭喜你购买成功！", "color":"#173177" }, "keyword1":{ "value":"巧克力", "color":"#173177" }, "keyword2": { "value":"39.8元", "color":"#173177" }, "keyword3": { "value":"2014年9月22日", "color":"#173177" }, "remark":{ "value":"欢迎再次购买！", "color":"#173177" } } } |
三、模板消息不显示颜色的原因
事实上，在互联网上兜兜转转了一圈，都没有找到真正的原因，不应该啊。
甚至有一个说原因是使用单引号造成的，但我又不是引用变量，单双引号不至于会对数据产生影响，这个回答的链接是：https://segmentfault.com/q/1010000014030690
回过头想想，再认真看看手机收到的消息，我发现了问题的真实原因，还是上面那张图：
注意，【回复内容】的这里，其实是有颜色的，也就是说，手机端确实显示了颜色，但是并没有完全显示，肯定是哪里出了问题。
可以肯定的是，first确实没有颜色，而其余几个为什么有能显示有不能显示的呢？
和我们的颜色十六进制代码的写法有关！
新的代码是这样写：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$user = \app\index\model\User::where('id',input('id'))->find(); $parmas = input(); $userId= $user['id']; // dump($userId);die; $touser= $user['openid']; $template_id=$parmas['template_id']; if($template_id=='vnRSmUyfbI7d86OA11FO8eTQvNovhM1JiR62rn2girg'){ /* {{first.DATA}} 咨询内容：{{keyword1.DATA}} 回复内容：{{keyword2.DATA}} {{remark.DATA}} */ $url='http://hr.fescogz.com/index/wxservice/user_center.html'; $data=array( 'first'=>[$parmas['first'], "#FF3333"], 'keyword1'=>[$parmas['keyword1'], "#FF3333"], 'keyword2'=>["value"=>$parmas['keyword2'],'color'=>'#00FF00'], 'remark'=>[$parmas['remark'],"#FF3333"] ); session('message_data',$data); $tongzhi = action('index/message/wx_message',[$touser,$template_id,$url,$data]); |
手机上很快就能正确的显示颜色：
问题的原因是，应该按照微信公众号开发文档的写法，完整的写出颜色的十六进制代码，而不是像EasyWeChat文档中进行缩写，在不同设备间，缩写可能会导致无法正确渲染。
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/11012
微信扫一扫 
支付宝扫一扫 
