uniapp之APP/微信小程序/公众号支付

绝地灬酷狼 2023-02-12 07:23 43阅读 0赞

**涉及到微信支付的都需要从后端接口获取支付配置信息：**

await this.$http({
    	apiName:"wxPayConfig",
    	type:"POST",
    	data:{
    		orderId:this.orderId
    	}
    }).then(res => {
    }).catch(_ => {})

**支付宝支付获取的配置信息参数跟微信不一样，需要单独从接口获取，得到是一长串字符串：**

await this.$http({
    	apiName:"aliPay",
    	type:"POST",
    	data:{orderNo:this.orderId}
    }).then(res => {}).catch(_ => {})

**一、APP微信支付**

1，manifest的APP SDK中配置好微信支付的appid

2，调用支付：

// #ifdef MP-WEIXIN
    let obj = {
    	nonceStr: res.data.nonceStr,
    	timeStamp: res.data.timeStamp,
    	package:res.data.packageValue,
    	signType:res.data.signType,
    	paySign:res.data.paySign,
    	appId: res.data.appId
    }
    uni.requestPayment({
        provider: 'wxpay',
        ...obj,
        success: function (res) {
            uni.redirectTo({
            	url:"/pages/money/paySuccess"
            })
        },
        fail: function (err) {
            uni.redirectTo({
            	url:"/pages/money/payFail"
            })
        }
    });
    // #endif

**二、APP支付宝支付**

1，manifest的APP SDK中勾选支付宝支付

2，调用支付：

uni.requestPayment({
        provider: 'alipay',
        orderInfo: res.data, //支付宝订单数据
        success: function (data) {
            uni.redirectTo({
            	url:"/pages/money/paySuccess"
            })
        },
        fail: function (err) {
            uni.redirectTo({
            	url:"/pages/money/payFail"
            })
        }
    });

**三、微信小程序支付（调用微信支付）**

1，manifest的微信小程序配置中填写微信小程序AppID

2，调用支付：

**四、微信公众号内微信支付**

1，开通JSAPI支付

2，两个支付方法

（1）使用WeixinJSBridge调用支付

定义方法：

jsApiCall(data ,callback_succ_func ,callback_error_func){  
    	//使用原生的，避免初始化appid问题  
    	WeixinJSBridge.invoke('getBrandWCPayRequest', {  
    		appId:data['appId'],  
    		timeStamp: data['timeStamp'],  
    		nonceStr: data['nonceStr'],
    		package: data['package'],
    		signType: data['signType'],
    		paySign: data['paySign'],
    	},  
    	function(res) {  
    		var msg = res.err_msg ?res.err_msg :res.errMsg;  
    		//WeixinJSBridge.log(msg);  
    		switch (msg) {  
    			case 'get_brand_wcpay_request:ok': //支付成功时  
    				if(callback_succ_func){  
    					callback_succ_func(res);  
    				}  
    				break;  
    			default: //支付失败时  
    				WeixinJSBridge.log('支付失败!'+msg+',请返回重试.');  
    				if(callback_error_func){  
    					callback_error_func({msg:msg});  
    				}  
    				break;  
    		}  
    	})  
    }, 
    //WeixinJSBridge判断
    wxJsPay(data ,callback_succ_func ,callback_error_func){
    	if (typeof WeixinJSBridge == "undefined") {  
    		if (document.addEventListener) {  
    			document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);  
    		} else if (document.attachEvent) {  
    			document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);  
    			document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);  
    		}  
    	} else {  
    		this.jsApiCall(data ,callback_succ_func ,callback_error_func);  
    	}  
    },
    //判断是否是微信内浏览器
    isWxBrowser(){
    	if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"){
    		return true
    	}else{
    		return false
    	}
    },

支付调用：

//判断是否是公众号
    // #ifdef H5
    //判断微信浏览器
    if(utils.isWxBrowser()){
    	let obj = {
    		appId: res.data.appId,
    		timeStamp: res.data.timeStamp, 
    		nonceStr: res.data.nonceStr, 
    		package: res.data.packageValue,
    		signType:res.data.signType,
    		paySign:res.data.paySign,
    	}
    	let callback_succ_func = function(){
    		uni.redirectTo({
    			url:"/pages/money/paySuccess"
    		})
    	};
    	let callback_error_func = function(){
    		uni.redirectTo({
    			url:"/pages/money/payFail"
    		})
    	};
    	utils.wxJsPay(obj,callback_succ_func,callback_error_func)
    }else{
    	uni.showModal({
    		title:"提示",
    		content:"请使用微信打开进行支付",
    		showCancel:false
    	})
    }
    // #endif

