網頁分享功能

微信分享

1. 朋友圈分享

2. 微信好友分享

   import axios from 'axios'
    
   export const getSignature = apiList => {
     axios({
       url: 'http://xxxx',
       method: 'POST',
       data: {
         debug: false,
         url: location.href,
         jsApiList: apiList
       }
     }).then(res => {
       if (res.data) {
         wx.config({
           appId: res.data.appId, // 必填，公眾號的唯一標識
           timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
           nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
           signature: res.data.signature, // 必填，簽名，見附錄1
           jsApiList: apiList // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
         })
       }
     })
   }
    
   export const initWXShare = ({
     title,
     desc,
     link,
     imgUrl,
     success,
     cancel,
     configApis
   }) => {
     wx.ready(function() {
       const shareConfig = {
         title: title || document.title, // 分享標題
         desc, // 分享描述
         link: link || location.herf, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
         imgUrl, // 分享圖標
         success,
         cancel
       }
    
       configApis.map(api => {
         api(shareConfig)
       })
     })
   }
    
   export const wechatShare = ({ title, desc, link, imgUrl }) => {
     const apiList = ['onMenuShareTimeline', 'onMenuShareAppMessage']
    
     getSignature(apiList)
     initWXShare({
       title,
       desc,
       imgUrl: imgUrl ? imgUrl : require('../images/logo.png'),
       link,
       configApis: [wx.onMenuShareTimeline, wx.onMenuShareAppMessage]
     })
   }
   

   　　QQ 分享 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的緩存機制，對同一個鏈接，修改后可能要清除數據后才能看到改變。

   http://open.mobile.qq.com/api/mqq/index