前端vue实现的h5页面接入微信支付流程(jsapi方式)

let protocol = window.location.protocol;
let host = window.location.host;
let local = protocol + '//' + host；
let appId = '';公众号appid
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

function getUrlParams(name) {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const value = params.get(name);
      return value ? decodeURIComponent(value) : null;
    }

npm install weixin-jsapi

import wx from “weixin-js-sdk”;

wx.config({
	debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false, 
	appId: res.data.appId, // 必填，公众号的唯一标识 
	timestamp: res.data.timeStamp, // 必填，生成签名的时间戳     
	nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 
	signature: res.data.paySign, // 必填，签名 
	jsApiList: ['chooseWXPay', 'checkJsApi'] // 必填，需要使用的JS接口列表 
})


	wx.ready(() => {
		// wx.checkJsApi({     
		//   jsApiList: ['chooseWXPay'],     
		//   success:function(res){}, 
		//   fail:function(res){}})   

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

var isWechatBrowser = /micromessenger/i.test(navigator.userAgent);
let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
								.test(navigator.userAgent);
if(isWechatBrowser){
//微信浏览器
	if (isMobile) {
		// console.log("当前是微信移动端");
	｝else{
		// console.log("当前是pc端");
	}
}else{
//非//微信浏览器
}