关键词：
大家好，我是雄雄。
前言
我们在分享公众号信息到微信或者群中的时候，会出现一个小卡片，如下所示：
但是呢，这种小卡片只能走微信的接口来实现，比如我们从公众号、小程序中分享的内容可以是这样的。如果我们将自己的博客分享到微信的话，只会出现个链接。
那么，试问一下你，分享出来个这样的链接，你会去点吗？会不会以为这就是个钓鱼链接。
今天，我们就来看看，如何将我们自己的站，搞一个和微信一样的分享卡片出来。
准备工作
- 注册一个公众号，该公众号需要能认证的（企业认证）
- 准备好你的站，前端展示的是
vue，别的可以自己对应的转换。 - 后端用
java实现的，别的语言自己转换一下即可。
请注意，公众号可以是订阅号，也可以是服务号，但是必须是需要企业可以认证的，个人虽然说有的也可以认证，但是没有调用分享接口的权限。
前端业务实现（超详细）
weixin-js-sdk帮助文档在这里，可以提现看看，免得后面看到之后，显得那么陌生~
帮助文档
下面我们来介绍一下实现步骤：
- 打开微信公众平台，在“公众号设置”的“功能设置”里填写“JS接口安全域名”。
不设置会被拦截，没法使用，大家可以仔细看看是如何设置的，第三点最重要：
- 在【基本配置】里面，配置一下你的
ip白名单，不设置没法获取access_token，没有toekn，一切都免谈。
3. 在vue项目中，安装weixin-js-sdk的依赖：
npm install weixin-js-sdk --save
- 在需要分享的
vue页面中写代码，先引入安装好的依赖。
// 引入wxjs
import wx from "weixin-js-sdk";
- 在
methods中实现分享的功能：
getShareInfo()
//获取url链接
var url = encodeURIComponent(window.location.href.split("#")[0]);
getSing(url).then(res =>
wx.config(
debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: parseInt(res.data.timestamp), // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData"
] // 必填，需要使用的 JS 接口列表
);
wx.ready(() =>
var shareData =
title: "每日新闻",
desc: "2022年12月20日21:47:55每日新闻",
link: window.location.href,
imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg"
;
//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData(shareData);
//自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(shareData);
);
//错误了会走 这里
wx.error(function (res)
console.log("微信分享错误信息", res);
);
);
,
代码说明：
url是我们要分享页面的链接，需要传递到后端进行加密签名（后端的代码我们待会儿看）getSing方法是后端进行签名的方法，安全起见，所有config初始化中的关键信息，都从后端往回拿。jsApiList是我们需要实现的功能的方法列表，逗号隔开。
- 在
created中调用一下getShareInfo方法：
// 调用分享的事件
this.getShareInfo();
前端内容就这些，下面我们看看后端做了哪些操作。
后端代码实现（超详细）
- 获取
token：为什么要获取token，微信公众号开发中，不管你做啥操作，都需要这个token，并且有效时间是7200s,也就是两个小时，两小时后就失效，下面是java中获取token的代码：
/**
* 获取access_token的值
* @return
*/
@GetMapping("/getToken")
public String getToken()
String token = "";
String path = "token?grant_type=client_credential&appid=" + APPID + "&secret=" + APPSECRET;
String body = HttpUtil.createGet(WX_GZH_API + path)
.execute()
.body();
log.info("获取了token,返回数据" + body);
JSONObject object = JSON.parseObject(body);
//获取token
token = object.getString("access_token");
//失效时间
String expires_in = object.getString("expires_in");
//将token值的值放在redis里面
redisService.setCacheObject("gzh_access_token", token,7190,TimeUnit.SECONDS);
return token;
WX_GZH_API ：
//公众号请求的地址
public static String WX_GZH_API = "https://api.weixin.qq.com/cgi-bin/";
APPID 和APPSECRET换成你自己的就行。
- 获取
api_ticket，这个是用在签名里面的，直接请求接口获取就行。
/**
* 获取jsapi_ticket
* @return
*/
@GetMapping("/getJsapiTicket")
public String getJsapiTicket()
//获取redis里面的token
Object access_token = redisService.getCacheObject("gzh_access_token");
if (access_token==null)
access_token = getToken();
String path = "ticket/getticket?access_token=" + access_token.toString() + "&type=jsapi";
String body = HttpUtil.createGet(WX_GZH_API + path)
.execute()
.body();
log.info("获取了JsapiTicket,返回数据" + body);
JSONObject object = JSON.parseObject(body);
//获取ticket
String ticket = object.getString("ticket");
//错误码
Integer errcode = object.getInteger("errcode");
if(errcode==0)
//将ticket值的值放在redis里面
redisService.setCacheObject("gzh_ticket", ticket,7190,TimeUnit.SECONDS);
return ticket;
这两个方法我都写了缓存，和是失效时间，并且在用的时候都会去判断缓存里面有没有值，没有的话，我们再去请求重新获取，而不是每次都请求获取，这样会造成接口请求频繁受到限制的问题。
- 开始签名：
/**
* 开始签名
*/
@GetMapping("/getSing")
public ResponseResult getSing(String url)
//从redis里面获取ticket
Object ticket = redisService.getCacheObject("gzh_ticket");
if(ticket==null)
ticket = getJsapiTicket();
Map<String, String> ret = WeChatUtils.sign(ticket.toString(), url);
JSONObject objectData = new JSONObject();
for (Map.Entry entry : ret.entrySet())
objectData.put(entry.getKey().toString(),entry.getValue());
objectData.put("appId", APPID);
return ResponseResult.success(objectData);
签名的几个工具类如下所示：
//******************************************
// 公众号网页开发
//******************************************
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 +
"×tamp=" + 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 | UnsupportedEncodingException e)
e.printStackTrace();
ret.put("url", url);
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);
加密签名接口请求如下：
然后我们就实现了，你试试你的可以不。
微信中如何实现app分享链接判断,实现在浏览器打开
由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，我想到的是做一个提示用户在浏览器中打开下载。其实原来很简单，就是判断当前是在微信内置浏览器中... 查看详情
h5分享微信小程序到朋友圈
参考技术A可以的，可以通过微信提供的分享API接口将H5页面的内容分享到微信小程序的朋友圈中。 查看详情
为啥苹果手机截图不能分享到微信？
...信。您好，苹果截图后可以进行分享，不少小伙伴们发现自己在进行分享的时候不知道怎么回事微信分享不了，想要知道为什么分享不了的，就让小编给大家详细的讲讲吧。苹果截图无法微信分享无法分享会出现发生异常，无法... 查看详情
h5页面微博里面打开怎样做分享到微信的功能
...家介绍几个招式：招式一图文消息底部输入添加阅读原文链接，用户点击左下角阅读原文可以跳转到指定场景页面（要求：认证的订阅号、）Step1点击群发功能Step2新建图文消息Step3编辑图文消息，在“原文链接”处设置需要展示... 查看详情
坑！vue.js在ios9中失效
坑！vue.js在ios9中失效！ 接到实现，在移动端生成一个分享链接，分享到微信，在微信中打开，加入！ 好，用vue实现----------------------->写代码-------------------------->测试------------------------------>没有问题----------------... 查看详情
总结：活动类开发必知必会
...信好友，客户端能力[]APP不支持上面两种方式，则分享H5链接[]航班管家小程序[]小程序内支付方式/逻辑[]小程序分享[]分享图片到微信朋友圈，canvas生成自定义图片[]分享小程序给微信好友，onShareAppMessage[]推送小程序消息[]H5[]H5支... 查看详情
微信小程序链接怎么做？
...点击该链接将小程序分享给微信中的好友或者是好友群，实现小程序的传播。 3、智能名片链接 在设置链接地址处，点击智能名片，即可以设置名片链接，让用户通过点击名字就能跳转到名字所对应的详情页面去，了解... 查看详情
html5页面打开微信并分享
...击链接使用微信客户端打开原网页。====分享功能已经能实现了。但是前提是在微信客户端下。我是要在一个别的软件打开的页面来实现这个功能的（第一步：使用微信客户端打开页面；第二步：分享并实现分享后的操作。第二... 查看详情
将内容分享到社交平台
...质内容分享到社交平台，让更多用户了解，目前已经成为网站，App，微信公众号等必备的功能，本文搜集了常见的分享js代码，供查阅参考。1.分享到微信，易信分享到微信，易信比较简单，贴上分享链接的二维码就可以了。二... 查看详情
详谈ccjump如何通过代码实现微信h5页面跳转浏览器在微信中点击链接直接跳转到手机默认浏览器
前言 现如今微信对第三方推广链接的审核是越来越严格了，域名在微信中分享转发经常会被拦截，一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问，要不然就是换个域名再推，周而复始。无论是哪一种情况都会... 查看详情
微信jssdk实现分享到微信
本来用的是这个插件http://overtrue.me/share.js/和百度分享相同之处：在微信分享的时候，分享的链接都不能获取到缩略图。。。不同之处：百度分享在微信低版本是可以看到缩略图的（但是一点用都没有，不过还是要说一下）这两... 查看详情
微信h5怎么做微信h5做的方法
...点击右方的【背景图片】区域，可以弹出背景素材库，为自己制作的文案选择漂亮的背景，除此之外，也可以自己上传漂亮的图片作为背景。7、点击右边菜单栏里的【音乐】，【文字】等功能选项，可以在制作的场景里添加音... 查看详情
小程序外部链接怎么分享
参考技术A小程序外部链接通过分享给用户，让他们可以直接打开小程序，提高小程序的曝光度和用户粘性。一般来说，在小程序的页面中，可以找到分享按钮，点击后可以选择将链接分享到微信、朋友圈、QQ、微博等平台。如果... 查看详情
h5与小程序数据交互
参考技术A 功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。 采用小程序webv... 查看详情
在微信网站的h5页面中怎么实现关注公众号
...站（这个时候好友还没有关注这个公众号）怎么在页面上实现关注公众号（不跳转到微信公众号页面情况下）参考技术A微信已经禁止了通过网页直接关注公众号，只能跳转到公众号页面。用户选择关注该公众号。 参考技术BH5的... 查看详情
微信小程序和h5之间互相跳转互相传值(代码片段)
...c;来回交互；这里记录一下微信小程序和H5之间交互的实现；（我的小程序是通过un-app框架来写的，内部代码基本都是vue）文章目录一、微信小程序跳转H51、web-view二、H5跳微信小程序1、H5直接跳到微信小程序2... 查看详情
如何把html5页面发送到微信
...址即可；3.可以在微信平台通过文字或链接跳转的形式，实现html5页面的转换。参考技术A我觉得题主问的是，如何把制作好的H5页面使用微信传播推广出去吧，H5页面是一个网页，因此有一个链接和二维码。建议你这样试试看：&nb... 查看详情
微信公众号输入关键字后返回一个h5分享链接怎么实现？
微信公众号输入关键字后返回一个H5分享链接怎么实现，就像这个图片上的效果，比如输入关键字“123”，返回一个带样式的分享链接，而不是单纯的一个URL字符串；参考技术A在微信公众号自动回复栏目的关键词回复设置相关关... 查看详情