uni-app h5调用微信支付方法

uni-app h5调用微信支付方法

首先微信支付的形式要好多种如需可查看https://pay.weixin.qq.com/wiki/doc/api/index.html，这里主要用的是JSAPI的支付形式。
想要公众号、h5页面直接调起微信支付窗口实现支付形式，首先必须是微信浏览器或微信环境下才可以直接调起。也就是我们的链接要是https的，下面是我支付的整个流程：
思路：
1.首先我们要先获取openid，如何获取openid,可通过从url中获取code，再返回给后台处理来获取openid
2.获取openid后，点击支付调用自己的支付接口回调后调起微信支付API（一般我们在开发环境下都是点击按钮后跳转到订单页面之类的（如http:localhost:8080/order/inder），但是如果想要开发时调用微信支付必须跳转的页面为https的也就是说是部署后的地址(https://www.xxx.com/orser/index)）,这样才可以去支付
3.成功调起微信支付窗口然后支付–支付成功
代码如下：

car.vue页面

<button @click="gopay">去购买<button>

goPay() {
				var local = 'https://www.xxx.com/order/index';   //你自己的需要跳转到的页面
				var APPID = 'xxxxxxxxx';
				window.location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					APPID +
					'&redirect_uri=' +
					encodeURIComponent(local) +
					'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
			}

order.vue 页面

onload(){  
//先获取code 来获取openid （其实有的可以不用回去openid 看你的支付方式 JSAPI是需要openid的），如果不是uni-app,可写在初始化方法里面按自己需求来
var code = this.getCode(); //先获取code 判断一下code不为空才能获取openid
			if (this.code != null && this.code != "" ) {
			  this.onBridgeReady(this.code); //把code传给后台获取用户信息
			 }
 }

**先获取code (我是从url上截取的)**
     getCode() {
		    var context = '';
		    var name = 'code';
	    	var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
		   var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
		   if (r != null) context = r[2];
	             	return context;
	       },
	
** 根据返回的code 来获取openid**
	   onBridgeReady(code) {
		    var _this = this;
		    let token
		    getAppToken(code)    //自己后台写的接口
			     .then(res => {
			       	if ('999999' == res.code) {
				     	alert(res.errMsg);
					    return;
				  } else {
					if (res.data != null) {
						uni.setStorageSync('openId', res.data);
						uni.setStorageSync('NoPush', false)
						token = res.data;
					} else {
						token = uni.getStorageSync('openId');
					}
					**this.prepay(this, token);  //去支付**
				}
			})
			.then(res => {
				var code = res.code;
				alert('openid', '失败')
				if ('999999' == res.code) {
					alert(res.errMsg);
				}
			});
	},

**去支付 调用自己的接口 获取相应参数**	
        prepay(_this, openid) {
		//var _this = this;
		let form = {
			amount: _this.totalPrice * 100,    //金额
			distId: _this.addressList.id,
			tradeType: 'JSAPI',
			items: _this.list,     //这里的参数是后面调微信支付api需要入的参数信息 如签名，随机字符串，appid等
			openid: openid
		};
		_this.addressList.id;
		prepay(form).then(payRes => {  //自己的接口
			if ('999999' == payRes.code) {
				alert(payRes.errMsg);
				return;
			} else {
				**_this.wxPayInvoke(_this, payRes, openid);**
			}
		});
	},
	
 ** 调起微信支付API**
	  wxPayInvoke(self, payRes, openid) {
	        	var url = window.location.href;
		        let that = this
		      //获取js签名
		        getSignature({
			          address: url
		         }).then(res => {
			       wx.config({
				       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				      appId: payRes.data.appid, // 必填，公众号的唯一标识
				      timestamp: payRes.data.timestamp, // 必填，生成签名的时间戳
				      nonceStr: payRes.data.nonceStr, // 必填，生成签名的随机串
				     signature: payRes.data.signature, // 必填，签名
				     jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
				    openId: openid
		    	});
			    //发起微信支付
			      wx.ready(function() {
				      wx.chooseWXPay({
				          	appId: payRes.data.appid,
					        timestamp: payRes.data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
					        nonceStr: payRes.data.noncestr, // 支付签名随机串，不长于 32
					        package: 'prepay_id=' + payRes.data.prepayid, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					        signType: 'HMAC-SHA256', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
					        paySign: payRes.data.sign, // 支付签名
					     success: function(res) {
					           	uni.showToast({
						       	icon: 'none',
						    	title: '支付成功'
					    	})
						   setTimeout(() => {
						      window.history.go(-1) //跳转到上一页
						   }, 1000)

				    	},
					 cancel: function(res) {
						//提示引用的是mint-UI里toast
						
						setTimeout(() => {
							uni.showToast({
								icon: 'none',
								title: '已取消支付'
							})
							
						}, 2000)
						 window.history.go(-1) //跳转到上一页
					},
					fail: function(res) {						
					 window.history.go(-1) //跳转到上一页
						setTimeout(() => {
							uni.showToast({
								icon: 'none',
								title: '支付失败，请重试'
							})
						}, 2000)
					}
				});
			});
		});
	}

效果图