微信朋友圈分享页面（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>

posted @ 2015-01-22 11:09 调调儿阅读(4186) 评论(0) 编辑收藏举报

刷新页面返回顶部

调调儿

的地盘

微信朋友圈分享页面（JS-SDK 1.0）

公告