【微信開發】簡單的微信分享小插件

由於項目中使用了全局微信分享功能，所以寫了一個小插件

1. 文件引入和使用

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript" src="js/common/wechat-share.js"></script>
    <script>
        //分享
        $.wechatShare({
            //載入頁面的DOM HTMLElement
            pageHtmlElement: document.body,
        });
    </script>

 

2. 插件源碼

/**
 * jQuery wechat share v1.0
 * 
 * 描述：如果沒有抓取到title，則使用默認title，默認描述，默認圖片，默認分享的鏈接
 * 
 * 入參：
 *  0. pageHtmlElement                    加載的頁面HtmlElement
 *
 * 調用方法：
 *  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8" type="text/javascript"></script>
 *  <script type="text/javascript" src="js/common/wechat-share.js"></script>
 *  <script>$.wechatShare({pageHtmlElement: document.body//載入頁面的DOM HTMLElement});</script>
 *
 * @author likl
 */
(function($) {
    
    //默認參數
    $.paramsDefault = {
        css_wechat_background: ".wechat_share_img",//待抓取的背景圖的class類名，若要取背景圖，則需要手動設置
        css_wechat_img: "div.page-content>div:not('.navbarpages') img",//待抓取的img標簽選擇器
        css_wechat_title: ".wechat_share_title",//待抓取的標題的class類名
        css_wechat_desc: ".wechat_share_desc",//待抓取的標題的class類名
        wxShareKeyword: "from=singlemessage",//不能修改，微信分享關鍵標識，防止微信去掉#后面的鏈接，導致只會進入首頁的問題
        splitChar: "#!", //根據項目需要修改，目前我使用framework7，所以這里配置#！（主要是為了防止微信分享時單頁面應用鏈接無法生效的問題）
        defaultTitle: "戀愛日記",//默認標題
        defaultDesc: "愛的每一天都有美好回憶",//默認描述
        defaultWechatImgUrl: "/resource/kechuang/images/index/logo-round-white.png",//默認圖片
        defaultUrl: "/index.hx",//默認鏈接
        shareTitle: "",//最終分享的標題
        shareDesc: "",//最終分享的描述
        shareWechatImgUrl: "",//最終分享的圖片
        shareUrl: "",//最終分享鏈接
        pageHtmlElement: "" //入參：載入頁面的DOM HTMLElement
    };

    /**
     * 分享函數
     * 入參：pageHtmlElement
     */
    $.wechatShare = function(options) {
        var opts = $.extend(jQuery.paramsDefault, options);
        
        var wxShareKeyword = opts.wxShareKeyword;
        var splitChar = opts.splitChar;
        var pageHtmlElement = opts.pageHtmlElement;//載入頁面的DOM HTMLElement
        
        var requestUrl = location.href;
        console.log("requestUrl:" + requestUrl);
        
　　　　 //請求服務器獲取配置信息，並調用微信config做注冊
        $.ajax({
            type: "POST",
            data: {"requestUrl": requestUrl.split(splitChar)[0]},
            async: true,
            url: "jssdkconfig.hx", //配置自己服務器的請求連接，獲取jssdk配置信息
            dataType: "json",
            success:function(data) {
                if (data.status) {
                    //注入微信權限驗證配置
                    wx.config({
                        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                        appId: data.attr.appId, // 必填，公眾號的唯一標識
                        timestamp: data.attr.timestamp, // 必填，生成簽名的時間戳
                        nonceStr: data.attr.nonceStr, // 必填，生成簽名的隨機串
                        signature: data.attr.signature,// 必填，簽名
                        jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
                    });
                } else {
                    console.log(data.info);
                }
            }
        });
        
        //獲取標題和內容
        var content = $.grabContent({pageHtmlElement: pageHtmlElement});
        opts = $.extend(opts, content);//並集整合內容

        //分享接口定義
        wx.ready(function () {
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: opts.shareTitle, // 分享標題
                link: opts.shareUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: opts.shareWechatImgUrl, // 分享圖標
                success: function () {
                    // 用戶確認分享后執行的回調函數
                },
                cancel: function () {
                    // 用戶取消分享后執行的回調函數
                }
            });
            //發送給微信朋友
            wx.onMenuShareAppMessage({
                title: opts.shareTitle, // 分享標題
                desc: opts.shareDesc, // 分享描述
                link: opts.shareUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: opts.shareWechatImgUrl, // 分享圖標
                type: 'link', // 分享類型,music、video或link，不填默認為link
                dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
                success: function () {
                    // 用戶確認分享后執行的回調函數
                },
                cancel: function () {
                    // 用戶取消分享后執行的回調函數
                }
            });
            wx.error(function(res){
                console.log("js-sdk -- res：" + res);
            });    
        });
    };
    
    /**
     * 抓取標題和描述
     */
    $.grabContent = function(options) {
        var pageHtmlElement = options.pageHtmlElement;//載入頁面的DOM HTMLElement

        //標題
        var title = $(pageHtmlElement).find($.paramsDefault.css_wechat_title).html();//標題
        console.log("title:" + title);
        //如果標題為空，則采用默認標題和描述
        if(title == null || $.trim(title) == ""){
            //采用默認
            var defaultWechatImgUrl = location.protocol + "//" + location.host + $.paramsDefault.defaultWechatImgUrl;
            var shareUrl = location.protocol + "//" + location.host + $.paramsDefault.defaultUrl;
            return {shareTitle: $.paramsDefault.defaultTitle, shareDesc: $.paramsDefault.defaultDesc, shareWechatImgUrl: defaultWechatImgUrl, shareUrl: shareUrl};
        }
        
        //描述
        var desc = parseHtml($(pageHtmlElement).find($.paramsDefault.css_wechat_desc));
        if(title == null || $.trim(title) == ""){
            //采用默認
            desc = $.paramsDefault.defaultDesc;
        }else{
            //20個字符
            if(desc.length > 20){
                desc = desc.substring(0, 20) + "...";
            }
        }
        console.log("分享的desc:" + desc);

        //獲取分享的圖片
        var wechatImgUrl = $.grabImageUrl({pageHtmlElement: pageHtmlElement});
        console.log("最終wechatImgUrl:" + wechatImgUrl);
        
        //獲取動態分享鏈接
        var requestUrl = window.location.href;
        var prefix = requestUrl.split($.paramsDefault.splitChar)[0];
        if(prefix.indexOf($.paramsDefault.wxShareKeyword) <= 0){
            prefix = prefix + "?" + $.paramsDefault.wxShareKeyword;//添加分享關鍵參數
        }
        var last = requestUrl.split($.paramsDefault.splitChar)[1];//#或#!后的內容
        //最終分享出去的鏈接 ...
        requestUrl = prefix + $.paramsDefault.splitChar + last;
        console.log("最終分享出去的鏈接 :" + requestUrl);
        
        return {shareTitle: title, shareDesc: desc, shareWechatImgUrl: wechatImgUrl, shareUrl: requestUrl};
    };
    
    /**
     * 抓取需要分享的圖片
     * 入參：pageHtmlElement，加載的頁面HtmlElement
     */
    $.grabImageUrl = function(options) {
        var opts = $.extend(jQuery.paramsDefault, options);
        
        var pageHtmlElement = opts.pageHtmlElement;//載入頁面的DOM HTMLElement
        
        //抓取背景圖片
        var wechatImgs = $(pageHtmlElement).find(opts.css_wechat_background);
        var wechatImgUrl = wechatImgs.length > 0 ? $(wechatImgs[0]).css("backgroundImage") : "";
        console.log("wechat_img:" + wechatImgUrl);
        if(wechatImgUrl == null || $.trim(wechatImgUrl) == ""){
            //若預先設定的背景圖，則取img圖片
            var imgs = $(pageHtmlElement).find(opts.css_wechat_img);
            if(imgs.length > 0){
                wechatImgUrl = $(imgs[0]).attr("src");
                console.log("取到的img圖片url:" + wechatImgUrl);
            }
        }else{
            //若獲取到的背景圖，有兩種情況：url(aaa.jpg) 或  url("aaa.jpg")
            wechatImgUrl = wechatImgUrl.split("(")[1].split(")")[0];
            if(wechatImgUrl.split("\"").length > 1){
                wechatImgUrl = wechatImgUrl.split("\"")[1];
            }
        }

        //若未抓取到圖片，則取默認圖片
        if(isEmpty(wechatImgUrl)){
            wechatImgUrl = opts.defaultWechatImgUrl;
        }
        
        //給背景圖添加 域名
        if(!/^http:\/\/|https:\/\//.test(wechatImgUrl)){
            wechatImgUrl = location.protocol + "//" + location.host + wechatImgUrl;
        }
        
        console.log("最終分享的圖片url:" + wechatImgUrl);
        
        //返回圖片
        return wechatImgUrl;
    };
})(jQuery);