微信、QQ分享内容定制

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>

3、QQ分享

<code>
  
     
     
     
  
/<code>

• 分享给QQ朋友截图：

• 分享到QQ空间截图：

閱讀更多 全棧旅行 的文章

關鍵字: 分享 腾讯QQ 腾讯