devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信内分享网页自定义标题，图片，描述_微信转发给朋友的标题描述图片分别取什么字段

作者：weixin_40725706 | 2024-03-19 15:31:24

赞

踩

微信转发给朋友的标题描述图片分别取什么字段

背景描述：

公司有个需求，将一个微网站链接，网页，外部网站在微信中打开，然后分享给其他人，但是在分享过程中发现分享完微信中显示的是这样子，

      

标题有了，但是简介显示网址，图片没有，而我想要的是上面另一种样式。标题，简介和图片都可自定义的。由此产生了这篇文章。

必备要求：

  1. 有公众号，公众号必须认证过，如果不确定认证没认证过，就看下图，在微信公众平台https://mp.weixin.qq.com最下面接口权限中看分享接口后面状态是已获得还是未获得，已获得才可以用，未获得说明没有认证过，就不用往下看了。

2.必须要有已备案的域名和服务器。实现这个功能需要调用后台接口，而且接口的域名和分享网站，网页的域名是一样的。

这里要注意：在二次分享时候如果分享地址是http的话安卓手机正常，苹果手机不正常，如果是用https的话苹果手机也正常了。

参考资料：

  1. 简书网页分享到微信https://www.jianshu.com/p/bf743d52c6d3
  2. 微信公众平台https://mp.weixin.qq.com
  3. 微信JS-SDK说明文档

实现过程：

上面准备工作做完以后开始实现。

  1. 首先可以先阅读以下微信的JS-SDK的说明文档
    微信JS-SDK说明文档
  2. 绑定域名，登录微信公众平台，进入“公众号设置”的功能设置里面填写js接口安全域名，这个是要填写的是你微信浏览器要打开的域名地址。不能添加IP地址。

    设置时候点击设置里面有说明，如下图

    画红圈的要注意，下载完的那个文件放进去一定要在浏览器能访问才能进行下一步。我是把这个文件放到tomcat下面的ROOT文件夹中，可以直接域名后面加文件名访问。

    网页访问的效果：
  3. 将你服务器的ip地址添加白名单。
    在开发-基本配置里面设置ip白名单，不然调用接口获取不到token.
  4. 在需要调用js接口的页面接入JS文件 http://res.wx.qq.com/open/js/jweixin-1.4.0.js  ，1.4.0是目前最新版本。网上有些地方用的是1.2.0.js,那个已经弃用了。
  5. 通过config接口注入权限并验证配置 
    1. wx.config({
    2.     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    3.     appId: '', // 必填，公众号的唯一标识
    4.     timestamp: , // 必填，生成签名的时间戳
    5.     nonceStr: '', // 必填，生成签名的随机串
    6.     signature: '',// 必填，签名
    7.     jsApiList: [] // 必填，需要使用的JS接口列表
    8. });

     

  6. 这一步算是整个步骤中最关键的一步，必须正确的配置信息才可以进行调用JS-SDK。

获取配置

 获取签名实际是需要四步

1. 根据appId和appsecret获取access_token;

2. 使用access_token获取jsapi_ticket;

3. 使用时间戳，随机数，jsapi_ticket和要访问的url按照签名算法拼接字符串；

4. 对第三步的字符串进行SHA1加密，得到签名；
这步是在服务器后台写的一个工具类里面实现的，测试时候可以先后台获取，前台页面将参数写死，实际用的时候最好动态获取这些数据。如果参数写死的话会二次分享会出问题，在微信中第二次分享，微信会自己加一个参数上去，这样点开在分享的时候签名和url会匹配不上。

第一步，获取access_token

appId和appsecret可以在微信公众平台--开发-基本配置中查找

  1. /**
  2. 	 * 第一步，获取access_token
  3. 	 *	appId和appsecret可以在微信公众平台--开发-基本配置中查找
  4. 	 */
  5. 	public static String getAccess_token(String appId, String appSecret){
  6.  
  7.         String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appId + "&secret=" + appSecret;
  8.         String accessToken = null;
  9.         try
  10.         {
  11.             URL urlGet = new URL(url);
  12.             HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
  13.             http.setRequestMethod("GET"); // 必须是get方式请求
  14.             http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
  15.             http.setDoOutput(true);
  16.             http.setDoInput(true);
  17.             System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒
  18.             System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒
  19.             http.connect();
  20.             InputStream is = http.getInputStream();
  21.             int size = is.available();
  22.             byte[] jsonBytes = new byte[size];
  23.             is.read(jsonBytes);
  24.             String message = new String(jsonBytes, "UTF-8");
  25.             JSONObject jsonObj = JSONObject.fromObject(message);
  26.             accessToken = jsonObj.getString("access_token");
  27.         }
  28.         catch (Exception e)
  29.         {
  30.             e.printStackTrace();
  31.         }
  32.         return accessToken;
  33.     }

