uni-app 微信小程序支付/公众号支付/h5支付宝/h5微信/支付宝app支付/微信app支付

8 篇文章 0 订阅
2 篇文章 0 订阅

思路:
先判断是app/h5/微信小程序
如果是h5,判断是微信内打开还是微信外

app.vue

	onLaunch: function() {
			uni.setStorageSync('h5Type', 0)		
			// 微信小程序 需要openid
			// #ifdef  MP-WEIXIN
				this.getOpenidFunc()
			// #endif	
			
			//这边记录了设备类型
			let port = uni.getSystemInfoSync().uniPlatform
			switch (port) {
				case 'app':
					uni.setStorageSync('device_type', 4);
					break;
				case 'web':
					uni.setStorageSync('device_type', 2);
					break;
				case 'mp-weixin':
					uni.setStorageSync('device_type', 5);
					break;
				default:
					uni.setStorageSync('device_type', 4);
					break;
			}
			
			// 获取支付pro
			uni.getProvider({
				service: 'payment',
				success: function (res) {
					uni.setStorageSync('provider', res.provider[0])		
				}
			});
			
			// #ifdef  H5
				// h5 判断微信内还是微信外
				  var ua = window.navigator.userAgent.toLowerCase();
				  if (ua.match(/MicroMessenger/i) == 'micromessenger'){
					  // 微信内
						  uni.setStorageSync('h5Type', 1)		
						  let code = this.getUrlName('code')
						  //如果有code,直接换openid
						  if (code){
							  getOpenIDByCode({code: code,type:3}).then(res => {
							  		if (res.status == 1) {
							  			uni.setStorageSync('openid', res.res.openid)		
							  			uni.setStorageSync('session_key', res.res.session_key)		
							  		}
							  	}).catch(err => {
							  		uni.showToast({
							  			title: err.msg,
							  			icon: 'none'
							  		})
							  	});
						  }else{
						    // 如果没有openid,需要重定向拿code换openid
							  if (!uni.getStorageSync('openid')){
								this.getwechatQrcode()
							  }
						  }
				
				  } else {
					// 微信外
					uni.setStorageSync('h5Type', 0)		
				  }
			// #endif
			
		},
			onShow: function() {
			var that = this
			// #ifdef  MP-WEIXIN
				 uni.checkSession({
				      success(e) {
					      },
				      fail(){
				        that.getOpenidFunc()
				      }
				    })
			// #endif	
		},
		methods: {
			//code换openid 小程序
			getOpenidFunc(){
				uni.login({
				  success: res => {
					getOpenIDByCode({code: res.code,type:2}).then(res => {
							if (res.status == 1) {
								uni.setStorageSync('openid', res.res.openid)		
								uni.setStorageSync('session_key', res.res.session_key)		
							}
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							})
						});
				  }
				})
			},
			//重定向拿code
			getwechatQrcode (){
			       var appid = 'xxx'
			       var redirect_uri = encodeURIComponent(window.location.href)
			       var scope = "snsapi_base"
			       var wxUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope='+scope+'&state=STATUS#wechat_redirect'
			       window.location.replace(wxUrl)
			    },
			   getUrlName (name) {
			     /* eslint-disable */
			     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			   },
		}
