微信自定义分享功能实现Tips

以MVC为例

前台js通过.post()方法传给后台特定Controller当前页面的url，后台获取后，进行处理：

1.获取access_token:https://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html

微信自定义分享功能实现Tips

2.通过获取的access_token进一步获取jsapi_ticket:（来自微信JSSDK说明文档，https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html）

用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：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

}
可通过反序列化JsonConvert.DeserializeObject()，将Json对象转化为一个C#对象，进行下一步处理。

3.生成时间戳 timestamp:

时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。

            DateTime timeNow1 = (DateTime.UtcNow.AddHours());

            DateTime timeGMT = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(, , ));

            //计算时间戳

            int timeTotal = Convert.ToInt32((timeNow1 - timeGMT).TotalSeconds);

            //将时间戳转换为字符串

            string timestamp = timeTotal.ToString(CultureInfo.InvariantCulture);

4.生成随机串 nonceStr:

            //规定随机字符串的长度

            const int Length = ;

            //限制字符串取值来源

            const string Chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";

            //定义一个空字符串用于接收字符

            string nonceStr = string.Empty;

            //初始化一个随机数

            var rand = new Random();

            //循环从Chars里随机取一个字符增加到str中，获得随机字符串

            for (int i = ; i < Length; i++)

            {

                //用Substring()方法，字符串从随机位置开始从Chars中取一个字符

                nonceStr += Chars.Substring((rand.Next(, Chars.Length - )), );

            }

5.生成签名 signature:

需要四个字段包括上面的timestamp,nonveStr和当前网页的URL（即要分享的页面url），以及有效的jsapi_ticket;

        public string GetSignature(string url, string jsapi_ticket, string timestamp, string noncestr)

        {

            //采用url键值格式拼接字符串

            string str = $"jsapi_ticket={jsapi_ticket}&noncestr={noncestr}&timestamp={timestamp}&url={url}";

            //对str进行SHA1加密，得到signature。先初始化一个SHA1CryptoServiceProvider类的实例。

            SHA1 sha1 = new SHA1CryptoServiceProvider();

            //以某种编码格式如UTF8，将str编码，获得一个字节序列

            byte[] buffer = Encoding.UTF8.GetBytes(str);

            //计算该字节数组的哈希值，并转化为字符串

            string strHash = BitConverter.ToString(sha1.ComputeHash(buffer));

            //此时strHash为用“-”隔开的字符串，去掉后返回全小写的字符串，即生成了signature

            return strHash.Replace("-", string.Empty).ToLower();

        }

微信公众平台开发者文档里有签名算法相关内容：https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

微信自定义分享功能实现Tips

6.将AppId，时间戳timestamp，随机串noneStr,JsApi签名signature封装为json对象，返回给前台。

7.前台此时通过wx.config接口注入权限验证配置

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名，见附录1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

8.通过wx.ready(function(){})处理成功验证。/通过wx.error(function(res){})处理失败验证

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

});

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

附：SPA（Single-page Application）在 Web 设计上使用单一页面，利用 JavaScript 操作 Dom 的技术实现各种应用

对应为MPA（Multi-page Application）多页面应用，最传统的 HTML 网页设计

区别可进一步参考http://www.thinksaas.cn/topics/0/380/380109.html

秒客网

微信自定义分享功能实现Tips

相关文章