如何实现微信分享的预览图和简介 | 微信开发

微信的分享功能,从2017年中旬开始做了JSSDK验证限制。现在未通过JSSDK验证的站点,在分享时无法显示缩略图和简介。本文提供可实现本功能的方法,欢迎交流学习。
27914471 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发
上图中,第一条微信是未通过验证后分享的状态,第二条是通过后的状态。可以看出,认证后明显对用户更友好,让人更有阅读欲望。

方法1.使用插件快速实现开发

在WordPress下有一款叫做自定义微信分享的插件,链接如下:
https://wordpress.org/plugins/wx-custom-share/
该插件支持对微信朋友圈/链接分享的分享标题、预览图和简介进行完全自定义。但有两个要求:
1.站长必须拥有微信公众平台开发者的AK和SK,注意AK和SK只有认证的公众号才能获取。
2.链接域名必须是微信公众平台安全与名,设置要求同上。
74804660 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发
33047421 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发
有如上的基本配置,在插件内进行简单设置即可实现微信分享缩略图和简介的功能。

方法2.使用开发者工具进行开发

本文部分转载。
微信官方文档:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
微信官方JS地址:http://res.wx.qq.com/open/js/jweixin-1.2.0.js

一、准备,设置js接口安全域名

这需要使用微信的jssdk,先需要在微信公众号后台进行设置:公众号设置–>功能设置–>JS接口安全域名。打开这个页面之后你会看到下面的提示。需要先下载这个文件并上传到指定域名的根目录。
28331043 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发
这个文件里面是一个字符串,从名称看是用来校验用的。先上传了这个文件,你才能保存成功。这样你就可以使用jssdk了。

二、前端配置

首先要说明的是分享功能是一个配置功能,绑定在按钮的click事件中是没有效果的。也就是说只有点击右上角的分享才有效果(有的文字内容分享不知道是怎么实现的)。官方的js有四个步骤,首先是引入jssdk:

  • <script src=”http://res.wx.qq.com/open/js/jweixin-1.1.0.js”></script>

根据官方的配置参数,我们可以定义一个WXShareModel对象:

  • public class WXShareModel
    {
    public string appId { get; set; }
    public string nonceStr { get; set; }
    public long timestamp { get; set; }
    public string signature { get; set; }
    public string ticket { get; set; }
    public string url { get; set; }
    public void MakeSign()
    {
    var string1Builder = new StringBuilder();
    string1Builder.Append(“jsapi_ticket=”).Append(ticket).Append(“&”)
    .Append(“noncestr=”).Append(nonceStr).Append(“&”)
    .Append(“timestamp=”).Append(timestamp).Append(“&”)
    .Append(“url=”).Append(url.IndexOf(“#”) >= 0 ? url.Substring(0, url.IndexOf(“#”)) : url);
    var string1 = string1Builder.ToString();
    signature = Util.Sha1(string1, Encoding.Default);
    }
    }

然后是进行配置:

  • wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: ‘@Model.appId’, // 必填,公众号的唯一标识
    timestamp: ‘@Model.timestamp’, // 必填,生成签名的时间戳
    nonceStr: ‘@Model.nonceStr’, // 必填,生成签名的随机串
    signature: ‘@Model.signature’,// 必填,签名,见附录1
    jsApiList: [“checkJsApi”, “onMenuShareTimeline”, “onMenuShareAppMessage”, “onMenuShareQQ”, “onMenuShareQZone”] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
  • wx.ready(function () {
    document.querySelector(‘#checkJsApi’).onclick = function () {
    wx.checkJsApi({
    jsApiList: [
    ‘getNetworkType’,
    ‘previewImage’
    ],
    success: function (res) {
    alert(JSON.stringify(res));
    }
    });
    };
    //朋友圈
    wx.onMenuShareTimeline({
    title: ‘卡米雷特的小站’, // 分享标题
    link: ‘http://www.warmwood.com/home/lampindex’, // 分享链接
    imgUrl: ‘http://www.warmwood.com/images/s1.jpg’,
    success: function (res) {
    alert(‘已分享’);
    },
    cancel: function (res) {
    alert(‘已取消’);
    },
    fail: function (res) {
    alert(JSON.stringify(res));
    }
    });
    //朋友
    wx.onMenuShareAppMessage({
    title: ‘卡米雷特的小站’, // 分享标题
    desc: 一个视觉控的自我修养’, // 分享描述
    link: ‘http://www.kamilet.cn’, // 分享链接
    imgUrl: ‘http://www.kamilet.cn/wp-content/uploads/cropped-kamilet_logo.jpg’, // 分享图标
    type: ”, // 分享类型,music、video或link,不填默认为link
    dataUrl: ”, // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
    // 用户确认分享后执行的回调函数
    alert(“分享”);
    },
    cancel: function () {
    // 用户取消分享后执行的回调函数
    alert(“取消分享”);
    }
    });
    });

然后剩下就是后端的事情了。后端的关键是获取access_token和jsapi_ticket以及生成正确的签名。另外如果要统计分享的数量,最好就是在success方法中进行统计了。

三、生成签名

1.access_token

获取access_token方法全平台都是一致的。

 

  • public const string AccessTokenUrl = “https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}”;
  • public TokenResult GetAccessToken()
    {
    var url = string.Format(WxDeviceConfig.AccessTokenUrl, WxDeviceConfig.AppId, WxDeviceConfig.APPSECRET);
    var res = SendHelp.Send(null, url, null, CommonJsonSendType.GET);
    return res;
    }

