微信分享和支付以及支付宝支付的写法

一：分享到微信写法

1.引入 weixin-js-sdk (import wx from 'weixin-js-sdk')
2.调后台的方法获取公共参数，其中传给后台的参数中url一定要是当前url的完整链接
3.获取到appId timestamp signature 等参数后在进行微信配置

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: res.appId, // 必填，公众号的唯一标识
  timestamp: res.timestamp, // 必填，生成签名的时间戳
  nonceStr: res.nonceStr, // 必填，生成签名的随机串
  signature: res.signature,
  jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口见微信开发文档
})
wx.ready(() => {
  // 配置好需要分享的几个配置，这里只是演示，实际开发中应该是动态的变量
  let shareData = {
    title: '分享的标题',
    desc: '分享的简介简介',
    link: `https://xxx`,// 自定义一个项目中的页面
    imgUrl: 'https://xxxx/wechat/share-logo.jpg', // 传递给微信需传递完整的带url链接
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
      console.log('分享成功')
      // 用户点击了分享后执行的回调函数
    }
  }
  // 调用各个接口并传入配置变量
  wx.onMenuShareAppMessage(shareData)
  wx.onMenuShareTimeline(shareData)
  wx.onMenuShareQQ(shareData)
  wx.onMenuShareQZone(shareData)
  wx.onMenuShareWeibo(shareData)
})

二：H5页面内或唤起微信支付或支付宝支付

1.H5内唤起微信支付直接window.location.href = xxx(后台返回的地址)
2.H5内唤起支付宝支付：后台会返回一个form表单，str。传入以下方法就可以了
// 支付宝支付
setAliPay (str) {
  const div = document.createElement('div')
  div.innerHTML = str
  document.body.appendChild(div)
  document.forms[0].submit()
},
3.微信内唤起微信支付
// 判断有没有 WeixinJSBridge。并且区分浏览器是否是ie
judgeWxBridge (obj) {
  if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
    }
  } else {
    // obj是从后台拿到的需要唤起微信支付的参数
    onBridgeReady(obj)
  }
},
// 微信环境下配置的微信支付
function onBridgeReady (obj) {
   WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      appId: obj.appId,
      timeStamp: obj.timeStamp,
      nonceStr: obj.nonceStr,
      package: obj.packageParam,
      signType: obj.signType,
      paySign: obj.sign
    },
    function (res) {
       // PAY_RESULT_URL 是指定的返回的支付结果页面，
       window.location.href = `${PAY_RESULT_URL}`
       // 如果需要判断成功情况下才跳转则加这个判断
       if (res.err_msg === 'get_brand_wcpay_request:ok') {
        window.location.href = `${PAY_RESULT_URL}`
       }
    }
  )
}