微信公众号开发 [03] 结合UEditor实现图文消息群发功能
0、写在前面的话
- 通过类似表单的形式,将文章各部分内容提交到后台,封装成一个实体类,并持久化到数据库中
- 需要推送的时候,将不同的文章选择取出交给后台,由后台组装成规范化的数据结构,调用微信的图文消息素材上传和群发接口
- 其中文章的主体部分,我们采用UEditor富文本编辑器
- asp.net微信开发第十篇----使用百度编辑器编辑图文消息,上传图片、微信视频
1、什么是图文消息
{ "articles": [{"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p","author":"xxx","title":"Happy Day","content_source_url":"www.qq.com","content":"content","digest":"digest","show_cover_pic":1},{"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p","author":"xxx","title":"Happy Day","content_source_url":"www.qq.com","content":"content","digest":"digest","show_cover_pic":0}]
}
{
"articles": [
{
"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
"author":"xxx",
"title":"Happy Day",
"content_source_url":"www.qq.com",
"content":"content",
"digest":"digest",
"show_cover_pic":1
},
{
"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
"author":"xxx",
"title":"Happy Day",
"content_source_url":"www.qq.com",
"content":"content",
"digest":"digest",
"show_cover_pic":0
}
]
}
参数 | 是否必须 | 说明 |
Articles | 是 | 图文消息,一个图文消息支持1到8条图文 |
thumb_media_id | 是 | 图文消息缩略图的media_id,可以在基础支持-上传多媒体文件接口中获得 |
author | 否 | 图文消息的作者 |
title | 是 | 图文消息的标题 |
content_source_url | 否 | 在图文消息页面点击“阅读原文”后的页面,受安全限制,如需跳转Appstore,可以使用itun.es或appsto.re的短链服务,并在短链后增加 #wechat_redirect 后缀。 |
content | 是 | 图文消息页面的内容,支持HTML标签。具备微信支付权限的公众号,可以使用a标签,其他公众号不能使用 |
digest | 否 | 图文消息的描述 |
show_cover_pic | 否 | 是否显示封面,1为显示,0为不显示 |
2、群发图文消息的过程和UEditor使用
- 首先,调用接口上传封面缩略图素材,获取thumb_media_id;(目标1)
- 然后将图文消息中需要用到的图片,使用上传图文消息内图片接口,上传成功并获得图片 URL;(目标2)
- 上传图文消息素材,需要用到图片时,请使用上一步获取的图片 URL;
- 使用对用户标签的群发,或对 OpenID 列表的群发,将图文消息群发出去,群发时微信会进行原创校验,并返回群发操作结果;
- 在上述过程中,如果需要,还可以预览图文消息、查询群发状态,或删除已群发的消息等。
2.1 启用UEditor
- UEditor的官方网址和下载
- UEditor的官网文档
- 官方文档(定制工具栏图标)
- 百度编辑器UEditor自定义工具栏Toolbars
2.2 封面和文章内图片上传
2.2.1 上传封面缩略图永久素材
http请求方式: POST,需使用https
https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=ACCESS_TOKEN&type=TYPE调用示例(使用curl命令,用FORM表单方式新增一个其他类型的永久素材,curl命令的使用请自行查阅资料)
http请求方式: POST,需使用https
https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=ACCESS_TOKEN&type=TYPE
调用示例(使用curl命令,用FORM表单方式新增一个其他类型的永久素材,curl命令的使用请自行查阅资料)
- access_token(必需) 调用接口凭证
- type(必需) 媒体文件类型,分别有图片(image)、语音(voice)、视频(video)和缩略图(thumb)
- media(必需) form-data中媒体文件标识,有filename、filelength、content-type等信息
public static String uploadTemp(File file, String url) throws IOException {String REQUEST_METHOD = "POST";String result = null;//请求地址URL urlObj = new URL(url);//连接HttpURLConnection connection = (HttpURLConnection) urlObj.openConnection();//设置关键值//POST提交表单,默认是GETconnection.setRequestMethod(REQUEST_METHOD);connection.setDoInput(true);connection.setDoOutput(true);//POST方式无法使用缓存connection.setUseCaches(false);//设置请求头信息connection.setRequestProperty("Connection", "Keep-Alive");connection.setRequestProperty("Charset", "UTF-8");//设置边界String BOUNDARY = "----------" + System.currentTimeMillis();connection.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);//请求正文信息//part1 开头StringBuilder stringBuilder = new StringBuilder();stringBuilder.append("--"); // 必须多两道线stringBuilder.append(BOUNDARY);stringBuilder.append("\r\n");stringBuilder.append("Content-Disposition: form-data;name=\"file\";filename=\"" + file.getName() + "\"\r\n");stringBuilder.append("Content-Type:application/octet-stream\r\n\r\n");byte[] head = stringBuilder.toString().getBytes("utf-8");//获得输出流OutputStream out = new DataOutputStream(connection.getOutputStream());//输出表头out.write(head);//part2 文件正文//把文件以流文件的方式,推入到url中DataInputStream in = new DataInputStream(new FileInputStream(file));int bytes = 0;byte[] bufferOut = new byte[1024];while ((bytes = in.read(bufferOut)) != -1) {out.write(bufferOut, 0, bytes);}in.close();//part3 结尾部分byte[] foot = ("\r\n--" + BOUNDARY + "--\r\n").getBytes("utf-8");// 定义最后数据分隔线out.write(foot);out.flush();out.close();StringBuffer buffer = new StringBuffer();BufferedReader reader = null;try {// 定义BufferedReader输入流来读取URL的响应reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));String line = null;while ((line = reader.readLine()) != null) {buffer.append(line);}if (result == null) {result = buffer.toString();}} catch (IOException e) {log.error("发送POST请求出现异常!" + e);e.printStackTrace();throw new IOException("数据读取异常");} finally {if(reader!=null) {reader.close();}}return result;
}
public static String uploadTemp(File file, String url) throws IOException {
String REQUEST_METHOD = "POST";
String result = null;
//请求地址
URL urlObj = new URL(url);
//连接
HttpURLConnection connection = (HttpURLConnection) urlObj.openConnection();
//设置关键值
//POST提交表单,默认是GET
connection.setRequestMethod(REQUEST_METHOD);
connection.setDoInput(true);
connection.setDoOutput(true);
//POST方式无法使用缓存
connection.setUseCaches(false);
//设置请求头信息
connection.setRequestProperty("Connection", "Keep-Alive");
connection.setRequestProperty("Charset", "UTF-8");
//设置边界
String BOUNDARY = "----------" + System.currentTimeMillis();
connection.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
//请求正文信息
//part1 开头
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("--"); // 必须多两道线
stringBuilder.append(BOUNDARY);
stringBuilder.append("\r\n");
stringBuilder.append("Content-Disposition: form-data;name=\"file\";filename=\"" + file.getName() + "\"\r\n");
stringBuilder.append("Content-Type:application/octet-stream\r\n\r\n");
byte[] head = stringBuilder.toString().getBytes("utf-8");
//获得输出流
OutputStream out = new DataOutputStream(connection.getOutputStream());
//输出表头
out.write(head);
//part2 文件正文
//把文件以流文件的方式,推入到url中
DataInputStream in = new DataInputStream(new FileInputStream(file));
int bytes = 0;
byte[] bufferOut = new byte[1024];
while ((bytes = in.read(bufferOut)) != -1) {
out.write(bufferOut, 0, bytes);
}
in.close();
//part3 结尾部分
byte[] foot = ("\r\n--" + BOUNDARY + "--\r\n").getBytes("utf-8");// 定义最后数据分隔线
out.write(foot);
out.flush();
out.close();
StringBuffer buffer = new StringBuffer();
BufferedReader reader = null;
try {
// 定义BufferedReader输入流来读取URL的响应
reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
String line = null;
while ((line = reader.readLine()) != null) {
buffer.append(line);
}
if (result == null) {
result = buffer.toString();
}
} catch (IOException e) {
log.error("发送POST请求出现异常!" + e);
e.printStackTrace();
throw new IOException("数据读取异常");
} finally {
if(reader!=null) {
reader.close();
}
}
return result;
}
2.2.2 结合UEditor实现图文内图片消息的图片上传
ue = UE.getEditor("editor");
//重写UEDITOR的getActionUrl 方法,定义自己的Action,上传图片保存至相应的位置
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {if (action == 'uploadimage' || action == 'uploadfile') {var id = $('#carInfoId').val();//修改定义自己的Actionreturn '/admin/news/do/ueditor_uploadNewsImage.q';} else {return this._bkGetActionUrl.call(this, action);}
};
ue = UE.getEditor("editor");
//重写UEDITOR的getActionUrl 方法,定义自己的Action,上传图片保存至相应的位置
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
if (action == 'uploadimage' || action == 'uploadfile') {
var id = $('#carInfoId').val();
//修改定义自己的Action
return '/admin/news/do/ueditor_uploadNewsImage.q';
} else {
return this._bkGetActionUrl.call(this, action);
}
};
- 将ueditor中的图片上传用struts2实现
- UEditor官方文档 后端请求规范 返回json格式要求
/*** ueditor编辑器上传图片到微信服务器* <p>该部分是使用了百度的富文本web编辑器UEditor,以及微信的图文消息内图片上传接口</p>** @throws IOException*/
public void ueditor_uploadNewsImage() throws IOException {WeChatUtil weChatUtil = new WeChatUtil();String accessToken = weChatUtil.getAccessToken();HttpServletResponse response = ServletActionContext.getResponse();//struts请求 包装过滤器MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) ServletActionContext.getRequest();//获取文件过滤器File tmp = wrapper.getFiles("upfile")[0];//获得上传的文件名String filename = wrapper.getFileNames("upfile")[0];int suffixIndex = filename.indexOf(".");//文件后缀确定if (suffixIndex == filename.lastIndexOf(".")) {String suffix = filename.substring(suffixIndex);File file = File.createTempFile("tmp", suffix);FileCopyUtils.copy(tmp, file);String imageUrl = weChatUtil.uploadImg(accessToken, file); //这里最终还是调用的表单模拟的那个方法//如果获取到了有效的imageUrlif (imageUrl != null && imageUrl.substring(0, 4).equals("http")) {String json = "{\"state\":\"SUCCESS\", \"url\":\"%s\", \"title\":\"%s\", \"original\":\"%s\"}";json = String.format(json, imageUrl, filename, filename);log.debug("上传图片返回信息:" + json);response.getWriter().write(json);}}
}
/**
* ueditor编辑器上传图片到微信服务器
* <p>该部分是使用了百度的富文本web编辑器UEditor,以及微信的图文消息内图片上传接口</p>
*
* @throws IOException
*/
public void ueditor_uploadNewsImage() throws IOException {
WeChatUtil weChatUtil = new WeChatUtil();
String accessToken = weChatUtil.getAccessToken();
HttpServletResponse response = ServletActionContext.getResponse();
//struts请求 包装过滤器
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) ServletActionContext.getRequest();
//获取文件过滤器
File tmp = wrapper.getFiles("upfile")[0];
//获得上传的文件名
String filename = wrapper.getFileNames("upfile")[0];
int suffixIndex = filename.indexOf(".");
//文件后缀确定
if (suffixIndex == filename.lastIndexOf(".")) {
String suffix = filename.substring(suffixIndex);
File file = File.createTempFile("tmp", suffix);
FileCopyUtils.copy(tmp, file);
String imageUrl = weChatUtil.uploadImg(accessToken, file); //这里最终还是调用的表单模拟的那个方法
//如果获取到了有效的imageUrl
if (imageUrl != null && imageUrl.substring(0, 4).equals("http")) {
String json = "{\"state\":\"SUCCESS\", \"url\":\"%s\", \"title\":\"%s\", \"original\":\"%s\"}";
json = String.format(json, imageUrl, filename, filename);
log.debug("上传图片返回信息:" + json);
response.getWriter().write(json);
}
}
}
- Ueditor整合Struts2实现图片上传
- [J2EE]jsp项目中使用UEditor富文本编辑器
public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter {public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req;//不过滤的urlString url = request.getRequestURI();System.out.println(url);try {if (url.contains("/controller.jsp")) {System.out.println("使用自定义的过滤器");chain.doFilter(req, res);} else {System.out.println("使用默认的过滤器");super.doFilter(req, res, chain);}} catch (Exception e) {e.printStackTrace();}}
}
public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter {
public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
//不过滤的url
String url = request.getRequestURI();
System.out.println(url);
try {
if (url.contains("/controller.jsp")) {
System.out.println("使用自定义的过滤器");
chain.doFilter(req, res);
} else {
System.out.println("使用默认的过滤器");
super.doFilter(req, res, chain);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
2.3 图文素材上传和发送
{"articles": [{"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p","author":"xxx","title":"Happy Day","content_source_url":"www.qq.com","content":"content","digest":"digest","show_cover_pic":1},{"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p","author":"xxx","title":"Happy Day","content_source_url":"www.qq.com","content":"content","digest":"digest","show_cover_pic":0}]
}
{
"articles": [
{
"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
"author":"xxx",
"title":"Happy Day",
"content_source_url":"www.qq.com",
"content":"content",
"digest":"digest",
"show_cover_pic":1
},
{
"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
"author":"xxx",
"title":"Happy Day",
"content_source_url":"www.qq.com",
"content":"content",
"digest":"digest",
"show_cover_pic":0
}
]
}
- thumb_media_id 上传封面缩略图后返回的media_id,我们已经说明了
- author 这个写个input就可以搞定
- title 同上
- content_source_url 非必需
- content 这里就是我们用UEditor编辑器中的内容了,其中重点是图片上传,我们已经说明了
- digest 摘要,加input解决
- show_cover_pic 非必需
转载于:https://www.cnblogs.com/deng-cc/p/6868234.html
微信公众号开发 [03] 结合UEditor实现图文消息群发功能相关推荐
- 【微信公众号开发】【6】图文消息加强
前言: 1,图文消息参数介绍 2,注意区分图片消息和图文消息,图片消息是不能带链接的 3,一定要给图文消息的Url属性赋值.(柳峰老师说如果Url为空,用户点击后将会打开一个空白页面,待验证,我以前直 ...
- 微信公众号开发之关注推送图文消息
关注/取消关注事件 用户在关注与取消关注公众号时,微信会把这个事件推送到开发者填写的URL.方便开发者给用户下发欢迎消息或者做帐号的解绑. 微信服务器在五秒内收不到响应会断掉连接,并且重新发起请求,总 ...
- python微信语音转发_Python 微信公众号开发(2)——听得懂语音消息的聊天机器人...
提要: 这篇文章里我们会写: 1.如何对一个聊天机器人进行抓包分析接口: 2.如何将现成的聊天机器 API 部署到自己的公众号上: 3.如何实现接收语音消息并调用聊天机器人 API 自动回复文字: 4 ...
- 如何创建微信公众号, 微网站 以及发多图文消息
1. 到微信公众平台官网,创建一个自己的微信公众号 第一步,打开腾讯微信公众平台官网 http://mp.weixin.qq.com 第二步,打开了微信公共平台的注册页面以后,点击右上角的" ...
- 微信公众号开发(二)---验证服务与回复消息
经过第一个阶段的工作,公众号服务器方面的配置已经完成,接下来就是开发环境的搭建了. 准备工作请看上一篇文章: 0. 消息的传递路径 1. 启动XShell,开启端口转发 按照上一篇文章对XShell进 ...
- 微信公众号开发整理(四)--音乐消息回复
1.首先,我们先看回复音乐消息数据格式: 2.与回复图片消息一样,首先我们需要先创建音乐消息的实体类 public class Music { private String Title; privat ...
- 微信公众号开发——向指定用户发送模板消息
- 微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆 微信公众号开发<二>发送模板消息实现消息业务实 ...
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆 微信公众号开发<二>发送模板消息实现消息业务实 ...
最新文章
- Delphi 之Copyrect的使用
- 将EXE安装包重新封装成MSI格式
- 微软Windows Azure Platform技术解析
- c#实现 改进弧长法判断点在多边形里面
- oracle事务处理类型,Oracle EBS-SQL (OM-5):检查订单事务处理类型.sql
- Connect Three
- C语言学习之用函数处理,而且用指针类型的数据作函数参数,对输入的两个整数按大小顺序输出
- 读取csv格式的数据
- java期末考试试卷及答案文库_小学二年级上册期末考试试卷,【附答案】
- 线程打印_经典面试题——两个线程交替打印奇数和偶数
- swift oc UIimage 和 NSString 互相转换
- Java学习之贷款案例
- c语言算法单循环球队比赛安排,单循环赛赛程安排算法的研究.doc
- 了解HTTP和HTPS的S之差
- java海贼王秘宝传说下载_我的世界1.7.10海贼王整合包
- Linux分区efi,什么时候建立分区的时候需要建立EFI分区
- PaddleNLP系列课程一:Taskflow、小样本学习、FasterTransformer
- java设计模式——装饰模式
- Mysql面试题整理
- mac os 安装完整版opencv (with qt )