记一次h5内部实现微信支付的全流程

记一次h5内部实现微信支付的全流程

由于gap了一年多，导致很多东西都忘记了，重新开始工作的时候，就准备每周把一些这周做的功能 的全部记录一下，防止以后又忘记了。

谈起一般的通用微信支付，我们就一般有三种模式

• H5 支付
• JSAPI 支付
• 小程序支付

今天主要就记录一下微信内部浏览器中的整个项目流程和测试流程

在微信里的浏览器吊起支付会默认使用JSAPI来进行支付，而且也内部支持支付API不需要额外引入。 总的过程一般是：

graph TD
用户进入页面 --> 静默登录获取用户code -->用code和后台换取openID --> 发送openID和订单信息获取预支付订单 -->前端通过预支付订单吊起微信支付 --> 支付成功;

首先我们可以登录微信公众平台，获取我们公众号的appId,如果没有的话，微信开发者平台这边有供我们测试用的appId，下面就以测试的账号来举例啦

登录后就可以获得一个测试的appId

获取之后如果我们还想本地来调试的话还需要填写一下我们本地测试的地址,

准备完成之后我们就可以来操作了

首先我们来进行静默登录：在用户登录时进行静默登录然后获取openID,然后存到本地。

// 静默登录
    const getScopeUrl = () => {
    const appid = 'AppID';
    const redirect_uri = encodeURIComponent(location.href ||'');
       return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid} &redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
    };
    // 初始化进行授权
    const initScope = () => {
	 //判断本地是否有openID
    if(uni.getStorageSync('openID')){
	   return;
    }
    // 判断是否在微信内置浏览器
    let isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent);
    if (!isWeixinBrowser) {
        return;
      }
    // 解析当前url，判断是否有code参数
    let urls = new URL(location.href);
    let code = urls.searchParams.get('code');
      // 如果code存在，请求接口换取openid，在后续页面直接获取使用
      if (code) {
        getOpenID({'jscode':code}).then((res)=>{
            uni.setStorageSync('openID')
        })
      }
      // 如果不存在，进行静默授权
      else {
        location.href = getScopeUrl();
      }
    };
    onMounted(() => {
      // 初始化静默授权逻辑
      initScope();
    });

在拿到openID后我们就可以去请求支付订单吊起支付啦

 getpayInfo(data).then((res) => {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        'appId': res.data.appid,
                        'timeStamp': res.data.timestamp + '',
                        'nonceStr': res.data.noncestr,
                        'package': res.data.package,
                        'signType': 'MD5',
                        'paySign': res.data.paySign
                    },
                    function(res) {
                        if (res.err_msg === 'get_brand_wcpay_request:ok') {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'none'
                            })
                        } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                            uni.showToast({
                                title: '支付取消',
                                icon: 'none'
                            })
                        } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            })
                        }
                    }
                )
            })

这样一个微信中的支付就结束啦。