likes
comments
collection
share

微信支付(公众号,小程序,内嵌h5)

作者站长头像
站长
· 阅读数 77

微信支付 (公众号,小程序,内嵌h5)

微信支付(公众号,小程序,内嵌h5)

一,原生小程序

开发流程:

  • 首先通过wx.login()获取到code,继而通过接口获取到openid,

  • 使用codeorderId请求后端接口,获取支付所需数据。

  • 小程序调用 wx.requestPayment()接口,拉起微信支付页面。

  • 判断是否支付成功后的逻辑

代码实现:

wx.requestPayment({
    provider: 'wxpay',
    appId: data.appId , //此参数可不用
    nonceStr: data.nonceStr,
    package: data.package,
    signType: data.signType,
    paySign: data.paySign,
    timeStamp: data.timeStamp,
    success: (res) => {
        wx.navigateTo({
             url:`/pages/index/index
        })	
    },
    fail: function (err) {
        wx.showToast({
           title:"支付失败",
           mask: false,//是否显示透明蒙层,防止触摸穿透,默认:false 
        })
    }
})

二,微信h5支付(公众号)

方式一(wx.chooseWXPay)

  • 安装 "weixin-js-sdk"

  • 引入 import wx from 'weixin-js-sdk'

  • 首先通过网页授权获取code 继而拿到openid

  • 使用codeorderId请求后端接口,获取支付所需参数。

  • 使用config 函数进行接口权限注入,要在调用支付接口之前进行支付接口权限的注入。

授权链接:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明:

  • appid :公众号appid

  • redirect_uri:授权成功之后的重定向地址,一般为当前公众号的域名

代码实现

axios.get("api/public/wechat/createJsapiSignature?url=" + 
     encodeURIComponent(window.location.href.split("#")[0]) +
     "&appId=xxx"
    ).then((response) => {
      wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
          appId: appId, // 必填,公众号的唯一标识,填自己的! 
          timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据 
          nonceStr: nonceStr, // 必填,生成签名的随机串 
          signature: signature, // 必填,签名,见附录1
            jsApiList: [
                 'chooseWXPay',
            ],
      });
      wx.ready(function () {
            jweixin.onMenuShareAppMessage(shareData);
            jweixin.onMenuShareTimeline(shareData);
            jweixin.onMenuShareWeibo(shareData);
            jweixin.onMenuShareQQ(shareData);
            jweixin.onMenuShareQZone(shareData);
      });
});
    
    
weiXinPay(){ 
    wx.chooseWXPay({     
        timeStamp,nonceStr,
        package,paySign等参数         
        timestamp: data.timeStamp,         
        nonceStr: data.nonceStr,         
        package: data.package,         
        signType: data.signType,         
        paySign: data.paySign,         
        appId: data.appId, //此参数可不用         
        success: (r) => {         
            // 支付成功后的回调函数             
            if (r.errMsg == "chooseWXPay:ok") {                 
                //支付成功                     
            } else {                 
                 //支付失败         
            }        
        },     
    }); 
}

方式二(WeixinJSBridge.invoke)

// 用于判断是有此对象即是否是微信环境下

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()
    }
}

onBridgeReady(data) {		
    const _this = this
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": data.appId, //公众号ID,由商户传入
        "timeStamp": data.timeStamp, //时间戳,自1970年以来的秒数
        "nonceStr": data.nonceStr, //随机串
        "package": data.package,
        "signType": data.signType, //微信签名方式
        "paySign": data.paySign //微信签名
    },
    function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
            console.log('成功')
        } else {
            console.log('支付失败,请重新尝试!')
        }
    })
}

WeixinJSBridge 内置对象在其他浏览器中无效。只有在微信环境中才能使用其拉起微信支付。

WeixinJSBridge.invoke 与 wx.chooseWXPay

WeixinJSBridge.invoke() :出现早 无需引用jssdk 无需wx.config方法注入 需要参数appId

wx.choosewxpay():出现晚 需要jssdk注入 不需要参数appId

WeixinJSBridge.invoke()是微信浏览器的内置方法 而wx.choosewxpay()在引用的微信jssdk文件中 也是 去调用了WeixinJSBridge.invoke() 可以理解为将 WeixinJSBridge.invoke()进行了二次封装。

三,混合开发(内嵌h5)

混合开发常见为使用uni-app 或者为原生微信小程序去创建项目框架,使用其提供的web-view 标签引入已经开发部署完成的vue 项目域名,完成一个小程序。这样既可减少开发时间也可达到一套代码完成小程序,公众号。从而成为现下较为主流方式。

由于在小程序内所以只能去调用小程序的api,即wx.requestPayment 去拉起支付而当前页面却是在h5 所以要先从h5跳转到原生的小程序页面,然后才能去调用他的方式,支付方式和上文提到的原生小程序支付方式无二,等待支付完成之后再由原生小程序跳转到h5。

jWeixin.miniProgram.navigateTo({ 
    //跳转到原生小程序
       url: /pages/pay/index?access_token=${JSON.parse(sessionStorage.getItem("userInfo")).access_token}
        &orderCode=${this.orderInfo.orderCode}`
})

此为由h5跳转到原生小程序支付页面并携带支付所需订单参数。

<web-view :src="src"></web-view>

支付成功之后需要跳转到h5页面,此时只需要将web-view 中src 改为 h5线上路径即可

https://xxx/goods/pay/index

结语 :

此文旨在讲述小程序,公众号,内嵌h5 环境下的各种支付的实现方式和其中的注意事项,希望对您有所帮助。如果您发现有什么错误,欢迎您多多加以指正。。。

转载自:https://juejin.cn/post/7304540675655467027
评论
请登录