第二步 获取jsapi_ticket

  1. /**
  2.      * 第二步：获得ACCESS_TICKET
  3.      * 
  4.      * @Title: ACCESS_TICKET
  5.      * @Description: 获得ACCESS_TICKET
  6.      * @param @return 设定文件
  7.      * @return String 返回类型
  8.      * @throws
  9.      */
  10.     public static String getAccess_ticket(String access_token) {  
  11.         String ticket = null;  
  12.         String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//这个url链接和参数不能变  
  13.         try {  
  14.             URL urlGet = new URL(url);  
  15.             HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
  16.             http.setRequestMethod("GET"); // 必须是get方式请求  
  17.             http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
  18.             http.setDoOutput(true);  
  19.             http.setDoInput(true);  
  20.             System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒  
  21.             System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒  
  22.             http.connect();  
  23.             InputStream is = http.getInputStream();  
  24.             int size = is.available();  
  25.             byte[] jsonBytes = new byte[size];  
  26.             is.read(jsonBytes);  
  27.             String message = new String(jsonBytes, "UTF-8");  
  28.             JSONObject demoJson = JSONObject.fromObject(message);  
  29.             System.out.println("JSON字符串："+demoJson);  
  30.             ticket = demoJson.getString("ticket");  
  31.             is.close();  
  32.         } catch (Exception e) {  
  33.                 e.printStackTrace();  
  34.         }  
  35.         return ticket;  
  36.     }

这里拿到对应的jsapi_ticket之后就可以进行参数排序和拼接字符串并加密

第三步：SHA1加密

  1.  /**
  2.      * 第三步：SHA1加密
  3.      */
  4.     public static String SHA1(String decript) {  
  5.         try {  
  6.             MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");  
  7.             digest.update(decript.getBytes());  
  8.             byte messageDigest[] = digest.digest();  
  9.             // Create Hex String  
  10.             StringBuffer hexString = new StringBuffer();  
  11.             // 字节数组转换为 十六进制 数  
  12.                 for (int i = 0; i < messageDigest.length; i++) {  
  13.                     String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);  
  14.                     if (shaHex.length() < 2) {  
  15.                         hexString.append(0);  
  16.                     }  
  17.                     hexString.append(shaHex);  
  18.                 }  
  19.                 return hexString.toString();  
  20.        
  21.             } catch (NoSuchAlgorithmException e) {  
  22.                 e.printStackTrace();  
  23.             }  
  24.             return "";  
  25.     }

加密算法转载自：http://www.open-open.com/lib/view/open1392185662160.html

第四步： 获取签名

  1. /**
  2.      * 第4步获取签名
  3.      * 公众号
  4.    	 * String appId="wx86b6597*****";
  5.      * String appSecret="aeb428ffb9a8a071fc4******";
  6.      */
  7.     public static void main(String[] args) { 
  8.     	String appId="wx118d752d*****";  //这里写自己的appId
  9.     	String appSecret="947cce9d2808bca0976788d4*****";
  10.         //1、获取AccessToken  
  11.         String accessToken = getAccess_token(appId, appSecret);  
  12.           
  13.         //2、获取Ticket  
  14.         String jsapi_ticket = getAccess_ticket(accessToken);  
  15.           
  16.         //3、时间戳和随机字符串  
  17.         String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串  
  18.         String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳  
  19.           
  20.         System.out.println("accessToken:"+accessToken+"\njsapi_ticket:"+jsapi_ticket+"\n时间戳："+timestamp+"\n随机字符串："+noncestr);  
  21.           
  22.         //4、获取url  
  23.         String url="http://api.groupusonline.com/txrtWeb/test.html";  
  24.         /*根据JSSDK上面的规则进行计算，这里比较简单，我就手动写啦 
  25.         String[] ArrTmp = {"jsapi_ticket","timestamp","nonce","url"}; 
  26.         Arrays.sort(ArrTmp); 
  27.         StringBuffer sf = new StringBuffer(); 
  28.         for(int i=0;i<ArrTmp.length;i++){ 
  29.             sf.append(ArrTmp[i]); 
  30.         } 
  31.         */  
  32.           
  33.         //5、将参数排序并拼接字符串  
  34.         String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;  
  35.          
  36.         //6、将字符串进行sha1加密  
  37.         String signature =SHA1(str);  
  38.         System.out.println("参数："+str+"\n签名："+signature);  
  39.     }

