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>
  • 相关阅读:
    PTA 7-9 空心字母金字塔 (10分)【待优化】
    PTA 7-12 交换最小值和最大值 (15分)
    PTA 7-8 分队列 (10分)
    PTA 7-6 计算阶乘和 (10分)
    PTA 7-5 得分计算器 (20分)
    PTA 7-4 有重复的数据 (10分)
    PTA 7-1 数组元素循环右移问题 (20分)
    PTA 7-1 换硬币 (20分)
    PTA 7-6 又来一个上三角数字三角形 (10分)【待完善】
    PTA 7-5 画菱形 (10分)
  • 原文地址:https://www.cnblogs.com/weberypf/p/4241125.html
Copyright © 2011-2022 走看看