微信分享自定义：标题、内容、小图标

注意：实现此功能需要做的准备工作。
（1:）：准备一个认证过的微信公众号。
（2）：登录微信公众后台配置ip白名单，添加域名。
（3）：获取公众号的app_id和app_secret

1. 在要分享的链接页面中（一般是首页），<head>标签中引入微信官方js

<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.把下面这段js代码,放到页面中的任意位置，或者封装到js文件中，引入到页面。
注意：需要修改自己的后台请求路径,编辑文案,修改图标路径.

<script type="text/javascript">var appId = ""; // 必填，公众号的唯一标识var timestamp = ""; // 必填，生成签名的时间戳var nonceStr = ""; // 必填，生成签名的随机串var signature = "";// 必填，签名，见附录1var lineLink = window.location.href; //分享的网页,地址完整地址如:https://xxx.com/xxx/xxx.html$(function(){//发送ajax请求后台微信接口,返回需要的一些参数,见下面success中$.ajax({url : 'https://tests.wanxue.cn/shenlongpc/promote/getWXParam',//后台请求路径type : "POST",data : {url : lineLink},//后台响应回的数据success : function(res) {var r = eval(res);appId = r.appId;timestamp = r.timestamp;nonceStr = r.nonceStr;signature = r.signature;wx_fx();}});})function wx_fx(){wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature,// 必填，签名，见附录1jsApiList: ['onMenuShareTimeline', //分享给好友'onMenuShareAppMessage'  //分享到朋友圈] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function () {//自定义分享,小图标,标题,内容var imgUrl = "http://xxx.com/images/img.png"; (填写完整的图标地址)var shareTitle = "此处填写分享的标题";var descContent = "此处填写分享的内容";//分享到朋友圈wx.onMenuShareTimeline({title: shareTitle,link: lineLink,imgUrl: imgUrl,success: function (res) {alert("分享成功！")},cancel: function (res) {alert("取消分享！")},fail: function (res) {alert("分享失败！");}});//分享给朋友wx.onMenuShareAppMessage({title: shareTitle,desc: descContent ,link: lineLink,imgUrl: imgUrl,success: function (res) {/*shared(shareLink, "friend", shareGid);*/alert("分享给朋友成功！");},fail: function (res) {alert("分享给朋友失败！" + JSON.stringify(res));}});});}</script>

3.编写后台代码，根据公众号的app_id/app_secret获取tiket。