上面是工具类里面的内容，接下来在控制类里面写调用接口。上面的这些内容就可以算出来签名和一些配置需要的东西，测试时候可以直接算出来在html页面里面将参数写死。

第五步：调用接口

  1. /**
  2.  * 微信分享相关
  3.  * Created by yf on 2019/6/20.
  4.  */
  5. @Controller
  6. @ResponseBody
  7. @RequestMapping("wx")
  8. public class WeChatHander {
  9.  
  10.     private Logger log = LoggerFactory.getLogger(WeChatHander.class);
  11.     //公众号信息
  12.     private static final String appId = "wx118d****12221";
  13.     private static final String appSecret="947cce9***88d4b898db3e";
  14.     //微信自动义分享
  15.     @RequestMapping("share")
  16.     public Object share(HttpSession session,String URL){
  17.         String url="";
  18.         //需要转换解码url
  19.         try {
  20.             url = java.net.URLDecoder.decode(URL,"UTF-8");
  21.         } catch (UnsupportedEncodingException e) {
  22.             e.printStackTrace();
  23.         }
  24.         //获取access_token，这里要从存到session，生成这个参数的wx调用接口有调用次数限制。这部分存session，下面的下载文件里面没有更新，自己添加进去吧，不然接口次数很快就用完了。
  25.         String aeecss_token=(String) session.getAttribute("aeecss_token");
  26.         if(aeecss_token==null){
  27.         	aeecss_token = WeChatUtil.getAccess_token(appId, appSecret);
  28.         	session.setAttribute("aeecss_token", aeecss_token);
  29.         }
  30.         //获取access_ticket
  31.         String aeecss_ticket=(String) session.getAttribute("aeecss_ticket");
  32.         if(aeecss_ticket==null){
  33.         	aeecss_ticket = WeChatUtil.getAccess_ticket(aeecss_token);
  34.         	session.setAttribute("aeecss_ticket", aeecss_ticket);
  35.         }
  36.         //String aeecss_ticket = WeChatUtil.getAccess_ticket(aeecss_token);
  37.          //3、时间戳和随机字符串  
  38.         String nonceStr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串  
  39.         String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳  
  40.         System.out.println("accessToken:"+aeecss_token+"\njsapi_ticket:"+aeecss_ticket+"\n时间戳："+timestamp+"\n随机字符串："+nonceStr);  
  41.         //4、获取url  
  42.         //5、将参数排序并拼接字符串  
  43.         String str = "jsapi_ticket="+aeecss_ticket+"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+url;   
  44.         //6、将字符串进行sha1加密  
  45.         String signature =WeChatUtil.SHA1(str);  
  46.         System.out.println("参数："+str+"\n签名："+signature);  
  47.         
  48.         
  49.         Map<String,String> map=new HashMap();
  50.         map.put("appId",appId);
  51.         map.put("timestamp",timestamp);
  52.         map.put("accessToken",aeecss_token);
  53.         map.put("ticket",aeecss_ticket);
  54.         map.put("nonceStr",nonceStr);
  55.         map.put("signature",signature);
  56.     	return map;
  57.     }
  58. }

这样通过这个接口获取签名后把所有的信息都返回json格式了。概要的都有了，这是就可以配置config了，此时html页面中应该是：这是参数写死的时候测试用。

  1.  
  2.  
  3. <script type="text/javascript">
  4.  
  5.     wx.config({
  6.     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  7.     appId: 'wx118d75***212221', // 必填，公众号的唯一标识
  8.     timestamp:'1560929330' , // 必填，生成签名的时间戳
  9.     nonceStr: 'ab1ef978a35f4d4f', // 必填，生成签名的随机串
  10.     signature: '13159896a4f8f461e0f****9df4029818e6e',// 必填，签名
  11.     jsApiList: [// 必填，需要使用的JS接口列表
  12.         'updateAppMessageShareData',
  13.         'updateTimelineShareData'
  14.      
  15. 		], // 需要检测的JS接口列表，所有JS接口列表见附录2,
  16. 	});
  17.     //ready
  18.     wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  19.     	shareData = {
  20.     	        title: "测试标题",  // 分享标题
  21.     	        desc: "测试描述",            // 分享描述
  22.     	        link: "http://****.com/txrtWeb/test.html",                // 分享链接
  23.     	        imgUrl: "http://****.com/images/logo.png",  // 分享图标
  24.     	        success: function() {
  25.     	          // 设置成功
  26.     	        }
  27.     	    };
  28.     	    // 1.4.0 新接口 (只调用这个接口在安卓下是无效的)
  29.     		wx.updateAppMessageShareData(shareData);
  30.     	    wx.updateTimelineShareData(shareData);
  31. 	});            
  32. </script>

