分享到朋友圈前端配置組件

這配置分享到朋友圈，須要先後端配合才能完成

後端開發經過token驗證生成返回4個參數：

前端根據這4個參數初始化微信分享

獲得這幾個參數通常能夠向後臺請求一個鏈接，若是跨域可使用jsonp請求，

 

 

 

 

 

 

wx.config初始化完成後，會調用wx.ready配置具體分享參數。

 

完整代碼以下：

 

var ShareToWx = window.ShareToWx || {};
(function(){
        ShareToWx = function(options){
        var options     = options || {};
        this.shareTitle = options.shareTitle || '';//設置分享標題,若是爲空，微信會取頁面title,document.title
        this.shareFriTitle = options.shareFriTitle || '';//設置分享給朋友標題,若是爲空，取shareTitle 或者取頁面title,document.title
        this.shareDesc  = options.shareDesc || '';//設置分享描述
        this.shareUrl   = options.shareUrl || location.href.split('#')[0];//設置分享連接
        this.shareImg   = options.shareImg || ''; //設置分享圖
        this.success    = options.success||'';//設置初始化成功後的回調
        this.openid    = options.openid||'';//設置openid
        this.debug      = options.debug || false;//開啓調試模式，調用接口會彈出提示
        this.callback   = options.callback || '';//統一的回調函數
        this.callbackFriend = options.callbackFriend || '';//分享給朋友回調
        this.callbackFriends = options.callbackFriends || '';//分享到朋友圈回調
        this.callbackQQ = options.callbackQQ || '';//分享到qq回調
        this.callbackWeibo = options.callbackWeibo || '';//分享到微博回調
        this.jsApiList        = options.jsApiList || ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
        this.init();
    };
    ShareToWx.prototype = {
        init: function(){
            var that = this;
            var currentUrl = location.href.split('#')[0];//當前URL，取第一個#號前面，當前頁面需是暢遊域下的。
            var URL = encodeURIComponent(currentUrl);//校驗用            
            var shareTitle  = that.shareTitle;
            var shareFriTitle  = that.shareFriTitle;
            var shareDesc   = that.shareDesc;
            var shareUrl    = that.shareUrl;//分享用，可使用其餘地址。
            var shareImg    = that.shareImg;
            var openid      = that.openid;
            var debug       = that.debug;
            var jsApiList    = that.jsApiList;
            $.ajax({
                type:"get",
                url:'//join-activity.changyou.com/wechat/web/'+ openid +'/config',
                dataType:"json",//jsonp
                //jsonp:false,//防止自動添加callback回調
                //jsonpCallback:"callback",//設置回調函數名稱
                cache:true,//防止自動添加時間戳
                //callback:"callback",
                success:function(data){
                    wx.config({
                        debug: debug, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                        appId: data.config.appId, // 必填，公衆號的惟一標識
                        timestamp: data.config.timestamp, // 必填，生成簽名的時間戳
                        nonceStr: data.config.nonceStr, // 必填，生成簽名的隨機串
                        signature: data.config.signature,// 必填，簽名，見附錄1
                        jsApiList: jsApiList// 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
                    });
                    wx.ready(function(){
                        //獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口
                        wx.onMenuShareTimeline({
                            title: shareTitle, // 分享標題
                            desc: shareDesc, // 分享描述
                            link: shareUrl, // 分享連接
                            imgUrl: shareImg, // 分享圖標
                            success: function () {                                
                                // 用戶確認分享後執行的回調函數
                                if(that.callback && typeof(that.callback) == "function"){
                                    that.callback();
                                }
                                if(that.callbackFriends && typeof(that.callbackFriends) == "function"){
                                    that.callbackFriends();
                                }
                            },
                            cancel: function () {
                                // 用戶取消分享後執行的回調函數
                            }
                        });
                        //獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口
                        wx.onMenuShareAppMessage({
                            title: that.shareFriTitle || that.shareTitle, // 分享標題
                            desc: shareDesc, // 分享描述
                            link: shareUrl, // 分享連接
                            imgUrl: shareImg, // 分享圖標
                            type: '', // 分享類型,music、video或link，不填默認爲link
                            dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
                            success: function () {
                                // 用戶確認分享後執行的回調函數
                                if(that.callback && typeof(that.callback) == "function"){
                                    that.callback();
                                }
                                if(that.callbackFriend && typeof(that.callbackFriend) == "function"){
                                    that.callbackFriend();
                                }
                            },
                            cancel: function () {
                                // 用戶取消分享後執行的回調函數
                            }
                        });
                        //獲取「分享到QQ」按鈕點擊狀態及自定義分享內容接口
                        wx.onMenuShareQQ({
                            title: that.shareTitle, // 分享標題
                            desc: shareDesc, // 分享描述
                            link: shareUrl, // 分享連接
                            imgUrl: shareImg, // 分享圖標
                            success: function () {
                               // 用戶確認分享後執行的回調函數
                               if(that.callback && typeof(that.callback) == "function"){
                                    that.callback();
                                }
                               if(that.callbackQQ && typeof(that.callbackQQ) == "function"){
                                    that.callbackQQ();
                                }
                            },
                            cancel: function () {
                               // 用戶取消分享後執行的回調函數
                            }
                        });
                        //獲取「分享到騰訊微博」按鈕點擊狀態及自定義分享內容接口
                        wx.onMenuShareWeibo({
                            title: that.shareTitle, // 分享標題
                            desc: shareDesc, // 分享描述
                            link: shareUrl, // 分享連接
                            imgUrl: shareImg, // 分享圖標
                            success: function () {
                               // 用戶確認分享後執行的回調函數
                               if(that.callback && typeof(that.callback) == "function"){
                                    that.callback();
                                }
                               if(that.callbackWeibo && typeof(that.callbackWeibo) == "function"){
                                    that.callbackWeibo();
                                }
                            },
                            cancel: function () {
                                // 用戶取消分享後執行的回調函數
                            }
                        });
                        //初始化後回調
                        if(that.success && typeof(that.success) == "function"){
                            that.success();
                        }
                    });
                }
            });
        }

    };
})();

 

 使用方法：

組件使用方法：

1.確保頁面已經引入jquery和http://res.wx.qq.com/open/js/jweixin-1.4.0.js

再引入：http://www.changyou.com/cyouFile/shareToWx/js/share.wx.join.js 分享組件，本身的項目須要根據狀況修改裏面的請求鏈接，根據本身返回的

這幾個參數從新設置這幾個參數

調用方法：

var shareToWeiXin = new ShareToWx({
        shareUrl:location.href.split('#')[0],
        shareTitle:'分享標題',
        shareDesc:'分享內容描述',
        shareImg:'http://i1.cy.com/vc/job/20140418/vcwx.jpg',
        openid:'wxded2e2aecc916a1a',//wx2acbc60dc0b25682:鹿鼎記手遊openid（ldj.cy.com）,wxded2e2aecc916a1a:暢遊VC的openid(test-activity.changyou.com)
        debug:true,//是否開啓調試
        callback:function(){//分享後回調
                    alert('統一回調成功！');
                }/*,
        callbackFriend:function(){
                    alert('發送給朋友單獨回調成功！');
                }*/
    });

 

 

2.從新修改分享表態之類的參數：

 

shareToWeiXin.shareTitle = "新的分享標題";
shareToWeiXin.init();
alert("修改爲功！");

 

 

3.測試能夠在微信開發者工具中配置當前要使用的跟公衆號openid匹配的域名host進行測試