@RequestMapping("/promote")
@Controller
public class PromoteController {@RequestMapping("/getWXParam")@ResponseBodypublic Map<String,String> getWXParam(String url){//ticket是公共的,所有用户进来用的都是一个ticket.微信官方规定ticket失效时间两小时,每天的获取次数也有限制,所以每次进入都先从redis中获取ticket,存取redis的方法需要根据自己项目修改.或者存到数据库中也可以.String ticket = RedisPoolTools.getRedis(RedisPoolTools.getDatabase(),"redis_ticket");//判断ticket是否失效if("".equals(ticket) || null == ticket){//微信公众号的appId和secretString appId =  "wx91fc8777e7516707";String secret= "254001781918a47a79643656226e8543";//请求微信官方接口,获取access_tokenString s = UrlTools.INSTANCE.httpURLConnection(null,null,"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appId+"&secret="+secret,"GET");JSONObject res1Json = JSONObject.parseObject(s);Map<String,Object> wxBack = (Map<String,Object>)res1Json;System.out.println("wxBack==="+wxBack);String access_token = wxBack.get("access_token").toString();//请求微信接口,获取ticketString url2 = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";System.out.println("获取jsapi_ticket的地址==="+url2);String res2 = UrlTools.INSTANCE.httpURLConnection(null, null, url2, "GET");System.out.println("获取jsapi_ticket的结果==="+res2);Map<String,Object> resMap2 = JsonUtil.parseJSON2Map(res2);try{ticket = resMap2.get("ticket").toString();//把取到的ticket存到redis中(ticket默认两小时失效),设置失效时间7140s,也就是119分钟RedisPoolTools.setRedis(RedisPoolTools.getDatabase(),"redis_ticket",ticket,7140);}catch (Exception e){throw new RuntimeException("获取jsapi_ticket失败！");}}//调用工具类return jsApiUtil.sign(ticket,url);}
}

再次注意:

只有使用企业认证的公众号才能使用自定义分享的功能.代码中的appid和secret填写使用的公众号的.
把线上服务器的ip地址和域名配置到公众号后台,把微信认证的一个.txt文件放到服务器的域名根目录下,我的项目springBoot项目，放在了服务器的static目录下了

1:使用的工具类1: jsApiUtil

public class jsApiUtil {public static Map<String, String> sign(String jsapi_ticket, String url) {Map<String, String> ret = new HashMap<String, String>();String nonce_str = create_nonce_str();String timestamp = create_timestamp();String string1;String signature = "";//注意这里参数名必须全部小写，且必须有序string1 = "jsapi_ticket=" + jsapi_ticket +"&noncestr=" + nonce_str +"&timestamp=" + timestamp +"&url=" + url;System.out.println(string1);try{MessageDigest crypt = MessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signature = byteToHex(crypt.digest());}catch (NoSuchAlgorithmException e){e.printStackTrace();}catch (UnsupportedEncodingException e){e.printStackTrace();}//Map<String,String> wxInfo = WXInfoApplication.getWXInfo(CookieUtil.getWxRegion());//微信公众号的appid,使用时需要修改String appId =  "wx91fc8777e7516707";ret.put("url", url);ret.put("appId",appId);ret.put("jsapi_ticket", jsapi_ticket);ret.put("nonceStr", nonce_str);ret.put("timestamp", timestamp);ret.put("signature", signature);return ret;}private static String byteToHex(final byte[] hash) {Formatter formatter = new Formatter();for (byte b : hash){formatter.format("%02x", b);}String result = formatter.toString();formatter.close();return result;}private static String create_nonce_str() {return UUID.randomUUID().toString();}private static String create_timestamp() {return Long.toString(System.currentTimeMillis() / 1000);}
}

4.2:使用的工具类2,把json转成map

public class JsonUtil {/*** json转map* @param jsonStr* @return*/public static Map<String, Object> parseJSON2Map(String jsonStr){  Map<String, Object> map = new HashMap<String, Object>();  if(jsonStr!=null && !jsonStr.equals("")){if(jsonStr.indexOf("[")==0){jsonStr=jsonStr.substring(1,jsonStr.length()-1);}//最外层解析  JSONObject json = JSONObject.fromObject(jsonStr);  for(Object k : json.keySet()){  Object v = json.get(k);   //如果内层还是数组的话，继续解析  if(v instanceof JSONArray){  List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();  Iterator<JSONObject> it = ((JSONArray)v).iterator();while(it.hasNext()){  JSONObject json2 = it.next();  list.add(parseJSON2Map(json2.toString()));  }  map.put(k.toString(), list);  } else {  if(v.equals(null)){v=new String();}map.put(k.toString(), v);  }  }  }return map;  }
}

5.使用的工具类3:请求外部接口工具类，可换成自己的方式发送http请求

public enum UrlTools {INSTANCE;/*** lyc* 接口调用  get/POST*/public String httpURLConnection (Map<String,Object> headers, String param, String url, String method) {String res = "";InputStream in = null;InputStreamReader isr = null;BufferedReader br = null;HttpURLConnection connection = null;PrintWriter out = null;try {URL u = new URL(url);// 将url 以 open方法返回的urlConnection  连接强转为HttpURLConnection连接  (标识一个url所引用的远程对象连接)// 此时cnnection只是为一个连接对象,待连接中connection = (HttpURLConnection) u.openConnection();// 设置连接输出流为true,默认false (post 请求是以流的方式隐式的传递参数)connection.setDoOutput(true);// 设置连接输入流为trueconnection.setDoInput(true);// 设置请求方式为postconnection.setRequestMethod(method);// post请求缓存设为falseconnection.setUseCaches(false);// 设置该HttpURLConnection实例是否自动执行重定向connection.setInstanceFollowRedirects(true);//addRequestProperty添加相同的key不会覆盖，如果相同，内容会以{name1,name2}connection.setRequestProperty("Accept", "*/*");connection.setRequestProperty("Content-Type", "application/json;charset=utf-8");if(null != headers){setProperty(headers,connection);}// 建立连接 (请求未开始,直到connection.getInputStream()方法调用时才发起,以上各个参数设置需在此方法之前进行)connection.setConnectTimeout(10000);connection.setReadTimeout(10000);if("POST".equals(method) || "PUT".equals(method) && null != param){out = new PrintWriter(new OutputStreamWriter(connection.getOutputStream(),"utf-8"));out.println(param);out.close();}if(connection.getResponseCode() == HttpURLConnection.HTTP_OK ||connection.getResponseCode() ==  HttpURLConnection.HTTP_CREATED ||connection.getResponseCode() ==  HttpURLConnection.HTTP_ACCEPTED){in = connection.getInputStream();}else{in = connection.getErrorStream();}isr = new InputStreamReader(in);br = new BufferedReader(isr);String line = "";StringBuilder content = new StringBuilder();while ((line = br.readLine()) != null) {content.append(line);}res = content.toString().trim();return res;} catch (Exception e) {//logger.error(" ** 接口访问失败 - "+url +"\r\n 错误信息:" + e.getClass()+" - "+e.getMessage());e.printStackTrace();throw new RuntimeException("接口访问失败");} finally {if (null != br) {try {br.close();} catch (IOException e) {}}if (null != isr) {try {isr.close();} catch (IOException e) {}}if (null != in) {try {in.close();} catch (IOException e) {}}if (null != out) {try {out.close();} catch (Exception e) {}}if(null != connection){try {connection.disconnect(); // 销毁连接} catch (Exception e) {}}}}//lycprivate void setProperty(Map<String,Object> headers,HttpURLConnection connection){if(headers.containsKey("v")){connection.setRequestProperty("v",headers.get("v").toString());}if(headers.containsKey("p")){connection.setRequestProperty("p",headers.get("p").toString());}if(headers.containsKey("d")){connection.setRequestProperty("d",headers.get("d").toString());}if(headers.containsKey("t")){connection.setRequestProperty("t",headers.get("t").toString());}if(headers.containsKey("a")){connection.setRequestProperty("a",headers.get("a").toString());}if(headers.containsKey("Access-Control-Allow-Origin")){connection.setRequestProperty("Access-Control-Allow-Origin",headers.get("Access-Control-Allow-Origin").toString());}/*if(headers.containsKey("Content-Type")){connection.setRequestProperty("Content-Type",headers.get("Content-Type").toString());}*/}
}

注意:后台代码使用的时候需要修改的内容:

存取redis的方式,改成自己的
微信公众号的appid和secret改成你使用的公众号
不要忘了把自己服务器的ip和项目域名配置公众号后台,进行认证.

前端代码使用注意:

不要忘记引入使用微信的js文件jweixin-1.6.0.js
修改后台请求路径
修改js代码中的图标地址,编辑标题和内容文案.

6.效果

微信分享自定义：标题、内容、小图标相关推荐

微信分享自定义标题和图片,开发者工具没问题,真机调试失败
昨天亲身经历,微信分享开发者工具调试没问题,但是真机调试失败,说明配置是没问题的,历经一天发现是缓存的问题解决方案: 删除掉微信进程后,缓存没有被彻底清除安卓手机打开 debugtbs.qq.co ...
typecho图标_Typecho微信自定义分享插件WeChatShare 自定义标题描述小图标
前言张小龙带领微信走进了大众的生活,在十亿用户的生活里扎根.于是我们不管是阅读.聊天.看视频,基本上都离不开微信.好东西分享给用户,第一时间想到的肯定是微信. 很久以前,一个网页分享到微信聊天,系统 ...
【电子杂志怎么制作】云展网教程 | 如何修改云展网杂志和书橱在微信显示的标题、小图标和描述?
云展网杂志和书橱都可以通过微信分享给朋友或者分享到朋友圈.下面我们对分享的标题.名称.小图标等内容进行说明: 1.杂志的标题和描述可以在编辑杂志的标题和描述修改: 2.小图标修改.在个人中心–我的文件 ...
微信分享自定义标题摘要和缩略图
新建一个fx.php并且写入以下代码 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID&q ...
微信分享链接标题和小图片-不通过公众号接口开发
方法一:不通过公众号接口开发在boby 和head之间添加下面的代码即可,图片路径自行修改. 注意这个图片必须是大于300px300px的 <body><div style ='m ...
名编辑电子杂志大师教程 | 如何设置电子书微信分享的标题,小图标,描述?
当您将做好的H5微杂志发布到微信上,并分享给朋友或者朋友圈的时候,微信上会弹出一个对话框,对话框上包含了以下信息:标题,缩略图以及描述.如图: [▲图1] 分享相关信息的设置是需要根据微信JS-SDK ...
uniapp实现微信公众号内h5页面自定义标题内容和图片
和上次一样填坑,这次是使用uniapp做的项目,下载微信的 js-sdk(1.6.0版本) cnpm install jweixin-module -S wechatShare.js var wx = ...
基于静态URL的微信分享自定义缩略图及标题和摘要
在静态页中实现微信分享自定义缩略图比动态页分享要复杂.下面是示例页面: 分享的效果(缩略图及标题.摘要是自己指定): 实现难点: (1)URL是变化的,我们分享一次后,微信会自动在分享的地址后增加了一 ...
H5实现微信分享自定义地图
这几天紧急开发一个拼团+砍价的H5微信小商城.技术用的是:前端Vue+Vant快速开发组件框架.后端java. 使用微信js-sdk流程图: 微信公众平台测试帐号申请地址:https://mp.wei ...
PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法,php/thinkphp实现微信分享自定义文字和图片...
PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法, php/thinkphp实现微信分享自定义文字和图片. 一.先看微信JS-SDK文 ...

微信分享自定义：标题、内容、小图标

微信分享自定义：标题、内容、小图标相关推荐

最新文章

热门文章