H5调用微信支付

这里用的是 vue项目;

首先在mounted中判断是否有openId,如果没有,则去获取

let openid = localStorage.getItem('openid');

  if (!openid || openid == 'null' || openid == 'undefined') {

    this.getWechatOauth();

}

 //获取微信openId

  async getWechatOauth() {

      const code = this.GetQueryString('code')   //获取code

      let local = window.location.href;          //获取当前路由  ----------- 这个路由需要至少在test的环境,并且被添加在appId对应的公众号中

      if(!code) {  //在当前路由中获取不到code

          const APPID = process.env.VUE_APP_BASE_WECHAT_APPID

          //scope=snsapi_base  snsapi_base-不弹出授权页面，直接跳转，只能获取用户openid;  snsapi_userinfo-弹出授权页面，可通过openid拿到昵称、性别、所在地

          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base#wechat_redirect'

      }else {  //获取到code,继续获取openId

          this.wechatOauth(code)

      }

  },

  //微信授权

  async wechatOauth(code){

      //  通过后端提供的接口,获取openId,

      wechatOauth({code:code}).then(res => {

          localStorage.setItem('openid', res.id);

      })

  }

//从路由中获取code

  GetQueryString (name) {

      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

      const r = window.location.search.substr(1).match(reg);

      if (r != null) return unescape(r[2]);

      return null;

  },

以上内容最好在进入页面是获取到,也可以在调起支付前完成,看心情,推荐进入页面获取

//  获取到openId之后,调起支付时调用该方法

onBridge() {

            let { appid, nonce_str, sign, prepay_id, timestamp } = this.charge;   //这里面的参数是调用支付的必要参数,如果可以的话可以让后端统一返回

            let _this = this;

            WeixinJSBridge.invoke(

                "getBrandWCPayRequest", _this.charge,

                wxResponse => {

                    if (wxResponse.err_msg == "get_brand_wcpay_request:ok") {

                        Toast('支付成功');

                        this.$router.replace({path:'成功后跳转的页面',query:{'参数'}})

                    }

                    if (wxResponse.err_msg == "get_brand_wcpay_request:fail") {

                        Toast.fail('支付失败');

                    }

                    if (wxResponse.err_msg == "get_brand_wcpay_request:cancel") {

                        Toast.fail('支付取消');

                    }

                }

            );

        },

巴特西

H5调用微信支付

以上内容最好在进入页面是获取到,也可以在调起支付前完成,看心情,推荐进入页面获取

最新文章

热门文章