必威体育Betway必威体育官网
当前位置：首页 > IT技术

微信分享功能（分享到朋友和朋友圈显示图片和简介）

时间:2019-09-18 05:40:00来源:IT技术作者:seo实验室小编阅读:88次「手机版」
　

分享到

想在微站里面实现分享帖子给朋友和朋友圈，显示图片和简介，就这么简单的功能折腾了1星期。。。主要是微信官方文档没看清楚，怪自己了。

官方文档在这里，https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

参考 http://www.cnblogs.com/stoneniqiu/p/6286599.html 这篇文章。

遇到invalid signature签名错误。找了半天，各种调试，终于找到问题了，每个新闻的id是变动的，

url需要传入完整的地址，在微信官方手册里面查到的。

比如页面是http://www.baidu.com/wx.aspx?id=111,需要完整传入，不能仅仅在url里面传入http://www.baidu.com/wx.aspx

下面是 stoneniqiu  的具体做法，大家可以参考一下。

内嵌在微信中的网页，右上角都会有一个默认的分享功能。如下图所示，第一个为自定义的效果，第二个为默认的效果。实现了自定义的分享链接是不是更让人有点击的欲望？下面讲解下开发的过程。

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

这需要使用微信的jssdk，先需要在微信公众号后台进行设置：公众号设置-->功能设置-->JS接口安全域名。打开这个页面之后你会看到下面的提示。需要先下载这个文件并上传到指定域名的根目录。

这个文件里面是一个字符串，从名称看是用来校验用的。先上传了这个文件，你才能保存成功。这样你就可以使用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.warmwood.com/home/lampindex', // 分享链接
            imgUrl: 'http://www.warmwood.com/images/s1.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<TokenResult>(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<jsapiTicketModel>(accessToken, url, "", CommonJsonSendType.GET);
        }

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

 private void setcacheTicket(string cache)
        {
            _cacheManager.Set(tokenKey, cache, 7200);
        }

MemoryCacheManager：

View Code

3.签名

终于到这一步了，然后你在文档中看到让你失望的一幕：

么有C#的demo，支付那边都提供了，为啥jssdk没有提供，好吧先不吐槽了。官方也说明白签名的规则。一开始我使用的是https://github.com/night-king/weixinSDK中的签名：

复制代码

复制代码

 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各种操作结果。参数正确之后界面会提示：

至此，分享的功能就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

我的核心代码

复制代码

[System.Web.Services.WebMethod]
    public static WXShareModel GetKey(string str)
    {
        WXShareModel aModel = new WXShareModel();
        WXToolsHelper tb = new WXToolsHelper();
        string AppId = "你的APPID";
        string secret = "你的secret";
        string access_token = tb.GetAccess_Token(AppId, secret);
        aModel.appId = AppId;
        aModel.nonceStr = tb.CreatenNonce_str();
        aModel.timestamp = tb.CreatenTimestamp();
        aModel.ticket = tb.GetTicket(access_token);
        aModel.url = str;
        aModel.MakeSign();
        return aModel;
    }
