H5微信支付

1.非微信浏览器支付
由后端拼凑返回支付页面url，前端跳转即可

2.微信浏览器内的支付（重点描述）
微信浏览器内支付必须使用JSAPI调起支付方法（传送门：JSAP支付）
或者JSSDK方法（传送门：JSSDK支付）

方法1:JSAP：
在支付按钮绑定事件调用wechatPay()方法

			wechatPay() {
				
				// 判断微信的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();
				}
			},

// 支付sdk准备完成
			async onBridgeReady() {
			
                let  payOption=await this.initPayParms();  //从服务器获取支付参数 ，根据自己情况修改 
					
				// 触发微信支付
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: payOption.appId, //公众号名称，由商户传入
						timeStamp: payOption.timeStamp, //时间戳，自1970年以来的秒数
						nonceStr: payOption.nonceStr, //随机串
						package: payOption.package, //prepay_id用等式的格式
						signType: payOption.signType, //微信签名方式：
						paySign: payOption.paySign, //微信签名
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 支付成功 返回成功页需要在微信开发平台后台配置
							let url = window.location.hostname;
							url = window.location.protocol + '//' + url + '/pages/my/charge_record'
							window.location.href=url
						} else {
							//  取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
							let url = window.location.hostname;
							url = window.location.protocol + '//' + url + '/pages/my/charge'
							window.location.href=url
						}
					}
				);
			},			

方法2：JSSDK

引入模块

npm安装

npm install jweixin-module --save

或下载安装
jweixin模块下载

支付事件调用wxPayRequest（）方法

wxPayRequest(payParams) {//payParams从服务器获取支付参数
				var jweixin = require('jweixin-module');
				var self = this;
				console.log(payParams, 'pay')
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: payParams.appId, // 必填，公众号的唯一标识
					timestamp: payParams.timeStamp, // 必填，生成签名的时间戳
					nonceStr: payParams.nonceStr, // 必填，生成签名的随机串
					signature: payParams.signature, // 必填，
					jsApiList: ['chooseWXPay'] // 必填，
				});
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: ['chooseWXPay'], // 
						success: function(res) {
							console.log('checkjsapi Success')
							console.log(res);
						},
						fail: function(res) {
							console.log('res')
							console.log(res);
						}
					});
					jweixin.chooseWXPay({
						timestamp: payParams.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: payParams.nonceStr, // 支付签名随机串，不长于 32 位
						package: payParams.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: payParams.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: payParams.paySign, // 支付签名
						success: function(res) {
							// 支付成功后的回调函数
							uni.navigateTo({
								url:''//写入回调页面路径
							});

						},
						cancel: function(r) {//取消支付回调函数
							uni.navigateTo({
								url:''//写入回调页面路径
							});
						},
						fail: function(res) {//支付失败回调函数

						uni.navigateTo({
								url:''//写入回调页面路径
							});


						}
					});
				});

				jweixin.error(function(res) {
					console.log('error')
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: '支付失败了',
						duration: 4000
					});
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					/*alert("config信息验证失败");*/
				});



			},