调用微信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()
          }
      });
  });
}
复制代码

若是有不足的地方但愿能及时提醒并修改