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

其他 2018-08-12 02:16:14 阅读次数: 0

想在微站里面实现分享帖子给朋友和朋友圈，显示图片和简介，就这么简单的功能折腾了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));
            }
        });
    });
}
复制代码

猜你喜欢

转载自blog.csdn.net/FireBird_one/article/details/80886016
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022