100字范文 > 微信内分享网页自定义标题图片描述

微信内分享网页自定义标题图片描述

时间：2020-04-19 19:05:19

相关推荐

微信内分享网页自定义标题图片描述

背景描述：

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

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

必备要求：

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

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

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

参考资料：

简书网页分享到微信/p/bf743d52c6d3微信公众平台https://mp.微信JS-SDK说明文档

实现过程：

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

首先可以先阅读以下微信的JS-SDK的说明文档

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

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

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

网页访问的效果：

将你服务器的ip地址添加白名单。

在开发-基本配置里面设置ip白名单，不然调用接口获取不到token.

在需要调用js接口的页面接入JS文件http://res./open/js/jweixin-1.4.0.js ，1.4.0是目前最新版本。网上有些地方用的是1.2.0.js,那个已经弃用了。通过config接口注入权限并验证配置

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表});

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

获取配置

获取签名实际是需要四步

1. 根据appId和appsecret获取access_token;

2. 使用access_token获取jsapi_ticket;

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

4. 对第三步的字符串进行SHA1加密，得到签名；

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

第一步，获取access_token

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

/*** 第一步，获取access_token*appId和appsecret可以在微信公众平台--开发-基本配置中查找*/public static String getAccess_token(String appId, String appSecret){String url = "https://api./cgi-bin/token?grant_type=client_credential&appid=" + appId + "&secret=" + appSecret;String accessToken = null;try{URL urlGet = new URL(url);HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();http.setRequestMethod("GET"); // 必须是get方式请求http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");http.setDoOutput(true);http.setDoInput(true);System.setProperty(".client.defaultConnectTimeout", "30000");// 连接超时30秒System.setProperty(".client.defaultReadTimeout", "30000"); // 读取超时30秒http.connect();InputStream is = http.getInputStream();int size = is.available();byte[] jsonBytes = new byte[size];is.read(jsonBytes);String message = new String(jsonBytes, "UTF-8");JSONObject jsonObj = JSONObject.fromObject(message);accessToken = jsonObj.getString("access_token");}catch (Exception e){e.printStackTrace();}return accessToken;}

第二步获取jsapi_ticket

/*** 第二步：获得ACCESS_TICKET* * @Title: ACCESS_TICKET* @Description: 获得ACCESS_TICKET* @param @return 设定文件* @return String 返回类型* @throws*/public static String getAccess_ticket(String access_token) { String ticket = null; String url = "https://api./cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//这个url链接和参数不能变 try { URL urlGet = new URL(url); HttpURLConnection http = (HttpURLConnection) urlGet.openConnection(); http.setRequestMethod("GET"); // 必须是get方式请求 http.setRequestProperty("Content-Type","application/x-www-form-urlencoded"); http.setDoOutput(true); http.setDoInput(true); System.setProperty(".client.defaultConnectTimeout", "30000");// 连接超时30秒 System.setProperty(".client.defaultReadTimeout", "30000"); // 读取超时30秒 http.connect(); InputStream is = http.getInputStream(); int size = is.available(); byte[] jsonBytes = new byte[size]; is.read(jsonBytes); String message = new String(jsonBytes, "UTF-8"); JSONObject demoJson = JSONObject.fromObject(message); System.out.println("JSON字符串："+demoJson); ticket = demoJson.getString("ticket"); is.close(); } catch (Exception e) { e.printStackTrace(); } return ticket; }

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

第三步：SHA1加密

/*** 第三步：SHA1加密*/public static String SHA1(String decript) { try { MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1"); digest.update(decript.getBytes()); byte messageDigest[] = digest.digest(); // Create Hex String StringBuffer hexString = new StringBuffer(); // 字节数组转换为十六进制数 for (int i = 0; i < messageDigest.length; i++) { String shaHex = Integer.toHexString(messageDigest[i] & 0xFF); if (shaHex.length() < 2) { hexString.append(0); } hexString.append(shaHex); } return hexString.toString(); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } return ""; }

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

第四步：获取签名

/*** 第4步获取签名* 公众号* String appId="wx86b6597*****";* String appSecret="aeb428ffb9a8a071fc4******";*/public static void main(String[] args) { String appId="wx118d752d*****"; //这里写自己的appIdString appSecret="947cce9d2808bca0976788d4*****";//1、获取AccessToken String accessToken = getAccess_token(appId, appSecret); //2、获取Ticket String jsapi_ticket = getAccess_ticket(accessToken); //3、时间戳和随机字符串 String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串 String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳 System.out.println("accessToken:"+accessToken+"\njsapi_ticket:"+jsapi_ticket+"\n时间戳："+timestamp+"\n随机字符串："+noncestr); //4、获取url String url="/txrtWeb/test.html"; /*根据JSSDK上面的规则进行计算，这里比较简单，我就手动写啦 String[] ArrTmp = {"jsapi_ticket","timestamp","nonce","url"}; Arrays.sort(ArrTmp); StringBuffer sf = new StringBuffer(); for(int i=0;i<ArrTmp.length;i++){ sf.append(ArrTmp[i]); } */ //5、将参数排序并拼接字符串 String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url; //6、将字符串进行sha1加密 String signature =SHA1(str); System.out.println("参数："+str+"\n签名："+signature); }

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

第五步：调用接口

/*** 微信分享相关* Created by yf on /6/20.*/@Controller@ResponseBody@RequestMapping("wx")public class WeChatHander {private Logger log = LoggerFactory.getLogger(WeChatHander.class);//公众号信息private static final String appId = "wx118d****12221";private static final String appSecret="947cce9***88d4b898db3e";//微信自动义分享@RequestMapping("share")public Object share(HttpSession session,String URL){String url="";//需要转换解码urltry {url = .URLDecoder.decode(URL,"UTF-8");} catch (UnsupportedEncodingException e) {e.printStackTrace();}//获取access_token，这里要从存到session，生成这个参数的wx调用接口有调用次数限制。这部分存session，下面的下载文件里面没有更新，自己添加进去吧，不然接口次数很快就用完了。String aeecss_token=(String) session.getAttribute("aeecss_token");if(aeecss_token==null){aeecss_token = WeChatUtil.getAccess_token(appId, appSecret);session.setAttribute("aeecss_token", aeecss_token);}//获取access_ticketString aeecss_ticket=(String) session.getAttribute("aeecss_ticket");if(aeecss_ticket==null){aeecss_ticket = WeChatUtil.getAccess_ticket(aeecss_token);session.setAttribute("aeecss_ticket", aeecss_ticket);}//String aeecss_ticket = WeChatUtil.getAccess_ticket(aeecss_token);//3、时间戳和随机字符串 String nonceStr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串 String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳 System.out.println("accessToken:"+aeecss_token+"\njsapi_ticket:"+aeecss_ticket+"\n时间戳："+timestamp+"\n随机字符串："+nonceStr); //4、获取url //5、将参数排序并拼接字符串 String str = "jsapi_ticket="+aeecss_ticket+"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+url; //6、将字符串进行sha1加密 String signature =WeChatUtil.SHA1(str); System.out.println("参数："+str+"\n签名："+signature); Map<String,String> map=new HashMap();map.put("appId",appId);map.put("timestamp",timestamp);map.put("accessToken",aeecss_token);map.put("ticket",aeecss_ticket);map.put("nonceStr",nonceStr);map.put("signature",signature);return map;}}

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

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

<meta name="title" content="测试页面标题从meta获取"><meta name="description" content="描述"><script src="include/jquery-1.7.1.min.js" language="JavaScript"></script><script src="http://res2./open/js/jweixin-1.4.0.js"language="JavaScript"></script> <script type="text/javascript">var title=document.querySelector('meta[name="title"]').getAttribute('content'); //网页标题var desc=document.querySelector('meta[name="description"]').getAttribute('content'); //网页描述$.ajax({async : true, //这里参数true和false在微信中打开会有不同效果，实际用的时候用false,用true时候测试会有提示性内容。url : 'http://****.com/**/wx/share',//url : 'http://localhost:8081/txrt_api/wx/share',type : "POST",dataType : "json", // 返回的数据类型，设置为JSONP方式 data : {URL : encodeURIComponent(window.location.href.split("#")[0]) }, success: function(response, status, xhr){//console.log('状态为：' + status + ',状态是：' + xhr.statusText);// alert("进来了");wx.config({debug: false, //调试阶段建议开启，关闭就不弹提示了appId: response.appId,//APPIDtimestamp: response.timestamp,//上面main方法中拿到的时间戳timestampnonceStr: response.nonceStr,//上面main方法中拿到的随机数nonceStrsignature: response.signature,//上面main方法中拿到的签名signature//需要调用的方法接口jsApiList: [ 'updateAppMessageShareData','updateTimelineShareData']});//readywx.ready(function () { //需在用户可能点击分享按钮前就先调用shareData = {title: title, // 分享标题desc: desc, // 分享描述link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: "http://****.com/txrtWeb/images/zfshlogo.png", // 分享图标success: function() {//alert("设置成功分享");// 设置成功}};// 1.4.0 新接口 (只调用这个接口在安卓下是无效的)wx.updateAppMessageShareData(shareData);wx.updateTimelineShareData(shareData);});}});</script>

注意：

url一定要是完整的url（当前网页的URL，不包含#及其后面部分）最好是使用window.location.href.split("#")获取得到，如果传入固定的好像会报invalid signature错误，所以为了安全起见还是直接传入当前的url这个签名的有效时间为7200秒，也就是2个小时，因此当超过两个小时候，再访问也会报invalid signature错误。但是这个我还没有遇见，并不知道这么解决，其他说是需要缓存access_token和access_ticket另外还有一个错误：invalid url domain

这个跟生成签名时用的url有关系，官网的说法是：

invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名）

这个url必须是：“公众号设置---功能设置----JS接口安全域名”中绑定的三个域名之一如果以上配置都是正确，而且debug也设置为true了，在微信中访问连接会出现config：ok的界面，就说明配置成功了有时也可以把ajax请求放在setTimeout中进行请求。

验证工具：

微信公众平台接口调试工具

微信 JS 接口签名校验工具

参考：

解决微信JS-SDK扫一扫功能接入以及出现签名无效 invalid signature

微信JS-SDK获取signature签名以及config配置

相关代码文件下载：/download/qq_37698433/11253616

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论