天天看點

移動web/h5網頁分享到qq,配置标題,内容,圖檔(兩種方式)

方式一,meta配置

<meta itemprop="name" content="這是分享的标題"/>
  <meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
  <meta name="description" itemprop="description" content="這是要分享的内容" />
           

QQ内置分享會從這裡讀取,這種方式限于整個網站應用都是一個。不太利于動态添加,特别是現在都用單頁應用。

方式二,調用setShareInfo

此方法需要引入http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js。可以通過子產品,amd,cmd方式進行引入。具體可以看騰訊文檔。

window.setShareInfo && window.setShareInfo({
    title: option?.title || document.title, //必填
    summary: option?.desc || 'xxxxx', //必填
    pic: option?.imgUrl || 'https://imotunkt.oss-cn-shenzhen.aliyuncs.com/imotun/schoolLogoMgt/未标題-1 上午11.47.47.png', //必填
    url: window.location.href,
    WXconfig: {
      swapTitleInWX: true,
      appId: '',
      timestamp: '',
      nonceStr: '',
      signature: ''
    }
  });
           

可以将這個封裝,再需要變标題和圖檔等頁面進行調用。注意上面的注釋,必填的必須填。因為summary我剛開始寫’’,分享出來之後就一直有問題,找了好久才找出原因。

繼續閱讀