调用微信JSSDK实现微信授权分享和支付

在做微信公众号网页项目的时候会用到微信授权、支付和分享等功能

把自己项目中用到的方法贴出来，方便自己以后忘记的时候，可以及时查阅

先以微信分享为例，将贴出所有步骤

1.先建了一个share.js文件，来存放需要用到的方法，然后在需要的页面引入这个方法，调用方法名

如果是react的项目,要在function前面加上export，导出这个函数，然后wx.方法前面要加上window.进行全局去找这个函数，例如：window.wx.config

function shareToApp(obj,successCb,cancelCb) {
  // alert('分享')
  wx.config({
    debug: false,
    appId: obj.appId,
    timestamp: obj.timestamp,
    nonceStr: obj.nonceStr,
    signature: obj.signature,
    jsApiList: [ // 所有要调用的 API 都要加到这个列表中
      'checkJsApi',
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'hideMenuItems',
      'showMenuItems',
      'hideAllNonBaseMenuItem',
      'showAllNonBaseMenuItem',
      'translateVoice',
      'startRecord',
      'stopRecord',
      'onRecordEnd',
      'playVoice',
      'pauseVoice',
      'stopVoice',
      'uploadVoice',
      'downloadVoice',
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage',
      'getNetworkType',
      'openLocation',
      'getLocation',
      'hideOptionMenu',
      'showOptionMenu',
      'closeWindow',
      'scanQRCode',
      'chooseWXPay',
      'openProductSpecificView',
      'addCard',
      'chooseCard',
      'openCard'
    ],
  });
  wx.ready(function () { //必须写在wx.ready里面
    var link = obj.link;
    var imgPath = obj.imgPath;
    var title = obj.title;
    var desc = obj.desc;
    //分享到朋友圈
    wx.onMenuShareTimeline({
      title: title, // 分享标题
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgPath, // 分享图标
      success: function () {
        typeof successCb == 'function' && successCb()
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
          typeof cancelCb == 'function' && cancelCb()
      }
    });
    //分享给好友
    wx.onMenuShareAppMessage({
      title:title,
      desc: desc,
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgPath, // 分享图标
      type: 'link', // 分享类型,music、video或link，不填默认为link
      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
            typeof successCb == 'function' && successCb()
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
            typeof cancelCb == 'function' && cancelCb()
        }
    });
  });
}

上面的为分享给微信好友和分享到朋友圈，还有分享到其他位置的方法名

例如：

• 分享到QQ —— wx.onMenuShareQQ()
• 分享到QQ空间 —— wx.onMenuShareQZone()
• 分享到微博 —— wx.onMenuShareWeibo()

2.可以在需要分享的页面引入这个share.js文件，然后调用shareToApp()这个方法，方法里面传入对应的参数。部分参数是需要后端程序员给传的，前端程序员调用相关接口获取值。

appId、timestamp、nonceStr、signature是需要后端程序员获取然后传给前端 其中signature错误是会经常遇到的问题，要用当前分享出来的url

3.微信授权的方法

function onBridgeReady() {
    window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId": obj.appId,     //公众号名称，由商户传入     
            "timeStamp": obj.timestamp,         //时间戳，自1970年以来的秒数     
            "nonceStr": obj.nonceStr, //随机串     
            "package": obj.package,
            "signType": obj.signType,         //微信签名方式：     
            "paySign": obj.paySign //微信签名 
        },
        function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // console.log('支付成功')
                // that.props.history.push('/finishbuy/' + 1 + '?user=' + that.state.usercha, { orderid: orderid })
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                API.getcode(orderid, userwho).then(res => {
                    // console.log(res.data.result.data.code)
                    var getcode = res.data.result.data.code
                    that.props.history.push('/finishbuy/' + 1 + '?user=' + that.state.usercha, { orderid: orderid,getcode:getcode })
                    // this.setState({
                    //     getcode: res.data.result.data.code,
                    //     status: res.data.result.data.status
                    // })
                })
            } else {
                // console.log('/finishbuy/' + 2 + '?user=' + that.state.usercha)
                // 等于2的时候是失败
                // console.log('支付失败')
                that.props.history.push('/finishbuy/' + 2 + '?user=' + that.state.usercha, { orderid: orderid,getcode:''})
            }
        });
}
    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 {
        onBridgeReady();
    }

4.微信支付的方法

function wxPay(obj, successCb, cancelCb) {
  window.wx.ready(function () { //必须写在wx.ready里面
      window.wx.chooseWXPay({
          timestamp: obj.timestamp, //时间戳
          nonceStr: obj.nonceStr,   //随机串
          package: obj.package,     //订单号
          signType: obj.signType,   //签名方式
          paySign: obj.paySign,     //签名
          success: function (res) {
              console.log('success1')
              typeof successCb == 'function' && successCb()
          },
          cancel: function (res) {
              console.log(res);
              console.log('取消支付');
              typeof cancelCb == 'function' && cancelCb()
          }
      });
  });
}

如果有不足的地方希望能及时提醒并修改