微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如狼蚁网站SEO优化的分享出去的链接
上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果。
微信JS-SDK Demo :这个是微信网页分享出去的标题。
微信JS-SDK,帮助第三方为用户提供更优质的移动web服务这个是被分享的这个页面的分享描述。
微信图标这个就是自己网站或者自己自定义的图像。
上面这个是微信官方网页分享出去的定义描述,那么怎样实现自己网站网页的自定义分享的标题,描述及分享出去的显示图片呢,狼蚁网站SEO优化就具体的来探讨一下微信网页第三方分享自定的实现方式。
关于微信网页分享自定义主要有两方面的工作需要我们来做,一是分享页面的js分享代码的编写,二是微信分享网页的链接地址签名。
来看一下网页的连接地址签名,这个功能主要是在服务端来时实现。
第一步基础数据的准备,需要如下数据信息
APPID:微信公众号的id; APP_SECRECT:公众号号的密钥。签名的网站域名(这个建议配置在配置文件中)。
第二步微信签名数据的准备
appid,secret,url将这三个参数放入map中, 键值为appid=微信公众号的id,secret=APP_SECRECT,url=网站的域名+网页的请求地址+请求的参数。
代码的实现方式如下
1. controller层的代码实现
@RequestMapping("cover") public String identifyCover(HttpServletRequest request, HttpServletResponse response) //微信分享授权开始 String appId = ;//取项目中配置的公众号id String secret = ;//取项目中配置的公众号密钥 //例如我们有一个分享的链接为http://test.weixinfwenx./project/fenxiang.do?id=1&name=2; //那么domainAddr = http://test.weixinfwenx.,这个可以动态的配置在项目里,方便测试环境和生产 //域名的切换 String domainAddr = "";//项目中配置的网站的域名 //这个取的是链接上的参数,例如在上面的这个链接中,id=1&name=2就是我们要动态去的参数,可能有人 //会想到,这个两个参数直接写在地址中不是挺简单的为啥还要动态去获取这个参数呢;在这里我们引出了一 //个微信二次分享的问题,就是别人转发的链接给你,然后你再转发给别人,在你转发给别人后这个链接的签 //名就会失败,为啥呢,因为经过转发的链接,微信会自动加上一些自己的参数,这样会导致页面上微信 //分享的链接和签名的链接不一致。直接导致自定义的标题和链接描述,显示失败,失败原因是微信默认的在 //我们的分享链接上加上了&from=singlemessage。 String str = request.getQueryString(); Map<String, String> map = new HashMap<String, String>(); map.put("appid", appId); map.put("secret", secret); String url = domainAddr + "/project/fenxiang.do?"+str; map.put("url", url); //这个地址是传给页面使用 request.setAttribute("fenxurl", url); //开始微信分享链接签名 Map<String, String> params = weixinService.weixinjsIntefaceSign(map); request.setAttribute("params", params); return "自己的页面";
2.service层的实现代码
接口
public interface weixinService{ / @Title: weixinjsIntefaceSign @Description: 微信js接口授权 @param map @return @return: Map<String,String> / public Map<String,String> weixinjsIntefaceSign(Map<String,String> map);
接口实现类
public class weixinServiceImpl implements weixinService{ public Map<String, String> weixinjsIntefaceSign(Map<String, String> map){ //查看缓存数据是否存在 String cacheAess_token = jedis.get("aess_token"); String cacheTicket = jedis.get("ticket"); //取出来为空的话则说明cacheAess_token缓存过期,重新获取 if(null == cacheAess_token){ ///////////////////////////////start //获取cacheAess_token //这段代码实际开发过程中要写成一个方法,我这里为了演示方便写在了一起。 StringBuffer buffer = new StringBuffer(); buffer.append("https://api.weixin.qq./cgi-bin/token?"); buffer.append("appid="+map.get("appid")); buffer.append("&secret="+map.get("secret")); buffer.append("&grant_type=client_credential"); String resultMsg = SendUtils.sendGet(buffer.toString(), "UTF-8"); ///////////////////// end JSONObject json = new JSONObject(resultMsg); cacheAess_token = json.getString("aess_token"); jedis.set("aess_token",cacheAess_token, "NX", "EX", 3600);//单位是秒 } //取出来为空的话则说明cacheTicket缓存过期,重新获取 if(null == cacheTicket){ ////////////////////////// start ////获得jsapi_ticket StringBuffer buffer = new StringBuffer(); buffer.append("https://api.weixin.qq./cgi-bin/ticket/getticket?"); buffer.append("aess_token="+aess_token); buffer.append("&type=jsapi"); String ticket = SendUtils.sendGet(buffer.toString(), "UTF-8"); ///////////////////// end JSONObject json2 = new JSONObject(ticket); cacheTicket = json2.getString("ticket"); jedis.set("ticket",cacheTicket, "NX", "EX", 3600);//单位是秒 } //生成签名 SortedMap<Object,Object> params = new TreeMap<Object,Object>(); params.put("timestamp", Long.toString(new Date().getTime()/1000)); params.put("noncestr", this.CreateNoncestr()); params.put("jsapi_ticket",cacheTicket); params.put("url",map.get("url"));//url地址 StringBuffer sb = new StringBuffer(); Set es = params.entrySet(); Iterator it = es.iterator(); while(it.hasNext()) { Map.Entry entry = (Map.Entry)it.next(); String k = (String)entry.getKey(); Object v = entry.getValue(); sb.append(k + "=" + v + "&"); } String signStr = sb.toString().substring(0, sb.toString().length()-1); String sign = Sha1.getSha1Sign(signStr);//签名 Map<String, String> result = new HashMap<String,String>(); result.put("timestamp",(String)params.get("timestamp")); result.put("noncestr", (String)params.get("noncestr")); result.put("signature", sign); result.put("appId",map.get("appid")); return result; return null; } private String CreateNoncestr() { String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; String res = ""; for (int i = 0; i < 16; i++) { Random rd = new Random(); res += chars.charAt(rd.nextInt(chars.length() - 1)); } return res; } }
辅助工具类
/ 加密工具类 / public class Sha1 { public static String getSha1Sign(String decript) { try { MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1"); try { digest.update(decript.getBytes("UTF-8")); } catch (UnsupportedEncodingException e) { // TODO Auto-generated catch block e.printStackTrace(); } 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请求工具类
/ http请求工具类 / public class SendUtils { public static String sendGet(String url,String charset){ //新建客户端 HttpClient httpclient = new HttpClient(); GetMethod getMethod = new GetMethod(url); httpclient.getParams().setParameter(HttpMethodParams.HTTP_CONTENT_CHARSET, charset); httpclient.executeMethod(getMethod); String responseMsg = getMethod.getResponseBodyAsString(); return responseMsg; } }
以上是服务器端的微信签名的实现代码,狼蚁网站SEO优化介绍一下分享页面中js的编写。
第一步引入微信的js文件
<script src="https://res.wx.qq./open/js/jweixin-1.0.0.js"></script>
第二步
wx.config({ debug: false, appId: '${params.appId}', timestamp: '${params.timestamp}', nonceStr: '${params.noncestr}', signature:'${params.signature}', jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); wx.ready(function(){ wx.checkJsApi({ jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); wx.checkJsApi({ jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); /分享到朋友圈/ wx.onMenuShareTimeline({ title: '计划书', // 分享标题 desc: '保险让生活更美好!', // 分享描述 link: '${fenxurl}', // 分享链接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标 suess: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); /分享给朋友/ wx.onMenuShareAppMessage({ title: '计划书', // 分享标题 desc: '保险让生活更美好!', // 分享描述 link: '${fenxurl}', // 分享链接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标 type: 'link', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 suess: function () { // 用户确认分享后执行的回调函数 alert("您已分享"); }, cancel: function () { // 用户取消分享后执行的回调函数 alert('您已取消分享'); } }); wx.onMenuShareQQ({ title: '计划书', // 分享标题 desc: '保险让生活更美好!', // 分享描述 link: '${fenxurl}', // 分享链接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标 suess: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareWeibo({ title: '计划书', // 分享标题 desc: '保险让生活更美好!', // 分享描述 link: '${fenxurl}', // 分享链接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标 suess: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareQZone({ title: '计划书', // 分享标题 desc: '保险让生活更美好!', // 分享描述 link: '${fenxurl}', // 分享链接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标 suess: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); });
至此整个微信的整个分享开发完成,上面的这些js文件,都必须放在页面上。
到此这篇关于微信公众号网页分享功能开发的示例代码的文章就介绍到这了,更多相关微信公众号网页分享内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南