网页分享功能

最新推荐文章于 2025-07-01 08:00:00 发布

转载最新推荐文章于 2025-07-01 08:00:00 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lyxverycool/articles/10511978.html

微信分享

朋友圈分享

微信好友分享

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

转载于:https://www.cnblogs.com/lyxverycool/articles/10511978.html