微信朋友圈分享页面(JS-SDK 1.0)

 

微信更新sdk后大量分享朋友圈代码失效,标题 缩略图 描述无法自定义

 

新版SDK分享文章步骤

 

1.绑定域名 (方法参考 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html )

2.服务端

    需要生成签名供分享页面的js接口使用  

         用到 noncestr,jsapi_ticket,timestamp,url(分享页面的url) 四个参数

         jsapi_ticket参数又要用到accesstoken  ->  获取accesstoken又要用到appid和secret(这两个在微信公众号后台可以找到)

            accesstoken 和 jsapi_ticket通过http请求微信接口获取,这两个接口都有请求数限制,因此需要本地存储,过期以后再从接口获取,这两个接口参考文档

            accesstoken : http://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html

            jsapi_ticket : http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html  附录1-JS-SDK使用权限签名算法

 

获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

    生成签名示例代码

public ActionResult Config(string url) {

            try

            {

                    var token = getToken();

                    var ticket = getTicket(token);

                    long time = (DateTime.UtcNow.Ticks - new DateTime(1970, 1, 1).Ticks) / 10000000;

                    var nonceStr = getnonceStr();



                    var dict = new Dictionary<string, string>() { 

                        {"jsapi_ticket",ticket.Ticket},

                        {"noncestr",nonceStr},

                        {"timestamp",time.ToString()},

                        {"url",HttpUtility.UrlDecode(url)}

                    };



                    var str = dict.OrderBy(a => a.Key)

                        .Select(a => string.Format("{0}={1}", a.Key, a.Value))

                        .Aggregate((a, b) => a + "&" + b);



                    var sign = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1").ToLower();



                    return Json(new

                    {

                        timestamp = time,

                        nonceStr = nonceStr,

                        signature = sign,

                    }, JsonRequestBehavior.AllowGet);

                }

            }

            catch (Exception ex)

            {

                return Content(ex.Message);

            }

        }

 

    3.客户端

         引用微信js-sdk文件

         http://res.wx.qq.com/open/js/jweixin-1.0.0.js

 

         调用wx.config注入上面服务端生成的签名验证信息,绑定监听分享朋友圈事件

 

         示例代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

</head>

<body ontouchstart="">

<script src="/js/jquery.min.js"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

  function wxshare(){

    var settings = {

        debug:false,

        appId:"微信公众号的APPID",

        title: window.document.title,

        desc: window.location.host,

        link: window.location.href,

        imgUrl: '',

        timestamp:"",

        nonceStr:"",

        signature:""

    }



    this.share = function(options){

        if(options){

            $.extend(settings, options);

        }



        if(!settings.signature){

            $.ajax({

                type:"GET",

                url:"http://服务端生成签名数据API",

                data:{

                    url:encodeURIComponent(window.location.href)

                },

                success:function(data){

                    $.extend(settings, data);

                    config();

                    listen();

                }

            });

        }else{

            config();

            listen();

        }

    }



    function config(){

        wx.config({

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

            appId: settings.appId, // 必填,公众号的唯一标识

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

            nonceStr: settings.nonceStr, // 必填,生成签名的随机串

            signature: settings.signature,// 必填,签名,见附录1

            jsApiList: [

                'checkJsApi',

                'onMenuShareTimeline',

                'onMenuShareAppMessage',

                'onMenuShareQQ',

                'onMenuShareWeibo',

                'hideMenuItems',

                'showMenuItems',

                'hideAllNonBaseMenuItem',

                'showAllNonBaseMenuItem',

                'translateVoice',

                'startRecord',

                'stopRecord',

                'onRecordEnd',

                'playVoice',

                'pauseVoice',

                'stopVoice',

                'uploadVoice',

                'downloadVoice',

                'chooseImage',

                'previewImage',

                'uploadImage',

                'downloadImage',

                'getNetworkType',

                'openLocation',

                'getLocation',

                'hideOptionMenu',

                'showOptionMenu',

                'closeWindow',

                'scanQRCode',

                'chooseWXPay',

                'openProductSpecificView',

                'addCard',

                'chooseCard',

                'openCard'

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

        });

    }





    function listen(){

        wx.ready(function () {

            wx.onMenuShareAppMessage({

                title: settings.title,

                desc: settings.desc,

                link: settings.link,

                imgUrl: settings.imgUrl,

                trigger: function (res) {

                },

                success: function (res) {

                },

                cancel: function (res) {

                },

                fail: function (res) {

                }

            });



            wx.onMenuShareTimeline({

                title: settings.title,

                desc: settings.desc,

                link: settings.link,

                imgUrl: settings.imgUrl,

                trigger: function (res) {

                },

                success: function (res) {

                },

                cancel: function (res) {

                },

                fail: function (res) {

                }

            });



            wx.onMenuShareQQ({

                title: settings.title,

                desc: settings.desc,

                link: settings.link,

                imgUrl: settings.imgUrl,

                trigger: function (res) {

                },

                success: function (res) {

                },

                cancel: function (res) {

                },

                fail: function (res) {

                }

            });



            wx.onMenuShareWeibo({

                title: settings.title,

                desc: settings.desc,

                link: settings.link,

                imgUrl: settings.imgUrl,

                trigger: function (res) {

                },

                success: function (res) {

                },

                cancel: function (res) {

                },

                fail: function (res) {

                }

            });

        });

    }

}



$(function(){

    new wxshare().share({

        title:'mytitle',

        desc:'mydesc',

        link:window.location.href,

        imgUrl:'xxx'

    });

})

</script>

</html>

 

你可能感兴趣的:(sdk)