public class WXShareModel
    {
        public string appId { get; set; }
        public string nonceStr { get; set; }
        public long timestamp { get; set; }
        public string ticket { get; set; }
        public string url { get; set; }
        public string signature { 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 = Sha1(string1, Encoding.Default);
        }
 public static string Sha1(string orgStr, Encoding encode)
        {
            SHA1CryptoServiceProvider 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;
        }
public class WXToolsHelper
    {
        /// <summary>
        /// 获取全局的access_token,程序缓存
        /// </summary>
        /// <param name="AppId">第三方用户唯一凭证</param>
        /// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
        /// <returns>得到的全局access_token</returns>
        public string GetAccess_Token(string AppId, string AppSecret)
        {
            try
            {
                //先查缓存数据
                if (Httpcontext.Current.Cache["access_token"] != null)
                {
                    return HttpContext.Current.Cache["access_token"].ToString();
                }
                else
                {
                    return GetToken(AppId, AppSecret);
                }
            }
            catch
            {
                return GetToken(AppId, AppSecret);
            }
        }

        /// <summary>
        /// 获取全局的access_token
        /// </summary>
        /// <param name="AppId">第三方用户唯一凭证</param>
        /// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
        /// <returns>得到的全局access_token</returns>
        public string GetToken(string AppId, string AppSecret)
        {
            var client = new System.Net.WebClient();
            client.Encoding = System.Text.Encoding.UTF8;
            var url = string.Format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}", AppId, AppSecret);
            var data = client.DownloadString(url);
            var jss = new javaScriptserializer();
            var access_tokenMsg = jss.Deserialize<Dictionary<string, object>>(data);
            //放入缓存中
            HttpContext.Current.Cache.Insert("access_token", access_tokenMsg["access_token"], null, DateTime.Now.AddSeconds(7100), timespan.Zero, CacheItempriority.Normal, null);

            //清除jsapi_ticket缓存
            HttpContext.Current.Cache.Remove("ticket");

            //获取jsapi_ticket,为了同步
            GetTicket(access_tokenMsg["access_token"].ToString());

            return access_tokenMsg["access_token"].ToString();
        }


        /// <summary>
        /// 获取jsapi_ticket,程序缓存
        /// </summary>
        /// <param name="access_token">全局的access_token</param>
        /// <returns>得到的jsapi_ticket</returns>
        public string GetJsapi_Ticket(string access_token)
        {
            try
            {
                //先查缓存数据
                if (HttpContext.Current.Cache["ticket"] != null)
                {
                    return HttpContext.Current.Cache["ticket"].ToString();
                }
                else
                {
                    return GetTicket(access_token);
                }
            }
            catch
            {
                return GetTicket(access_token);
            }
        }


        /// <summary>
        /// 获取jsapi_ticket
        /// </summary>
        /// <param name="access_token">全局的access_token</param>
        /// <returns>得到的jsapi_ticket</returns>
        public string GetTicket(string access_token)
        {
            var client = new System.Net.WebClient();
            client.Encoding = System.Text.Encoding.UTF8;
            var url = string.Format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi", access_token);
            var data = client.DownloadString(url);
            var jss = new JavaScriptSerializer();
            var ticketMsg = jss.Deserialize<Dictionary<string, object>>(data);
            try
            {
                //放入缓存中
                HttpContext.Current.Cache.Insert("ticket", ticketMsg["ticket"], null, DateTime.Now.AddSeconds(7100), TimeSpan.Zero, CacheItemPriority.Normal, null);
                return ticketMsg["ticket"].ToString();
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
        }

        /// <summary>
        /// 微信权限签名的 sha1 算法
        /// 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同
        /// </summary>
        /// <param name="jsapi_ticket">获取到的jsapi_ticket</param>
        /// <param name="noncestr">生成签名的随机串</param>
        /// <param name="timestamp">生成签名的时间戳</param>
        /// <param name="url">签名用的url必须是调用JS接口页面的完整URL</param>
        /// <returns></returns>
        public string GetShal(string jsapi_ticket, string noncestr, long timestamp, string url)
        {
            string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
            return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
        }

        /// <summary>
        /// 微信权限签名( sha1 算法 )
        /// 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同
        /// </summary>
        /// <param name="AppId">第三方用户唯一凭证</param>
        /// /// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
        /// <param name="noncestr">生成签名的随机串</param>
        /// <param name="timestamp">生成签名的时间戳</param>
        /// <param name="url">签名用的url必须是调用JS接口页面的完整URL</param>
        /// <returns></returns>
        public string Get_Signature(string AppId, string AppSecret, string noncestr, long timestamp, string url)
        {
            string access_token = GetAccess_Token(AppId, AppSecret); //获取全局的access_token
            string jsapi_ticket = GetJsapi_Ticket(access_token); //获取jsapi_ticket

            string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
            return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
        }


        /// <summary>
        /// 微信权限签名( sha1 算法 )
        /// 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同
        /// </summary>
        /// <param name="AppId">第三方用户唯一凭证</param>
        /// /// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
        /// <param name="noncestr">生成签名的随机串</param>
        /// <param name="timestamp">生成签名的时间戳</param>
        /// <param name="url">签名用的url必须是调用JS接口页面的完整URL</param>
        /// <returns></returns>
        public void signatureOut(string AppId, string AppSecret, string noncestr, long timestamp, string url, out string access_token, out string jsapi_ticket, out string signature)
        {
            access_token = GetAccess_Token(AppId, AppSecret); //获取全局的access_token

            jsapi_ticket = GetJsapi_Ticket(access_token); //获取jsapi_ticket

            string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);

            signature = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
        }

        private string[] strs = new string[]
{
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
};
        /// <summary>
        /// 创建随机字符串 
        /// </summary>
        /// <returns></returns>
        public string CreatenNonce_str()
        {
            Random r = new Random();
            var sb = new StringBuilder();
            var length = strs.Length;
            for (int i = 0; i < 15; i++)
            {
                sb.Append(strs[r.Next(length - 1)]);
            }
            return sb.ToString();
        }


        /// <summary>
        /// 创建时间戳 
        /// </summary>
        /// <returns></returns>
        public long CreatenTimestamp()
        {
            return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
        }


    }

