网页分享功能

微信分享

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