小程序、H5或浏览器中使用微信支付 --api封装

小程序、H5或浏览器中–微信支付的使用

1. 当前环境判断

 /**
   * @Description:判断当前环境  0 代表非微信环境,1代表微信环境但非小程序环境,2代表微信小程序环境
    */
   judgeWxEnv(){
    
    
       const ua = navigator.userAgent.toLowerCase();
       return new Promise((resolve) => {
    
    
           if (ua.match(/micromessenger/i) == 'micromessenger') {
    
    
               //处于微信环境中
               wx.miniProgram.getEnv((res) => {
    
    
                   if (res.miniprogram) {
    
    
                       //小程序环境
                       resolve("2");
                   } else {
    
    
                       //微信环境、非小程序环境
                       resolve("1");
                   }
               })
           } else {
    
    
               // 非微信环境
               resolve("0");
           }
       })
   }

2.微信小程序中使用微信支付

微信小程序api

  /**
     * @Description: 微信支付
     * @params: params 订单信息,需包含订单号orderNo,支付方式wayCode,通过wayCode判断那种支付方式,小程序:WX_LITE,pc:WX_NATIVE
     */
    payOrder(that,params){
    
    
        uni.showLoading({
    
    title:'加载中',mask: true});
        let openId = uni.getStorageSync("CURR_OPEN_ID");
        let data ={
    
    
            openid:openId,
            orderNo:params.orderNo,
            wayCode:params.wayCode,
        }
        return new Promise((resolve, reject) => {
    
    
            that.$u.api.Order.payOrder(data).then((res) => {
    
    //后端的支付接口,提供requestPayment的参数
                if (res && res.code == 200) {
    
    
                    if (res.data) {
    
    
                        let data = res.data;
                        uni.hideLoading();
                        if(params.wayCode == 'WX_LITE'){
    
    
                            uni.requestPayment({
    
     //微信小程序的支付api,输入框密码支付
                                provider: 'wxpay', // 服务提提供商
                                timeStamp: data.timeStamp,
                                nonceStr: data.nonceStr,
                                package: data.packageStr,
                                signType: data.signType,
                                paySign: data.paySign,
                                success: function (res) {
    
    
                                    uni.showToast({
    
    
                                        title: '支付成功',
                                        icon: 'success',
                                        duration: 2000
                                    })
                                    resolve(params.orderNo);
                                },
                                fail: function (res) {
    
    
                                    console.log(res);
                                    resolve(res);
                                },
                                complete: function (res) {
    
    
                                    resolve(res);
                                }
                            })
                        }else if(params.wayCode == 'WX_NATIVE'){
    
    
                            uni.showToast({
    
    
                                title: '支付成功',
                                icon: 'success',
                                duration: 2000
                            })
                            resolve(res.data);
                            uni.hideLoading();
                        }
                    }
                }
            }).catch(error=>{
    
    
                reject(error);
                uni.hideLoading();
            });
        })
    }

3.浏览器使用js-sdk调用微信支付

js-sdk官方文档

/**
 * @Description: 微信内置浏览器/公众号--发起微信支付  使用js-sdk
  */
 payByJsSdk(that,params){
    
    
     let data = {
    
    
         url: encodeURIComponent(location.href)
     }
     return new Promise((resolve, reject) => {
    
    
         //1.初始化注入权限验证配置-- 服务端签名接口
         that.$u.api.Order.getSignature(data).then(res=>{
    
    
             wx.config({
    
    
                 // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                 appId: '', // 必填,公众号的唯一标识
                 timestamp: res.data.timestamp, // 必填,生成签名的时间戳
                 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
                 signature: res.data.signature, // 必填,签名
                 jsApiList: [
                     "chooseWXPay",//微信支付
                 ],
             });
             //2.微信支付
             wx.ready(function () {
    
    
                 let openId = uni.getStorageSync("CURR_OPEN_ID");
                 let params ={
    
    
                     openId:openId,
                     orderNo:params.orderNo,
                     wayCode:params.wayCode,
                 }
                 that.$u.api.Order.payOrder(params).then((res) => {
    
    
                     if (res && res.code == 200) {
    
    
                         if (res.data) {
    
    
                             wx.chooseWXPay({
    
    
                                 timeStamp: data.timeStamp,
                                 nonceStr: data.nonceStr,
                                 package: data.packageStr,
                                 signType: data.signType,
                                 paySign: data.paySign,
                                 success(res) {
    
    
                                     // 支付成功后的回调函数
                                     resolve(res.data);
                                 },
                                 fail(res) {
    
    
                                     //失败后的操作
                                     resolve(res);
                                 }
                             });
                         }
                     }
                 })
             });
         })
     })
 }

猜你喜欢

转载自blog.csdn.net/weixin_45059911/article/details/129526711