zoukankan html css js c++ java

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

查看全文

相关阅读:
cf B. Sereja and Suffixes
cf E. Dima and Magic Guitar
cf D. Dima and Trap Graph
cf C. Dima and Salad
最短路径问题(floyd)
Drainage Ditches(网络流(EK算法))
图结构练习—BFSDFS—判断可达性（BFS）
Sorting It All Out（拓扑排序）
Power Network(最大流（EK算法）)
Labeling Balls(拓扑)

原文地址：https://www.cnblogs.com/weberypf/p/4241125.html