前端 VUE 微信支付 JSAPI

在威信公众号之中的产品H5页面，在购买时需要直接唤起微信支付，完成投保、核保流程。今天分享自己在唤起微信支付中的一些体会，希望可以帮助到大家。

先给大家将官方的说明文档附上，感兴趣的可以直接看看微信支付-开发者文档

准备工作

引入JSSDK文件（sdk文件）
初始化微信环境（wx.config，wx.ready）
唤起微信支付的方法（wx.chooseWXPay）

支付流程

1、在产品投保页面准备微信支付所需参数（index.vue）

支付成功或失败后跳转页面使用window.location.href，vue自己的路由跳转是不起作用的（#号的原因）

let This = this;
this.visible.loading = true;
saveProposoal({'投保参数'}).then(res => {
	this.visible.loading = false;
	if(res.code == 200){
		let proposalNo = res.data.proposalNo;
        //初始化配置
		pay({
            //支付参数				
			data : {openid : openId,proposalNo:proposalNo},
            //支付成功回调函数，跳转支付成功页
			success(res){
				window.location.href = '支付成功页面'
			},
            //支付取消回调函数，跳转支付失败页
			cancel(res){
			    window.location.href = '支付失败页面'
			},
			fail(res){
				This.$toast('支付失败');							
			}
		})
	}else{
		this.$toast(res.message);
	}
})

2、Pay方法

需后台小伙伴提供签名接口获取公众号的唯一标识appID，ticket。前端拿到这些数据自己去生成签名数据。用来初始化微信环境

后台小伙伴提供的支付接口（微信支付接口），返回支付所需要的参数

timestamp，支付签名时间戳
nonceStr，支付签名随机串
package，统一支付接口返回的prepay_id参数值
signType，签名方式
paySign，支付签名

//微信支付
export function pay(opts){
	let {data,signData,success,cancel,fail} = opts;
	let config = null;
    //调用后台接口生成微信签名数据
	签名接口xx(signData).then(res =>{
		if(res.code == 200){
            //处理后端返回的签名数据
			config = wxSign({ticket:res.content.ticket,appId:res.content.appid})
            //调用微信支付接口，获取支付参数
			return 微信支付接口xxx(data)
		}
	}).then(res =>{
		if(res.code == 200){
            //调用微信支付			
			wxPay({
				config : config,
				data : res.content,
				success(res){
					success && success(res)
				},
				cancel(res){
					cancel && cancel(res)
				},
				fail(res){
					fail && fail(res)
				}
			})
		}
	})
}

3、wxSign()

通过签名接口获取到的数据，进一步处理。将这些处理后的参数用来初始化微信支付API。wx.config()接口注入权限验证配置并申请所需开放标签

export default function(data){
	var urlN = window.location.href.split('#')[0];
	var timestampn = new Date().getTime().toString();
	var timestamp = timestampn.substring(0, 10);			//生成签名的时间戳
	var nonceStr = Math.random().toString(36).substr(2);	//生成签名的随机串
	var con = `jsapi_ticket=${data.ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${urlN}`
	var signature = hex_sha1(con);		//引自sha1.js
	//签名处理后参数	
	return {
		appId : data.appId,
		timestamp : timestamp,
		nonceStr : nonceStr,
		signature : signature
	}
}

4、wxPay()

//微信支付
export default function(opts){
	let {config,data,success,cancel,fail} = opts;
	wx.config({
		debug: false,					//开启调试模式
		appId: config.appId,			//公众号的唯一标识
		timestamp: config.timestamp,	//生成签名的时间戳
		nonceStr: config.nonceStr,		//生成签名的随机串
		signature: config.signature,	//签名
		jsApiList: [ 'chooseWXPay']		//需要使用的JS接口列表
		//openTagList : ['wx-open-launch-weapp']
	});
	wx.ready(function () {
		wx.chooseWXPay({
			timestamp: data.timeStamp,	// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
			nonceStr: data.nonceStr,	// 支付签名随机串，不长于 32 位
			package: data['package_'],	// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
			signType: data.signType,	// 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
			paySign: data.paySign,		// 支付签名
			success: function (res) {
				success && success(res)
			},
			cancel: function (res) {
				cancel && cancel(res)
			},
			fail: function (res) {
				fail && fail(res)
			}
		});
	})
}

到这里，整个支付前端就完成了。