微信內部網頁的分享自定義實現

前言

鑒於上個月連續做了幾個銀行的活動宣傳頁面，涉及到了分享的圖標與標題顯示問題。

在目前微信版本為6.0的情況下，分享微信內部的文章有兩種結果鏈接情況：

1.通過微信自身的單多圖文發送的文章：鏈接會通過微信內部發布和出來，此時的分享鏈接為單多圖文的默認圖片；

                  

可以看到第二張分享給朋友分別用了圖文信息的：圖標，標題，以及摘要；而分享到朋友圈只有圖標跟正文標題；下面看一下直接通過微信內部鏈接跳轉的網頁分享

是什么情況：

         

可以看到留下的僅僅是該跳轉頁面的url地址，分享到朋友圈也僅僅提取了頁面的title；

解決辦法—自定義

 所以，當我們需要在微信里利用分享宣傳自己的頁面時，為了更好的網頁seo，說簡單一點就是讓別人能從分享鏈接一眼就知道這是什么干嘛的鏈接：圖標+標題+介紹來吸引別人點擊進我們的鏈接，這時我們就需要利用微信的內部接口來自定義自己的網頁了；

<script>
        //微信分享自定義
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        window.shareData = {
                "timeLineLink": "此處填入需要鏈接的連接url（也可以通過變量獲取本頁面的url）", //分享到朋友圈的鏈接
                "sendFriendLink": "同上",//分享給朋友的鏈接
                "weiboLink": "",//分享到微博的
                "tTitle": "廣東南粵e+直銷銀行,簡化金融服務為您智能理財，讓您的生活更輕松！",//朋友圈標題
                "tContent": "簡化金融服務為您智能理財，讓您的生活更輕松！",//朋友圈摘要內容
                "fTitle": "廣東南粵e+直銷銀行",//朋友標題
                "fContent": "簡化金融服務為您智能理財，讓您的生活更輕松！", //朋友摘要內容
                "wContent": "簡化金融服務為您智能理財，讓您的生活更輕松！"  //微博
            };
            // 發送給好友
            WeixinJSBridge.on('menu:share:appmessage', function (argv) {
                WeixinJSBridge.invoke('sendAppMessage', {
                    "img_url": "xxxxxx/img/share.jpg",//分享鏈接圖標的 url
                    "img_width": "80",
                    "img_height": "80",
                    "link": window.shareData.sendFriendLink,
                    "desc": window.shareData.fContent,
                    "title": window.shareData.fTitle
                }, function (res) {
                    _report('send_msg', res.err_msg);
                })
            });
            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function (argv) {
                WeixinJSBridge.invoke('shareTimeline', {
                    "img_url": "xxxxxx/img/share.jpg",
                    "img_width": "80",
                    "img_height": "80",
                    "link": window.shareData.timeLineLink,
                    "desc": window.shareData.tContent,
                    "title": window.shareData.tTitle
                }, function (res) {
                    _report('timeline', res.err_msg);
                });
            });

        }, false)
    </script>

通過這段代碼的配置，即可達到自定義分享鏈接屬性的目的。經測試，安卓，ios均可有效看到自定義的效果。