H5分享页面（1）——web端二次分享配置内容

在H5分享页面中，如果用户进行了二次分享，需要进行一些配置才能进行使用，如微信二次分享就必须调用微信的JS-SDK来完成。下面对分享配置代码进行了封装：

存放路径：public/resources/js/Tencent-share.js

(function () {
  var wxapi = '//res.wx.qq.com/open/js/jweixin-1.4.0.js', qqapi = '//open.mobile.qq.com/sdk/qqapi.js?_bid=152', qzapi = '//qzonestyle.gtimg.cn/qzone/phone/m/v4/widget/mobile/jsbridge.js?_bid=339'
  var require
  function _require (url, onload) {
    var doc = document
    var head = doc.head || (doc.getElementsByTagName('head')[0] || doc.documentElement)
    var node = doc.createElement('script')
    node.onload = onload
    node.onerror = function () {
    }
    node.async = true
    node.src = url[0]
    head.appendChild(node)
  }
  function XHR (options) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
          var response = JSON.parse(this.responseText)
          options.success && options.success(response)
        } else {
          options.error && options.error(response)
        }
      }
    }
    xhr.open(options.type || 'GET', options.url)
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    var data = ''
    for (var k in (options.data || {})) {
      data += k + '=' + encodeURIComponent(options.data[k]) + '&'
    }
    xhr.send(data)
  }
  function _initWX (data) {
    if (!data.WXconfig) {
      return
    }
    require([wxapi], function (wx) {
      if (!wx.config) {
        wx = window.wx
      }
      var conf = data.WXconfig
      wx.config({debug: false, appId: conf.appId, timestamp: conf.timestamp, nonceStr: conf.nonceStr, signature: conf.signature,
        jsApiList: [
          'checkJsApi',
          'hideMenuItems',
          'startRecord',
          'stopRecord',
          'onVoiceRecordEnd',
          'playVoice',
          'pauseVoice',
          'stopVoice',
          'onVoicePlayEnd',
          'uploadVoice',
          'chooseImage',
          'previewImage',
          'uploadImage',
          'downloadImage',
          'translateVoice',
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareQZone'
        ]
      })
      wx.error(function (res) {
      })
      wx.ready(function () {
        var config = {title: data.title, desc: data.summary, link: data.url, imgUrl: data.pic, type: 'link', success: function () {
          data.callback && data.callback()
        }, cancel: function () {
        }}
        // wx.onMenuShareAppMessage(config)
        // wx.onMenuShareQQ(config)
        // 分享给朋友和QQ
        wx.updateAppMessageShareData(config)
        // wx.onMenuShareQZone(config)
        if (conf.swapTitleInWX) {
          // 分享到朋友圈和QQ空间
          wx.updateTimelineShareData({title: data.summary, desc: data.title, link: data.url, imgUrl: data.pic, type: '', dataUrl: '', success: function () {
            data.callback && data.callback()
          }, cancel: function () {
          }})
          // wx.onMenuShareTimeline()
        } else {
          // 分享到朋友圈和QQ空间
          wx.updateTimelineShareData(config)
        }
      })
    })
  }
  function _initQQ (data) {
    var info = {title: data.title, desc: data.summary, share_url: data.url, image_url: data.pic}
    function doQQShare () {
      try {
        if (data.callback) {
          window.mqq.ui.setOnShareHandler(function (type) {
            if (type == 3 && (data.swapTitle || data.WXconfig && data.WXconfig.swapTitleInWX)) {
              info.title = data.summary
            } else {
              info.title = data.title
            }
            info.share_type = type
            info.back = true
            window.mqq.ui.shareMessage(info, function (result) {
              if (result.retCode === 0) {
                data.callback && data.callback.call(this, result)
              }
            })
          })
        } else {
          window.mqq.data.setShareInfo(info)
        }
      } catch (e) {
      }
    }
    if (window.mqq) {
      doQQShare()
    } else {
      require([qqapi], function () {
        doQQShare()
      })
    }
  }
  function _initQZ (data) {
    function doQZShare () {
      if (QZAppExternal && QZAppExternal.setShare) {
        var imageArr = [], titleArr = [], summaryArr = [], shareURLArr = []
        for (var i = 0; i < 5; i++) {
          imageArr.push(data.pic)
          shareURLArr.push(data.url)
          if (i === 4 && (data.swapTitle || data.WXconfig && data.WXconfig.swapTitleInWX)) {
            titleArr.push(data.summary)
            summaryArr.push(data.title)
          } else {
            titleArr.push(data.title)
            summaryArr.push(data.summary)
          }
        }
        QZAppExternal.setShare(function (data) {
        }, {'type': 'share', 'image': imageArr, 'title': titleArr, 'summary': summaryArr, 'shareURL': shareURLArr})
      }
    }
    if (window.QZAppExternal) {
      doQZShare()
    } else {
      require([qzapi], function () {
        doQZShare()
      })
    }
  }
  function init (opts) {
    var ua = navigator.userAgent
    var isWX = ua.match(/MicroMessenger/), isQQ = ua.match(/QQ\/([\d\.]+)/), isQZ = ua.indexOf('Qzone/') !== -1
    isWX && _initWX(opts)
    isQQ && _initQQ(opts)
    isQZ && _initQZ(opts)
  }
  function qt_register_weixin_share (obj) {
    var shareObj = {
      title: obj.title,
      summary: obj.desc,
      pic: obj.imgUrl,
      url: obj.link
    }
    var ua = navigator.userAgent
    var isWX = ua.match(/MicroMessenger/)
    if (window.location.host.indexOf('linker') == -1) {
      return
    }
    if (isWX) {
      XHR({
        url: document.getElementById('ctx').value + '/weixin/signature',
        type: 'POST',
        data: {
          url: window.location.href.split('#')[0]
        },
        success: function (data) {
          data = typeof data === 'string' ? JSON.parse(data) : data
          if (data['errCode'] == 0) {
            var weixin = data['data']
            shareObj.WXconfig = {
              swapTitleInWX: obj.swapTitleInWX ? true : false , // 是否标题内容互换（仅朋友圈，因朋友圈内只显示标题）
              appId: weixin.appid, // 公众号的唯一标识
              timestamp: weixin.timestamp, // 生成签名的时间戳
              nonceStr: weixin.noncestr, // 生成签名的随机串
              signature: weixin.signature // 签名
            }
            window.setShareInfo(shareObj)
          }
        }
      })
    } else {
      window.setShareInfo(shareObj)
    }
  }
  if (typeof define === 'function' && (define.cmd || define.amd)) {
    if (define.cmd) {
      require = seajs.use
    } else {
      if (define.amd) {
        require = window.require
      }
    }
    define(function () {
      return init
    })
  } else {
    require = _require
    window.setShareInfo = init
    window.qt_register_weixin_share = qt_register_weixin_share
  }
})()

可以在外部建立一个js文件，里面存放一些通用的方法，在入口文件引入即可

import '../public/resources/js/Tencent-share.js'
// web端二次分享配置内容
Vue.prototype.initWebShare = function (obj) {
  window.qt_register_weixin_share({
    title: obj.title,
    desc: obj.desc,
    link: obj.link,
    imgUrl: obj.img,
    success: function (res) {
    },
    cancel: function () {
    }
  })
}

在页面中调用：

 methods: {
      // 初始化分享内容
      initShare() {
        var obj = {
          title: document.querySelector('meta[itemprop=name]').getAttribute('content'),
          desc: document.querySelector('meta[itemprop=description]').getAttribute('content'),
          // link: this.shareUrlEnv(location.href.split('#')[0]),
          link: '',
          img: document.querySelector('meta[itemprop=image]').getAttribute('content'),
        }
        this.initWebShare(obj)
      },
      }

 mounted() {
      this.initShare()
    }

document.querySelector(‘meta[itemprop=image]’).getAttribute(‘content’) 是选取html页面中meta标签中的内容（需要写java代码将分享页面的标题，logo，描述注入到meta标签中）

微信JS-SDK说明文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html