access_token的超时时间是7200秒,所以先可以缓存起来。SendHelp文章末尾可下载
2.获取jsapi_ticket

access_token的作用就是为了获取jsapi_ticket。用get方式获取,url:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi,返回的JSON对象如下。


  • {
    “errcode”:0,
    “errmsg”:”ok”,
    “ticket”:”bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA”,
    “expires_in”:7200
    }

所以可以定义一个模型:

  • public class jsapiTicketModel
    {
    public string errcode { get; set; }
    public string errmsg { get; set; }
    public string ticket { get; set; }
    public string expires_in { get; set; }
    }

再完成获取ticket的方法:

  • public jsapiTicketModel GetJsApiTicket(string accessToken)
    {
    var url = string.Format(WxPayConfig.Jsapi_ticketUrl, accessToken);
    return SendHelp.Send(accessToken, url, “”, CommonJsonSendType.GET);
    }

ticket过期时间也是7200秒,并且不能频繁的请求,所以也需要再服务端缓存起来。

  • private void setCacheTicket(string cache)
    {
    _cacheManager.Set(tokenKey, cache, 7200);
    } MemoryCacheManager:
    View Code

3.签名

终于到这一步了,然后你在文档中看到让你失望的一幕:
8385190 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发
么有C#的demo,支付那边都提供了,为啥jssdk没有提供,好吧先不吐槽了。官方也说明白签名的规则。一开始我使用的是https://github.com/night-king/weixinSDK中的签名:
28331043 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发

  • public static string Sha1(string orgStr, string encode = “UTF-8”)
    {
    var sha1 = new SHA1Managed();
    var sha1bytes = System.Text.Encoding.GetEncoding(encode).GetBytes(orgStr);
    byte[] resultHash = sha1.ComputeHash(sha1bytes);
    string sha1String = BitConverter.ToString(resultHash).ToLower();
    sha1String = sha1String.Replace(“-“, “”);
    return sha1String;
    }//错误示例

得出的结果和官方校验的不一致,一直提示签名错误。

正确的写法是:

  • public static string Sha1(string orgStr, Encoding encode)
    {
    SHA1 sha1 = new SHA1CryptoServiceProvider();
    byte[] bytes_in = encode.GetBytes(orgStr);
    byte[] bytes_out = sha1.ComputeHash(bytes_in);
    sha1.Dispose();
    string result = BitConverter.ToString(bytes_out);
    result = result.Replace(“-“, “”);
    return result;
    }

和官方校验的结果一直后,就ok了(忽略大小写)。另外一个需要注意的地方是签名中的url。如果页面有参数,model中的url也需要带参数,#号后面的不要。不然也是会报签名错误。

  • public ActionResult H5Share()
    {
    var model = new WXShareModel();
    model.appId = WxPayConfig.APPID;
    model.nonceStr = WxPayApi.GenerateNonceStr();
    model.timestamp = Util.CreateTimestamp();
    model.ticket = GetTicket();
    model.url = “http://www.warmwood.com/AuthWeiXin/share”;// domain + Request.Url.PathAndQuery;
    model.MakeSign();
    Logger.Debug(“获取到ticket:” + model.ticket);
    Logger.Debug(“获取到签名:” + model.signature);
    return View(model);
    }

四、小结

wx.config中的debug为true会alert各种操作结果。参数正确之后界面会提示:
95777901 - reprinted, weibo, sharing - 如何实现微信分享的预览图和简介 | 微信开发
至此,分享的功能就ok了。也就打开了调用其他jssdk的大门。另外文中的SendHelp对象是用的Senparc (基于.net4.5)的dll。

参考资料:

签名校验:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
官方文档:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注