微信分享链接用什么工具做(微信分享链接自己实现为卡片形式以及调试)
微信分享链接用什么工具做(微信分享链接自己实现为卡片形式以及调试)
2024-11-06 05:10:25  作者:失去了嗅觉  网址:https://m.xinb2b.cn/life/rhh365167.html
一,微信分享概述

有时候我们需要微信分享内容,尤其是一个链接,但是呢,分享后希望看到的是下面的样式,就是一种卡片的形式,不希望看到的是一种链接的形式,只有一个标题,这样会让人产生误解,不敢点击,所以,卡片的形式是为了希望看到比较友好的效果,这个就需要借助微信平台公众号来实现

希望的:


目前的:


二,实现思路

公众号配置js域名和白名单

写一个静态页面,用于分享的页面

后端返回签名数据

1,注册公众号,并设置公众号的js域名以及IP白名单(就是获取签名的ticket的时候,调用的服务器)



2,公众号的js文档

文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html


2.1:绑定域名

见1

2.2:引入js文件

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

vue 直接安装就可以:npm install weixin-js-sdk

2.3:配置公众号的数据

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

2.4:分享执行

wx.ready(function (){ wx.onMenuShareAppMessage({ //需在用户可能点击分享按钮前就先调用 title: "test", // 分享标题 desc: "test分享,用于查看内容", // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 链接 success: ()=> { // 设置成功 console.log("分享好友设置成功"); } }) alert('已注册获取“发送给朋友”状态事件'); });

三,具体代码1,后端返回ticket

先调用微信接口获取token,然后根据token获取到ticket,然后根据ticket 获取签名

public class WeChatSignatureUtils { public static String TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token"; public static String TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";//获取签名 public static WeChatSignatureDTO sign(String jsapiTicket, String url) { String nonce_str = create_nonce_str(); String timestamp = create_timestamp(); WeChatSignatureDTO weChatSignatureDTO = new WeChatSignatureDTO(); //注意这里参数名必须全部小写,且必须有序 String string1 = "jsapi_ticket=" jsapiTicket "&noncestr=" nonce_str "×tamp=" timestamp "&url=" url; try { MessageDigest crypt = MessageDigest.getInstance("SHA-1"); crypt.reset(); crypt.update(string1.getbytes("UTF-8")); weChatSignatureDTO.setNonceStr(nonce_str); weChatSignatureDTO.setTimestamp(timestamp); weChatSignatureDTO.setSignature(byteToHex(crypt.digest())); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } return weChatSignatureDTO; }//获取ticket 一般要进行缓存 public static String getTicket(String appId, String secret) { log.info("getTicket appId:{},secret:{}", appId, secret); String tokenUrl = TOKEN_URL "?grant_type=client_credential&appid=" appId "&secret=" secret; JSONObject jsonObject = sendGet(tokenUrl); String accessToken = jsonObject.getString("access_token"); String ticketUrl = TICKET_URL "?access_token=" accessToken "&type=jsapi"; JSONObject ticketResponse =sendGet(ticketUrl); return ticketResponse.getString("ticket"); }//发送get请求 public static JSONObject sendGet(String url) { try { DefaultHttpClient httpClient = new DefaultHttpClient(); HttpGet httpGet = new HttpGet(url); // 设置请求的Header httpGet.addHeader("Content-Type", "application/json;charset=utf-8"); // 执行请求 HttpResponse response = httpClient.execute(httpGet); // 打印执行结果 JSONObject jsonObject = JSONObject.parseObject(EntityUtils.toString(response.getEntity(), "utf-8")); log.info("sendGetUrl:{}, sendGetResult:{}",url, JSON.toJSONString(jsonObject)); return jsonObject; } catch (Exception e) { e.printStackTrace(); } } private static String byteToHex(final byte[] hash) { Formatter formatter = new Formatter(); for (byte b : hash) { formatter.format("x", 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); }}

2,获取签名返回数据

public WeChatSignatureDTO getWechatSignature(WeChatSignatureParam param) { //获取ticket String verifyKey = Constants.JSAPI_TICKET_KEY; String jsapiTicket = redisService.getCacheObject(verifyKey); if (StringUtils.isBlank(jsapiTicket)) { jsapiTicket = WeChatSignatureUtils.getTicket(config.getDzsAppId(), config.getDzsSecret()); if (StringUtils.isBlank(jsapiTicket)) { throw new ServiceException("获取签名失败"); } redisService.setCacheObject(verifyKey, jsapiTicket, 7100L, TimeUnit.SECONDS); } WeChatSignatureDTO result = WeChatSignatureUtils.sign(jsapiTicket, param.getUrl()); result.setAppId(config.getDzsAppId()); result.setImgUrl(config.getDzsImgUrl()); return result; }

public class WeChatSignatureDTO implements Serializable { private String nonceStr; private String timestamp; private String signature; private String appId; private String imgUrl; public String getNonceStr() { return nonceStr; } public void setNonceStr(String nonceStr) { this.nonceStr = nonceStr; } public String getTimestamp() { return timestamp; } public void setTimestamp(String timestamp) { this.timestamp = timestamp; } public String getSignature() { return signature; } public void setSignature(String signature) { this.signature = signature; } public String getAppId() { return appId; } public void setAppId(String appId) { this.appId = appId; } public String getImgUrl() { return imgUrl; } public void setImgUrl(String imgUrl) { this.imgUrl = imgUrl; }}

public class WeChatSignatureParam implements Serializable { //这个url要和分享的页面link保持一致 private String url; public String getUrl() { return url; } public void setUrl(String url) { this.url = url; }}

3,前端代码

<template> <div class="app-container">system </div></template><script>import wx from 'weixin-js-sdk'import { getSignature } from '@/api/login'export default { name: "Secret", data() { return { info: {} }; }, created() { var res = await getSignature(); if (res.code === 200) { var da = res.data; this.info = res.data; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: da.appId, // 必填,公众号的唯一标识 timestamp: da.timestamp, // 必填,生成签名的时间戳 nonceStr: da.nonceStr, // 必填,生成签名的随机串 signature: da.signature,// 必填,签名 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage'], // 必填,需要使用的JS接口列表 }); //然后 调用wxShare方法 this.wxShare(); }, methods: { wxShare() { console.log("wxShare begin") //通过ready接口处理成功验证 ,通过error接口处理失败验证 wx.ready(function (){ wx.updateAppMessageShareData({ //需在用户可能点击分享按钮前就先调用 title: "test", // 分享标题 desc: "test分享,用于查看内容", // 分享描述 link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: this.info.imgUrl, // 分享图标 success: ()=> { console.log("wxShare end") // 设置成功 console.log("分享好友设置成功"); } }) }); }}};</script>

四,注意事项

1,前端的link必须是和后端传入获取签名的url 一致

2,分享的页面和link传入的url一致

3,分享链接需要从公众号种分享或者生成二维码进行分享

4,对ticket需要进行缓存,因为7200s换一次

5,绑定的域名一定要和分享的url的域名一致

6,调试可以使用微信开发者工具


https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html

7,先配置验证签名,然后点击分享的时候会调用分享的数据设置,这个微信会缓存数据的

五,开发者大概流程

1,获取签名

2,使用微信js-sdk调用配置和分享方法即可

  • 重庆租赁货车跑货骗局(男子约好货拉拉去取货)
  • 2024-11-06男子约好货拉拉去取货来源|都市现场(jxtvdsxc)原创发布非经允许请勿转载如删除来源必究9月1日下午,南昌市民孙先生在网上找人买了两辆电动车,约定好找货拉拉去接车谁知道,这车没等来,接下来发生的事,却让孙先生直发懵当。
  • 十二星座古风名字女三字(十二星座古风名字女三字介绍)
  • 2024-11-06十二星座古风名字女三字介绍白羊座:宛如歌宛如歌,热情乐观,音色动听,人生宛如一首嘹亮的歌,就像白羊的明艳动人,单纯简单,而且不拘小节,对生活总是充满了热情和渴望金牛座:庄默羽庄默羽,代表了庄重和沉默,就像金牛一样沉稳,不轻易吐。
  • 十宗罪1结局凶手是谁(十宗罪1简介)
  • 2024-11-06十宗罪1简介十宗罪1结局凶手是驼儿爸妈《十宗罪》是蜘蛛写的一本小说该小说有着内容震撼的角色安排,四个超级警察,各怀绝技,从全国警察队伍中挑选而出,对各地发生的特大罪案进行侦破绝对震撼的角色安排,四个超级警察,各怀。
  • 范雎是否真有才能(范雎危险人物)
  • 2024-11-06范雎危险人物听过MichaelJackson的那首Dangerous吗?那优美的音色,那紧张的旋律,让人心惊肉跳,我最开始听的时候是起了一身鸡皮疙瘩的现在我才明白,歌曲所说的危险人物,其实就是个女孩儿可见搞文艺的。
  • 比较好用耐用的插排(安全可靠的插排什么样)
  • 2024-11-06安全可靠的插排什么样身为一个插排控,插排永远缺一个譬如我的桌子周围一米之内,便有6-7个插排即使再多上些,也不会显得多出多少所以,趁着有优惠,就再来一个吧别看插排小,但关系到家里的安全,无论是人身安全还是家庭财产安全,因。
  • 手机号拍卖480万(拍卖成功黑龙江省)
  • 2024-11-06拍卖成功黑龙江省阅读前请点击“关注”每天更新司法拍卖文章,让您不错过任何一次捡漏的机会拍卖成功!手机吉祥号码131XXXX3456,在淘宝阿里司法拍卖平台拍卖成交成交时间:2020/05/1010:00:00参与人数。
  • 黑枸杞为啥比红枸杞卖得贵(黑枸杞为什么比红枸杞卖得贵)
  • 2024-11-06黑枸杞为什么比红枸杞卖得贵网友提问:最近有老友去外地出差,给我带回来一小袋东西,神秘兮兮地跟我说那是“软黄金”,打开来一看,原来是黑枸杞……还说红枸杞比起黑枸杞,差远了,因为黑的含有很丰富的花青素请问,黑枸杞真的那么有营养吗?。
  • 普惠制幼儿园发展瓶颈(普惠不能成普亏)
  • 2024-11-06普惠不能成普亏光明网评论员:近日,山东省青岛市教育局公开了一批对市十六届人大五次会议建议的回复数封来自青岛市人大代表的建议反映了疫情后普惠幼儿园生存之艰难的情形:财政补贴不足、教师流失、发展难以为继……据当地办学者。
  • 坐火车卧铺要不要把头对着睡(坐卧铺时的这些)
  • 2024-11-06坐卧铺时的这些出门在外,离开不了交通工具,也会遇到很多形形色色的人群,因为人和人之间的性格,爱好等有所差异,所以别人的说话甚至做事,总会看的不太“习惯”以至于有时候难免会闹出笑话,其实这样的场景更多发生在火车上,毕。
  • 老公坚持怀孕生孩子(我妈用尽各种手段想生男孩)
  • 2024-11-06我妈用尽各种手段想生男孩我妈用尽各种手段想生男孩,终于怀孕后,全家都哄着她她以为婚姻有救了只有我,在一个又一个邪恶的念头中日渐扭曲……1我妈跳楼了尸体周边围满了人,七嘴八舌地讨论着原因我爸在忙着跟外婆狡辩:「我真没做对不起她。
  • 正切函数性质例题(类题通法5.4.2正弦函数)
  • 2024-11-06类题通法5.4.2正弦函数一、求与三角函数有关的函数定义域的方法求与三角函数有关的函数的定义域的基本方法是“数形结合法”,也就是在求这类函数的定义域时,往往需要解有关的三角不等式(如本例中的“sinx>-1/2”),而解。
  • 高帽子的意思(高帽子指的是什么)
  • 2024-11-06高帽子指的是什么恭维的话戴高帽子是一个俗语,通常把当面奉承让人高兴的话叫做“喜欢戴高帽”,讽刺了一些所谓的“师者”对阿谀奉承也难以抵御的社会现实出处:《北史·儒林传下·熊安生》:“道晖好着高翅帽、大屐,州将初临,辄服。