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

時間 2019-11-26

標籤微信朋友分享頁面 sdk 1.0 欄目 JavaScript 简体版

原文原文鏈接

微信更新sdk後大量分享朋友圈代碼失效，標題縮略圖描述沒法自定義html

新版SDK分享文章步驟jquery

1.綁定域名（方法參考 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html ）ajax

2.服務端算法

須要生成簽名供分享頁面的js接口使用 api

用到 noncestr，jsapi_ticket，timestamp，url(分享頁面的url) 四個參數微信

jsapi_ticket參數又要用到accesstoken -> 獲取accesstoken又要用到appid和secret（這兩個在微信公衆號後臺能夠找到）app

accesstoken 和 jsapi_ticket經過http請求微信接口獲取，這兩個接口都有請求數限制，所以須要本地存儲，過時之後再從接口獲取，這兩個接口參考文檔ide

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

jsapi_ticket : http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 附錄1-JS-SDK使用權限簽名算法url

得到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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。