第一句子网 > 微信公众号开发--图文消息发送不显示图片的问题

微信公众号开发--图文消息发送不显示图片的问题

时间：2022-08-15 09:53:06

使用微信公众号接口实现图文消息推送，遇到问题，不显示图片，且content内容中有英文双引号也不行

1、微信不允许有外链的图片，所以会自动过滤

2、"双引号格式问题。

前端把双引号传给后端后，后端接收组json的时候把转义\" 给去掉了\，所以出了问题。这个小问题困扰了好久，自己用postman测试了一遍才找到了问题所在。

再此记录一下微信公众号推送图文消息的流程

微信公众号开发--实现图文消息发送解决方案

要实现的效果如下图：

在公众平台网站上，为订阅号提供了每天一条的群发权限，为服务号提供每月（自然月）4条的群发权限。而对于某些具备开发能力的公众号运营者，可以通过高级群发接口，实现更灵活的群发能力。

由于群发的次数非常有限。测试的时候可以以预览的方式发送给自己。测试时，最好先用postman测试一遍接口流程。开发者可以申请一个微信公众帐号测试号，进行部分接口的开发测试。微信公众号开发文档里有详细介绍和申请入口。

群发图文消息的过程

根据接口获取access_token预先将图文消息中需要用到的图片，使用上传图文消息内图片接口，上传成功并获得图片 URL；上传图文消息素材，需要用到图片时，请使用上一步获取的图片 URL；

在一张图系统中，编辑图文的文本框选择wangEditor富文本编辑器，需要把第2部上传的图片url插入到文本中。上传的content 内容是html格式的。

注意：content 中双引号传给后端的时候加了\转义，但是.net后端程序接收以后就把这个\去掉了，导致内容传到微信的时候，内容中出现双引号的，之后的部分图片和文字就都不显示了，所以需要后端处理一下这个问题。这个坑踩的耗费了很长时间。

使用对用户标签的群发，或对 OpenID 列表的群发，将图文消息群发出去，群发时微信会进行原创校验，并返回群发操作结果；

调用接口

一、获取access_token

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。公众号和小程序均可以使用AppID和AppSecret调用本接口来获取access_token。

二、上传图文消息内的图片获取URL【订阅号与服务号认证后均可用】

请注意，图文消息内容中，将过滤外部的图片链接，开发者要通过下述接口上传图片得到url，放到图文内容中使用。图片仅支持jpg/png格式，大小必须在1MB以下。

调用接口（请求方式: POST）https://api./cgi-bin/media/uploadimg?access_token=ACCESS_TOKEN

上传图片是在wangEditor 上传图片的时候调用的，先把图片信息传给后端接口，后端接口再去调用微信接口上传图片

editor.config.customUploadImg = function(resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法 var imageFile = resultFiles[0]; //获取文件域中选中的图片var reader = new FileReader(); //实例化文件读取对象reader.readAsDataURL(imageFile); //将文件读取为 DataURL,也就是base64编码reader.onload = function(ev) { //文件读取成功完成时触发var dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码var arr = dataURL.split(","); //截取base64编码，去掉图头dataURL = arr[1];var field = { picture: dataURL }request.go('/infoCenter/UploadWeChatTextPic', //后端接口，由后端接口上传正文图到微信公众号存储'post',field,function(res) {layer.msg(res.message, { time: 1000 });imgUrl = res.data.url;wximage = res.data.url;var formData = new FormData();formData.append("files", resultFiles[0]);formData.append("app_key", layui.setter.app_key);request.upLoadPic('/open-service/photo', //调用本地接口，将图片存到本地服务器'post',formData,function(res) {layer.msg(res.message, { time: 1000 });imgUrl = res.data;// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(imgUrl[0]);image = imgUrl[0];imageList.push({ image: image, imageWeChat: wximage });})})}}

三、上传图文消息素材【订阅号与服务号认证后均可用】

将第2步中得到的图片url插入到文章中，然后调用上传图文消息素材接口，上传得到media_id

调用接口（请求方式: POST）

https://api./cgi-bin/media/uploadnews?access_token=ACCESS_TOKEN

四、使用对用户标签的群发，或对 OpenID 列表的群发，将图文消息群发出去，群发时微信会进行原创校验，并返回群发操作结果；