[实战技巧]全平台支付..

于 2021-06-21 23:19:53 发布
阅读量268 收藏
点赞数
分类专栏： 项目实战+开发技巧 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_55371434/article/details/117851188
版权

微信二维码支付

准备:需要引入的文件,axios包发送请求;qrcode包显示二维码
步骤1.发送下单请求接口
步骤2.把后端返回的codeUrl注入QRCode实例中
在这里插入图片描述
在这里插入图片描述

3.QRCode插件用npm下载即可
在这里插入图片描述
4.用户扫码完成后的处理;这个时候要请教后端同学,或者我们利用Vue的开启一个定时器查看数据的变化

微信公众号支付

运行环境:必须微信网页中打开
接入前的准备:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
微信公众平台企业账号
商户号
开通jsapi支付权限
设置了页面授权域名，并且是你网站的域名地址
基本接口权限，尤其是jssdk部分权限，保证尽可能都开通

1.需要获取获取code,用code去获取openid

	//页面初始化的逻辑
		onLoad(option) {
			//如果没有登入,就让他去登入
			if (!util.isLogin()) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			// 如果可以从地址栏拿到code那就保存
			if (option.code) {
				this.code = option.code
				uni.setStorageSync('code', option.code)
				this.getOpenId()
			} else {
				// 否则通过函数截取code 保险起见 两层判断地址栏有没有code
				const code = this.getQueryString('code')
				uni.setStorageSync('code', code)
				this.getOpenId()
			}
			//第一步获取code
			this.getCode()
			
		},

页面已加载就需要判断地址栏是否有code

			// 链接跳转授权 获取openid 获取要用户授权
			getCode() {
				// 截取路径中的code
				const code = this.getUrlParam('code')
				//后台给你的appid
				const appid = 'wx1fa1b6cea57b4c16'
				// 如果地址中没有code就跳转授权
				if (code == null || code === '') {
				//回调地址必须转码
					let callback = encodeURIComponent(window.location.href)
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${callback}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
				}
			},

获取回调回来的地址栏中的code


			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return decodeURI(r[2])
				}
				return null;
			},

			// 判断Url中时候有没有code
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
				let url = window.location.href.split('#')[0]
				let search = url.split('?')[1]
				if (search) {
					var r = search.substr(0).match(reg)
					if (r !== null)
						return unescape(r[2])
					return null
				} else
					return null
			}

2.获取用户的openid

			// 获取用户openid
			getOpenId() {
				let that = this
				getcode({
					code: uni.getStorageSync('code') || this.code
				}, {
					suc: res => {
						this.openid = res.data.openid
						console.log('openid', res);
					}
				})
			},

3.用户点击下单的逻辑

			// 提交订单
			wxPayCreateOrder({
			    "body": "jsapi支付测试",
			    "openId": this.openid,
			    "outTradeNo": res.data.orderSn,
			    "payType": 3,
			    "totalFee": res.data.payAmount,
			    "type": 6,
			}, {
			    suc: res => {
			        if (res.code == 200) {
			            //成功之后先别急着下单,做一个时候是微信公众号的验证
			            this.jsSdk(res)
			        } else {
			            uni.showToast({
			                title: res.data.message
			            })
			        }
			    }
			})

			jsSdk(res) {
				// 判断微信的WeixinJSBridge
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
					}
				} else {
					this.onBridgeReady(res);
				}
			},

恭喜你最后一步了,这个时候就可以唤起支付下单的页面了

			
			onBridgeReady(res) {
				// 触发微信支付
				console.log('微信支付所需参数', res);
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: res.data.appId, //公众号名称，由商户传入
						timeStamp: res.data.timeStamp, //时间戳，自1970年以来的秒数
						nonceStr: res.data.nonceStr, //随机串
						package: res.data.packageValue, //prepay_id用等式的格式
						signType: res.data.signType, //微信签名方式：
						paySign: res.data.paySign, //微信签名
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								title: '支付成功'
							})
						} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
							uni.showToast({
								title: '取消支付'
							})
						} else if (res.err_msg == 'get_brand_wcpay_request:fail') {
							uni.showToast({
								title: '支付失败',
							})
							location.reload([bForceGet])
						}
					}
				);
			},

微信公众号支付的第二种方法 JSSDK

1.1 获取到code

// 微信授权,得到code
		getOpendId(appId) {
		  const code = this.getQueryString('code')
		  this.code = code
		  const url = encodeURIComponent(window.location.href)
		  if (!code) {
		    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=0#wechat_redirect`
		  } else {
		    // 这是我调用的后台接口，详见1.2
		    // 需要传入code才能获取到用户的信息
		    this.wxScope()
		  }
		},

在这里插入图片描述
1.2 将code传给后台

