微信、QQ分享內容定製科技頭條網

2019-12-26 12:57:37 全棧旅行

1、微信分享之*.qq.com域（騰訊自家產品）

<code>if (typeof WeixinJSBridge === "undefined") { 

  if (document.addEventListener){
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  }
} else {
  onBridgeReady();
}

var options = {
  title: '偶是騰訊，偶第一',
  desc: '分享描述，我只支持自家產品，其他繞行',
  link: 'https://www.tencent.com/', // 這個可以定製分享出去卡片的鏈接。QQ不可以
  img_url: 'https://zhengxin-pub.bj.bcebos.com/logopic/0853a576ef27edff11f375f8f0880f8b_fullsize.jpg?x-bce-process=image/resize,m_lfit,w_200',
  img_width: '110',
  img_height: '110'
}
function onBridgeReady () {
  // 分享給微信好友
  WeixinJSBridge.on('menu:share:appmessage', function (argv) {
    WeixinJSBridge.invoke('sendAppMessage', {
      'img_width': options.width || '120',
      'img_height': options.height || '120',
      'title': options.title,
      'link': options.link,
      'desc': options.desc,
      'img_url': options.img_url
    }, function (res) {
      console.log(res)
      if (res.err_msg === 'send_app_msg:ok') {
        console.log('分享好友成功')
      }
    });
  });

  // 分享到微信朋友圈
  WeixinJSBridge.on('menu:share:timeline', function (argv) {
    WeixinJSBridge.invoke('shareTimeline', {
      'img_width': options.width || '120',
      'img_height': options.height || '120',
      'title': options.title,
      'link': options.link,
      "desc": options.desc,
      'img_url': options.img_url
    }, function (res) {
      console.log(res) 

      if(res.err_msg === 'share_timeline:ok') {
        console.log('分享朋友圈成功')
      }
    });
  });
}/<code>

2、微信分享之非*.qq.com（普通大眾）

官方API技術文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”裡填寫“JS接口安全域名”。

引入jssdk文件

https://res.wx.qq.com/open/js/jweixin-1.4.0.js

通過config接口注入權限驗證配置

<code>wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串 

  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});/<code>

注：此處需要後臺開發接口支撐。

通過ready接口處理成功驗證

<code>wx.ready(function(){
  // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});/<code>

通過error接口處理失敗驗證

<code>wx.error(function(res){
  // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。
});/<code>

分享接口

自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0）

<code>wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
  wx.updateAppMessageShareData({ 
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
      // 設置成功
    }
  })
});/<code>

自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容（1.4.0）

<code>wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用
  wx.updateTimelineShareData({ 
    title: '', // 分享標題
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
      // 設置成功
    }
  })
});/<code>

獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口

<code>wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用
  wx.onMenuShareWeibo({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () {
    // 用戶確認分享後執行的回調函數
    },
    cancel: function () {
    // 用戶取消分享後執行的回調函數
    }
  });
});/<code>