調用微信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()
          }
      });
  });
}
複製代碼

若是有不足的地方但願能及時提醒並修改