（2）使用jssdk支付

安装jweixin-module

npm install jweixin-module --save

util.js

//获取配置
    async configWeiXin(callback) {
    	//将当前需要使用jssdk的页面传到后端获取公众号配置
    	let resConfig = await http({
    		apiName: "wxJsdkConfig",
    		type:"POST",
    		data:{
    			url: encodeURIComponent(window.location.href),  //后台通过域名进行授权
    		}
    	})
    	if (resConfig) {
    		let apiList = [ // 可能需要用到的能力
    			'onMenuShareAppMessage',
    			'onMenuShareTimeline',
    			'hideOptionMenu',
    			'showOptionMenu',
    			'chooseWXPay'
    		];
    		let info = {
    			// debug: true, // 调试，发布的时候改为false
    			appId: resConfig.data.appId,
    			nonceStr: resConfig.data.nonceStr,
    			timestamp: resConfig.data.timestamp,
    			signature: resConfig.data.signature,
    			jsApiList: apiList
    		};
    		jweixin.config(info);
    		jweixin.error(err => {
    			console.log('config fail:', err);
    		});
    		jweixin.ready(res => {
    			if (callback) callback(jweixin,resConfig.data.appId); // 配置成功回调
    		});
    	}
    },
    //公众号授权之后会跳回当前页面并带有code参数，可以通过判断当前页面是否有code参数来验证是否授权过
    async wxJsdkAuthorize(_appid){
    	let link = window.location.href;
    	let _code = '';
    
    	if(link.includes("code=")){
    		_code = link.split("code=")[1].split('&')[0]
    	}
    	// 如果拿到_code，调用授权接口，没有拿到就跳转微信授权链接获取
    	if (_code) {
    		//如果授权过，可以将code传到后台关联用户账户（适用于登录手机号登录但是没有关联微信账户的情况）
    		await http({ apiName:"wxJsdkLogin", data:{ code:_code }});  //code传到后台关联账户
    	} else {
    		let appid = _appid;
    		let uri = encodeURIComponent(link);
    		let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
    		window.location.href = authURL;
    	}
    },

进入页面调用授权：

methods:{
    	async wxJsdkLogin(jweixin,_appid){
    		utils.configWeiXin((jweixin,_appid) => {
    			try{
    				utils.wxJsdkAuthorize(_appid)
    			}catch(e){
    				console.log("授权失败:",e)
    			}
    		})
    	},
    }
    
    async onLoad(opt) {
    	//公众号中进入授权
    	// #ifdef H5
    	//判断微信浏览器
    	if(utils.isWxBrowser()){
    		uni.showLoading({
    			title:"授权中...",
    			mask:true
    		})
    		await this.wxJsdkLogin();
    		uni.hideLoading()
    	}else{
    		uni.showModal({
    			title:"提示",
    			content:"请使用微信打开进行支付",
    			showCancel:false
    		})
    	}
    	// #endif
    }

调用支付：

//判断是否是公众号
    // #ifdef H5
    //判断微信浏览器
    if(utils.isWxBrowser()){
    	let obj = {
    		appId: res.data.appId,
    		timeStamp: res.data.timeStamp,
    		nonceStr: res.data.nonceStr,
    		package: res.data.packageValue,
    		signType:res.data.signType,
    		paySign:res.data.paySign,
    	}
    	let callback_succ_func = function(){
    		uni.redirectTo({
    			url:"/pages/money/paySuccess"
    		})
    	};
    	let callback_error_func = function(){
    		uni.redirectTo({
    			url:"/pages/money/payFail"
    		})
    	};
    	jweixin.chooseWXPay({
    		...obj,
    		success: () => {
    			callback_succ_func()
    		},
    		fail: err => {
    			callback_error_func()
    		},
    		cancel: err => {
    			callback_error_func()
    		}
    	});
    }else{
    	uni.showModal({
    		title:"提示",
    		content:"请使用微信打开进行支付",
    		showCancel:false
    	})
    }
    // #endif

公众号支付中，如果需要授权，可以使用jssdk先获取配置再授权，然后调用WeixinJSBridge支付；如果不需要获取配置信息，直接WeixinJSBridge支付即可