`
``

支付页面:
//支付宝支付,在小程序和公众号下,不显示
<view class="pay_item" @click="toPayResult(0)" v-if='device_type!==5||h5Type!==1'>
				<view class="pay_name">
					<image src='/static/markrt/pay_2.png'></image>
					<text>支付宝支付</text>
				</view>
				<image src='/static/markrt/arrow.png' class="pay_arrow"></image>
			</view>
			<view class="pay_item" @click="toPayResult(1)">
				<view class="pay_name">
					<image src='/static/markrt/pay_3.png'></image>
					<text>微信支付</text>
				</view>
				<image src='/static/markrt/arrow.png' class="pay_arrow"></image>
			</view>

			return {
				device_type: uni.getStorageSync('device_type'),
				h5Type: uni.getStorageSync('h5Type')
			}
		toPayResult (type){
				//webType 0 app 1 小程序 2 h5
				// #ifdef  APP-PLUS
					var webType = 0
				// #endif
				
				// #ifdef  MP-WEIXIN
					var webType = 1
				// #endif
				
				// #ifdef  H5
					var webType = 2
				// #endif
				
				
				// chooseType 0 支付宝 1 微信
			   var chooseType = type
			   
			   //1.支付宝-APP;3.支付宝-H5;4.微信-APP;6.微信-H5;7.微信-微信浏览器;8.微信小程序 10.applepay;100.测试支付;
			   if (webType==0){
				   if (chooseType==0){
					   var detail_pay_type = 1
				   }else{
					    var detail_pay_type = 4
				   }
			   }else if(webType==1){
				     var detail_pay_type = 8
			   }else{
				   if(chooseType==1){
						var h5Type = this.h5Type
						if (h5Type==1){
							var detail_pay_type = 7
						}else{
							var detail_pay_type = 6
						}
				   }else{
					   var detail_pay_type = 3
				   }
			   }
				var order_no = this.listDel.order_no
				var openid = uni.getStorageSync('openid')
				
				var data = {
					order_no: order_no,
					openid: openid,
					detail_pay_type: detail_pay_type
				}
				this.payFunc(data,detail_pay_type)
			},
			payFunc(data,detail_pay_type){
					var that = this
					uni.showLoading({
						title: ''
					})
					var provider = uni.getStorageSync('provider')	
					orderPay(data).then(res => {
							uni.hideLoading();
							if (res.status == 1) {
								if (detail_pay_type==8){
									//小程序
									uni.requestPayment({
									    provider: provider, 
										timeStamp: res.res.timeStamp, // 时间戳(单位:秒)
									   	nonceStr: res.res.nonceStr, // 随机字符串
									   	package: res.res.package, // 固定值
									   	signType: res.res.signType, //固定值
									   	paySign: res.res.paySign, //签名
									    success(res) {
											uni.showToast({
												title:'支付成功',
												icon:'none'
											})
											uni.navigateTo({
												url: '/market/pages/payResult'
											});
										},
									    fail(e) {
											uni.showToast({
												title:'支付失败',
												icon:'none'
											})
										}
									})
								}else if(detail_pay_type==7){
									// 公众号微信
									this.weixinPay(res.res)		
								}else if(detail_pay_type==6){
									// 公众号h5
									 var url = res.res
									 window.location.href = url
								}else if (detail_pay_type==3){
									//支付宝h5
									  const divForm = document.getElementById('divForm')
									   if(divForm){
											document.body.removeChild(divForm)
									   }
									  const div = document.createElement('div')
									  div.id = 'divForm' // 设置id
									  div.innerHTML = res.res
									  document.body.appendChild(div)
									  // 利用id去获取表单
									  document.getElementById('divForm').children[0].setAttribute('target','_self')
									  this.$nextTick(function(){
												  document.getElementById('divForm').children[0].submit()
									   })
								}else if(detail_pay_type==1){
									//支付宝app
									uni.requestPayment({
									    provider: 'alipay',
									    orderInfo: res.res, //支付宝订单数据
									    success: function (res) {
									        console.log('success:' + JSON.stringify(res));
									    },
									    fail: function (err) {
									        console.log('fail:' + JSON.stringify(err));
									    }
									});
								}else if(detail_pay_type==4){
									//微信app
									//订单对象,从服务器获取
									var orderInfo = {
									  "appid": res.res.appId,  // 应用ID(AppID)
									  "partnerid": res.res.partnerId, // 商户号(PartnerID)
									  "prepayid": res.res.prepayId,  // 预支付交易会话ID
									  "package": res.res.packageValue,        // 固定值
									  "noncestr": res.res.nonceStr, // 随机字符串
									  "timestamp": res.res.timeStamp, // 时间戳(单位:秒)
									  "sign": res.res.sign, // 签名,这里用的 MD5 签名
									};
									
									uni.requestPayment({
									    provider: "wxpay",
									    orderInfo: orderInfos,
									    success(res) {
									            console.log('success:' + JSON.stringify(res));
									            console.log("支付成功");
									    },
									    fail(err) {
									            console.log('fail:' + JSON.stringify(err));
									            console.log("支付失败");    
										}
									});
								}
							}
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							})
					});
			},
		weixinPay(data){
				  var vm= this;
				  if (typeof WeixinJSBridge == "undefined"){
					if( document.addEventListener ){
					  document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
					}else if (document.attachEvent){
					  document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
					  document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
					}
				  }else{
					vm.onBridgeReady(data);
				  }
			},
			 // 微信内调取h5支付
			onBridgeReady (res) {
			      WeixinJSBridge.invoke(
			        'getBrandWCPayRequest', {
			          "appId": res.appId,     //公众号名称,由商户传入
			          "timeStamp": res.timeStamp.toString(),         //时间戳,自1970年以来的秒数
			          "nonceStr": res.nonceStr, //随机串
			          "package":res. package,
			          "signType": res.signType,         //微信签名方式:
			          "paySign": res.paySign //微信签名
			        },
			        function (res) {
			          if (res.err_msg == "get_brand_wcpay_request:ok") {
			        
			          }
			        })
			   },
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值