【第三方 分享】網頁第三方分享

0、通用流程

正常為跳轉一個第三方的位址（微信内的網頁除外，走的是jssdk），帶上必要的參數：appid、分享連結、分享圖檔、分享标題、分享内容等等（根據不同平台支援的内容不同，連結、文字等均需要進行encodeURIComponent後再拼接到連結上，微信内網頁除外）

1、微信分享

隻有在微信裡的網頁有，為和app分享出來作區分，一般稱為二次分享

（1）申請公衆号填寫資料，并去公衆号完成相應配置，ip白名單、js安全域名、業務域名

（2）代碼接入：

JSSDK參考文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3

第一步：引入jssdk

在需要調用JS接口的頁面引入如下JS檔案，（支援https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需進一步提升服務穩定性，當上述資源不可通路時，可改通路：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支援https）。

備注：支援使用 AMD/CMD 标準子產品加載方法加載

第二步：通過config接口注入權限驗證配置

wx.config({

  debug: true, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來，若要檢視傳入的參數，可以在pc端打開，參數資訊會通過log打出，僅在pc端時才會列印。

  appId: '', // 必填，公衆号的唯一辨別

  timestamp: , // 必填，生成簽名的時間戳

  nonceStr: '', // 必填，生成簽名的随機串

  signature: '',// 必填，簽名

  jsApiList: [] // 必填，需要使用的JS接口清單

});

// 以上參數，除了jsApiList，都從接口擷取，或者是php混編通過頁面變量擷取

第三步：通過ready接口處理成功驗證（分享給朋友和朋友圈的，官方說法是即将廢棄，有新接口代替，但實際嘗試過新接口還未能起作用）

wx.ready(function(){

  // 分享到朋友圈

  wx.onMenuShareTimeline({

    title: '', // 分享标題

    link: '', // 分享連結，該連結域名或路徑必須與目前頁面對應的公衆号JS安全域名一緻

    imgUrl: '', // 分享圖示

    success: function () {

    // 使用者點選了分享後執行的回調函數

    }

  });

  // 分享給朋友

  wx.onMenuShareAppMessage({

    title: '', // 分享标題

    desc: '', // 分享描述

    link: '', // 分享連結，該連結域名或路徑必須與目前頁面對應的公衆号JS安全域名一緻

    imgUrl: '', // 分享圖示

    type: '', // 分享類型,music、video或link，不填預設為link

    dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空

    success: function () {

      // 使用者點選了分享後執行的回調函數

    }

  });

});

如果沒有使用jssdk對微信二次分享做特定設定，微信會自己爬取網頁上内容作為分享的内容，從經驗得知：（不設定會比較難看，根據業務需要告知産品經理做抉擇）

分享給朋友：

title: 網頁的title

desc：網頁的網址

link：目前網頁的網址

imgUrl：頁面上單邊大小大于200（300？）的第一張圖檔位址（img src那種，background的不算）

分享到朋友圈：

title: 網頁的title

link：目前網頁的網址

imgUrl：頁面上單邊大小大于200（300？）的第一張圖檔位址（img src那種，background的不算）

2、QQ分享

http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={link}&title={link}&desc={title}&summary={summary}&site=&pics={pic}

3、微網誌分享

http://service.weibo.com/share/share.php?appkey={appKey}&title={title}&url={link}&pic={pic}&rcontent=&retcode=0

4、Facebook分享

http://www.facebook.com/sharer/sharer.php?u={link}&t={title}

Facebook不會預填文字，不帶圖，圖檔和圖檔下的配圖和文字為Facebook爬蟲爬取獲得（可以通過自定義爬蟲擷取内容，需要在分享的連結的網頁上添加額外代碼，這裡不作為主要内容講解，有興趣的可以看下面blog）

Facebook爬蟲内容自定義相關介紹blog：https://blog.csdn.net/snow_finland/article/details/88797221

5、Twitter分享

https://twitter.com/intent/tweet?text={text}

Twitter不帶圖，不需要單獨連結，隻有一個文案字段