微信WeixinJSBridge支付,H5微信支付,react 微信支付_react 调用weixinjsbridge

145 阅读2分钟

微信支付分为以下几步:

官网api地址:pay.weixin.qq.com/wiki/doc/ap…

1,登录的时候,静默获取用户code,再用code获取用户openId,获取code的链接也是由微信提供的,只需要在页面已一加载的时候自动运行下以下链接即可,这个链接是死的,只有里面的openId和redirect_uri需要填写你自己的,链接如下:

 window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=window.location.href&response_type=code&scope=snsapi_base&#wechat_redirect";

      

参数解读:

        appid=appid(公众号唯一标识)
redirect_uri=window.location.href(授权后重定向的回调链接地址)
response_type=code(返回类型,无需更改)
scope=nsapi_base(snsapi_base ,不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo 弹出授权页        面,可通过openid拿到昵称、性别、所在地。)
state=STATE(重定向后会带上state参数,开发者可以填写任意参数值)
#wechat_redirect(无需更改)

这个时候你的页面刷新完之后,redirect_uri的url地址后面就会出现code,效果如下

code说明 :每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

2,登录成功,根据code换取openID

     如何获取code就不在申明了,直接截取url后面的code,怎么样都可以,方法很多。

     取到code之后,请求后台提供的接口,换取openID,

     openId是用户在当前公众号下的唯一标识(‘身份证’),就是说通过这个openId,就能区分在这个公众号下具体是哪个用户

3,openID发给后台,以获取微信支付相关配置,getBrandWCPayRequest 里面的配置是从后台取得,这一块和后台协商即可

如下:

      const that = this;
      function onBridgeReady() {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId":that.state.data.appId,     //公众号名称,由商户传入
            "timeStamp":that.state.data.timeStamp,//时间戳,自1970年以来的秒数
            "nonceStr":that.state.data.nonceStr, //随机串


**收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。**
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ae3d68cb26b0421ba622315eaede6530~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1751898114&x-signature=9lpEfSQqMfNlrtfSBxFib5ecE0s%3D)
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/66e56662198b4e6ca409795aa17fb801~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1751898114&x-signature=TZJUKKwu51vSDLQI1xXuJ1XZokg%3D)

**[如果你需要这些资料,可以戳这里获取](https://gitee.com/vip204888)**

**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**