// 微信授权登陆接口
			wxScope() {
			  const code2 = {
			    code: this.code // 后台需要的code
			  }
			  qryWebAccessToken(code2).then(res => {
			    if (res.openid) {
			      this.openid = res.openid // 得到用户的openid
			    } else {
			      console.log('微信登陆失败-授权')
			      this.fail = true
			      this.wx = true
			      Toast('微信登陆失败')
			      return
			    }
			  })
			},

微信支付 - JSSDK支付

2.1 引入js-weixin的模块，流程如下：
引入模块–生成签名（wx.config需要）–结合接口返回参数–唤起wxpay。

2.1.1 装包(weixin-js-sdk)，引入模块
npm i (weixin-js-sdk)
import wx from ‘weixin-js-sdk’
2.1.2 生成签名（wx.config需要）
这个文件我命名 为了common.js,一会唤醒支付的时候需要用到

		import wx from 'weixin-js-sdk
		var AppId = ''
		var Timestamp = ''
		var Signature = ''
		var Noncestr = ''
		function GetSignature (callback) {
		  // qryWxSignature 这个是调用后台获取签名的接口
		  qryWxSignature({
		    url: window.location.href.split('#')[0]
		  }).then((data) => {
		    AppId = data.appId
		    Timestamp = data.timestamp
		    Signature = data.signature
		    Noncestr = data.nonceStr
		    wx.config({
		      beta: true,
		      debug: false,
		      appId: AppId,
		      timestamp: Timestamp,
		      nonceStr: Noncestr,
		      signature: Signature,
		      // 这里是把所有的方法都写出来了 如果只需要一个方法可以只写一个
		      jsApiList: [
		        'checkJsApi',
		        'onMenuShareTimeline',
		        'onMenuShareAppMessage',
		        'onMenuShareQQ',
		        'onMenuShareWeibo',
		        'hideMenuItems',
		        'showMenuItems',
		        'hideAllNonBaseMenuItem',
		        'showAllNonBaseMenuItem',
		        'translateVoice',
		        'startRecord',
		        'stopRecord',
		        'onRecordEnd',
		        'playVoice',
		        'pauseVoice',
		        'stopVoice',
		        'uploadVoice',
		        'downloadVoice',
		        'chooseImage',
		        'previewImage',
		        'uploadImage',
		        'downloadImage',
		        'getNetworkType',
		        'openLocation',
		        'getLocation',
		        'hideOptionMenu',
		        'showOptionMenu',
		        'closeWindow',
		        'scanQRCode',
		        'chooseWXPay',
		        'openProductSpecificView',
		        'addCard',
		        'chooseCard',
		        'openCard',
		        'openWXDeviceLib',
		        'closeWXDeviceLib',
		        'configWXDeviceWiFi',
		        'getWXDeviceInfos',
		        'sendDataToWXDevice',
		        'startScanWXDevice',
		        'stopScanWXDevice',
		        'connectWXDevice',
		        'disconnectWXDevice',
		        'getWXDeviceTicket',
		        'WeixinJSBridgeReady',
		        'onWXDeviceBindStateChange',
		        'onWXDeviceStateChange',
		        'onScanWXDeviceResult',
		        'onReceiveDataFromWXDevice',
		        'onWXDeviceBluetoothStateChange'
		      ]
		    })
		    wx.ready(function () {
		      console.log(callback, 'callback')
		      if (callback) callback()
		    })
		  })
		}
		export {
		  GetSignature
		}

2.1.3 结合接口返回参数–唤起wxpay

// 引入
import { GetSignature } from '../../../../static/common'
import wx from 'weixin-js-sdk'

// 点击支付

 payNow() {
      var that = this
      // GetSignature为common.js中的GetSignature内容
      GetSignature(() => {
        // wxpayPreOrder 为后台微信支付接口
        wxpayPreOrder(this.payMsg).then(res => {
          wx.chooseWXPay({
             // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
             // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            timestamp: res.timeStamp, 
            // 支付签名随机串，不长于 32 位
            nonceStr: res.nonceStr, 
            package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: res.paySign, // 支付签名
            success: function(res) {
              // 支付成功后的回调函数
            },
            fail: function(res) {
              console.log('支付失败')
            },
            complete: function(res) {
              console.log(res, 'complete')
            }
          })
        })
      })
    }

微信公众号支付 遇到的坑

坑1:不支持http协议,所以只能用https的链接
坑2:千万要记得授权网页目录需要和你的网页是一样的

微信小程序支付

			if (this.curpayType == 0) { //微信支付
					// 微信支付
					getWechatPay(params, {
						suc: res => {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: res.result,
								success: res => {
									//成功跳转页面
									this.paySuccess();
								},
								fail: err => {
									util.printLog(err)
								}
							})
						}
					})

				} else if (this.curpayType == 1) { //支付宝支付

					// 支付宝支付
					getAlipay(params, {
						suc: res => {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.result.payInfoStr,
								success: res => {
									this.paySuccess()
								},
								fail: err => {
									util.printLog(err)
								}
							})
						}
					})

				}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值