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

最新推荐文章于 2024-04-29 15:43:10 发布

汐阳か

最新推荐文章于 2024-04-29 15:43:10 发布

阅读量1k

点赞数 16

文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_45853174/article/details/134950360

版权

一，原生小程序

开发流程：

首先通过wx.login()获取到code,继而通过接口获取到openid，
使用`code`和`orderId`请求后端接口，获取支付所需数据。
小程序调用 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

使用`code`和`orderId`请求后端接口，获取支付所需参数。

使用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`