原生js实现分享到qq、微博和微信

导读

本文以具体的代码实现分享到qq、qq空间、微信以及微博等；如有错误反应指正；

分享到QQ

 function shareToQQ(title, url, pic) {
    var param = {
      url: url || 'www.baidu.com',
      /*分享地址*/
      desc: '',
      /*分享理由(可选)*/
      title: title || '',
      /*分享标题(可选)*/
      summary: '',
      /*分享描述(可选)*/
      pics: pic || '',
      /*分享图片(可选)*/
      flash: '',
      /*视频地址(可选)*/
      site: '' /*分享来源 (可选) */
    };
    var s = [];
    for (var i in param) {
      s.push(i + '=' + encodeURIComponent(param[i] || ''));
    }
    var targetUrl = "https://connect.qq.com/widget/shareqq/index.html?" + s.join('&');
    window.open(targetUrl, '_blank', 'height=520, width=720');
  },

分享到新浪微博

function shareToSinaWeiBo(title, url, pic) {
    var param = {
      url: url || 'www.baidu.com',
       /*分享地址(可选)*/
      type: '3',
      count: '1',
      /** 是否显示分享数，1显示(可选)*/
      appkey: '',
      /** 您申请的应用appkey,显示分享来源(可选)*/
      title: title,
      /** 分享的文字内容(可选，默认为所在页面的title)*/
      pic: pic || '',
      /**分享图片的路径(可选)*/
      ralateUid: '',
      /**关联用户的UID，分享微博会@该用户(可选)*/
      rnd: new Date().valueOf()
    }
    var temp = [];
    for (var p in param) {
      temp.push(p + '=' + encodeURIComponent(param[p] || ''))
    }
    var targetUrl = 'http://service.weibo.com/share/share.php?' + temp.join('&');
    window.open(targetUrl, 'sinaweibo', 'height=800, width=800');
  },

分享到qq空间

function shareToQZon(title, url, pic) {
    var param = {
      url: url || 'www.baidu.com',
       /*分享地址(可选)*/
      desc: '',
      /*分享理由(可选)*/
      title: title || '',
      /*分享标题(可选)*/
      summary: '',
      /*分享描述(可选)*/
      pics: pic || '',
      /*分享图片(可选)*/
      flash: '',
      /*视频地址(可选)*/
      site: '' /*分享来源 (可选) */
    };
    var temp = [];
    for (var p in param) {
      temp.push(p + '=' + encodeURIComponent(param[p] || ''))
    }
    var targetUrl = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?' + temp.join('&');
    window.open(targetUrl, 'sinaweibo', 'height=800, width=800');
  }

分享到微信

分享到微信需要借助qrcode.js生成二维码，手机扫描二维码即实现分享;

//引入QRCode,调用QRCode函数，传入两个参数，第一个参数表示二维码渲染位置，第二个参数表示二维码对应的对峙和大小等
let qrcode = new QRCode('qrcode', {
        width: 100,
        height: 100, // 高度
        text: 'www.baidu.com', // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000000',
        colorLight: '#ffffff'
      });

总结

分享就是调第三方封装好的接口，根据自己需要传入具体的参数，技术难度不大，唯一需要注意的是分享到微信的时候需要借助qrcode.js生成二维码，其他没什么难点，完整代码；

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。