参数从接口获取的时候如下：

  1. <!--  Meta for OpenGraph -->
  2.   <meta name="title" content="测试页面标题从meta获取">
  3.   <meta name="description" content="描述">
  4.   <!-- End -->
  5.   <script src="include/jquery-1.7.1.min.js" language="JavaScript"></script>
  6.   <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"language="JavaScript"></script>    <!-- 微信js -->
  7.  
  8. <!--微信分享相关js -->
  9. 	<script type="text/javascript">
  10. 		var title=document.querySelector('meta[name="title"]').getAttribute('content');   //网页标题
  11. 		var desc=document.querySelector('meta[name="description"]').getAttribute('content');   //网页描述
  12. 			 $.ajax({
  13. 	             async : true,   //这里参数true和false在微信中打开会有不同效果，实际用的时候用false,用true时候测试会有提示性内容。
  14. 				 url : 'http://****.com/**/wx/share',
  15. 				 //url : 'http://localhost:8081/txrt_api/wx/share',
  16. 	             type : "POST",
  17. 	             dataType : "json", // 返回的数据类型，设置为JSONP方式	   
  18. 	             data : {
  19. 	                 URL : encodeURIComponent(window.location.href.split("#")[0])   
  20. 	             }, 
  21. 	             success: function(response, status, xhr){
  22. 	                 //console.log('状态为：' + status + ',状态是：' + xhr.statusText);
  23. 	               // alert("进来了");
  24. 					wx.config({
  25. 						debug: false, //调试阶段建议开启，关闭就不弹提示了
  26. 						appId: response.appId,//APPID
  27. 						timestamp: response.timestamp,//上面main方法中拿到的时间戳timestamp
  28. 						nonceStr: response.nonceStr,//上面main方法中拿到的随机数nonceStr
  29. 						signature: response.signature,//上面main方法中拿到的签名signature
  30. 						//需要调用的方法接口
  31. 						jsApiList: [         
  32.                        'updateAppMessageShareData','updateTimelineShareData']
  33. 							});
  34. 					//ready
  35. 						wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  36. 							shareData = {
  37. 									title: title,  // 分享标题
  38. 									desc: desc,            // 分享描述
  39. 									link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  40. 									imgUrl: "http://****.com/txrtWeb/images/zfshlogo.png",  // 分享图标
  41. 									success: function() {
  42. 										//alert("设置成功分享");
  43. 									  // 设置成功
  44. 									}
  45. 								};
  46. 								// 1.4.0 新接口 (只调用这个接口在安卓下是无效的)
  47. 								wx.updateAppMessageShareData(shareData);
  48. 								wx.updateTimelineShareData(shareData);
  49. 						});
  50. 	             }
  51. 	         });
  52.     
  53. 	</script>

注意：

  1. url一定要是完整的url（当前网页的URL，不包含#及其后面部分）最好是使用window.location.href.split("#")获取得到，如果传入固定的好像会报invalid signature错误，所以为了安全起见还是直接传入当前的url
  2. 这个签名的有效时间为7200秒，也就是2个小时，因此当超过两个小时候，再访问也会报invalid signature错误。但是这个我还没有遇见，并不知道这么解决，其他说是需要缓存access_token和access_ticket
  3. 另外还有一个错误：invalid url domain
    这个跟生成签名时用的url有关系，官网的说法是：
    invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名）
    这个url必须是：“公众号设置---功能设置----JS接口安全域名”中绑定的三个域名之一
  4. 如果以上配置都是正确，而且debug也设置为true了，在微信中访问连接会出现config：ok的界面，就说明配置成功了
  5. 有时也可以把ajax请求放在setTimeout中进行请求。

验证工具：
微信公众平台接口调试工具
微信 JS 接口签名校验工具

参考：
解决微信JS-SDK扫一扫功能接入以及出现签名无效 invalid signature
微信JS-SDK获取signature签名以及config配置

相关代码文件下载：https://download.csdn.net/download/qq_37698433/11253616

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/268061
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号