复制代码

前段调用

复制代码

var strUrl = location.href.split('#')[0];
$.ajax({
    type: "Post",
    url: "config.aspx/GetKey",
    //方法传参的写法一定要对，strUrl为形参的名字    
    data: "{'str':'" + strUrl + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        //返回的数据用data.d获取内容    
        $("#wx-share-sign").val(data.d.signature);
        wxconifg(data.d);
    },
    ERROR: function (err) {
        alert('55');
    }
});
function wxconifg(WXDate) {
    wx.config({
        debug: false,
        appId: '你的APPID',
        timestamp: WXDate.timestamp,
        nonceStr: WXDate.nonceStr,
        signature: WXDate.signature,
        jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"]
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: $("#wx-share-title").val(),
            desc: $("#wx-share-desc").val(),
            link: strUrl,
            imgUrl: $("#wx-share-img").val(),
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: 'XX新闻|'+$("#wx-share-desc").val(),
            desc: $("#wx-share-desc").val(),
            link: $("#wx-share-link").val(),
            imgUrl: $("#wx-share-img").val(),
            type: 'link',
            dataUrl: strUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    });
}

复制代码

相关阅读

微信公众号怎么生成带参数二维码的粉丝裂变海报？

作为微信公众号运营者，你可能没有做过裂变活动，但是你的朋友圈肯定出现过这种裂变活动，很多微信公众号都通过裂变海报获得了可观的流

从业多年 这些网络推广经验想和大家分享

网络推广相比于互联网的其他职业来说门槛较低，而且任何一个网站都需要网络推广，所以做好了网络推广就不怕找不到工作。在我看来，一个

经验分享：番茄花园洪磊和好友关于论坛推广盈利聊天录音

入网络卡无法观看请点这里番茄花园版Windows XP作者洪磊(新浪科技配图)独家爆料郑朝辉和洪磊在苏州的谈话录音新浪科技讯 8月21

【旭飞移民分享会】应对CRS的终极解决方案在这里！

【邀请函】灵活配置海外身份，合理规避全球征税CRS专题分享会时间：2017年5月10日(周三)14：30&mdash;17：00地点：中信银行双流支行贵宾厅(

微信语音被克隆 没想到朋友圈也能“克隆”！

A5创业网（公众号：iadmin5）11月19日报道，众所周知，微信聊天记录中，语音是无法转发给别人的，但近日出现一场骗局，语音竟然可以转发实施诈骗，

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图