uni-app微信公众号H5支付页面

Posted 2022-01-27 小码张

准备工作

初始化公众平台测试账号系统。

地址： https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
登录后，会得到一个测试公众号的相关信息。appID,appsecret。

添加授权域名》外网可访问域名或ip

创建H5项目

H5 页面集成 JSSDK 集成文档推荐使用NPM，快捷、省心

基础逻辑代码，openId为上页面传值，不在采用静默方式获取，忽略getCode()方法

<template>
	<view class="payv">
		<button class="pay" type="default" @click="makePay()">唤起支付</button>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module');

	export default 
		data() 
			return 
				orderId: '',
				rtData: ,
				openId: '',
			
		,
		methods: 
			// 点击支付
			makePay: function() 
				let that = this;
				//从后台获取签名，此处根据自己的接口写
				uni.request(
					url: 'http://192.168.41.43:9077/v3/jsApiPay', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: 
						openId: that.$data.openId,
						// orderId: '' // 订单编号
					,
					header: 
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					,
					success: (res) => 
						this.rtData = res.data.data;
						// 调用支付
						this.payRequest();
					,
					fail: () => 
						uni.showToast(
							title: "服务器内部错误!，请稍后再试",
							duration: 2000,
							icon: "none"
						);
					,
				);
			,
			
			// 微信js支付接口
			payRequest: function() 
				//此为调取微信API接口
				var self = this;
				uni.showLoading(
					title: '加载中'
				);
				jweixin.config(
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: self.rtData.appId, // 必填，公众号的唯一标识
					timestamp: self.rtData.timeStamp, // 必填，生成签名的时间戳
					nonceStr: self.rtData.nonceStr, // 必填，生成签名的随机串
					signature: self.rtData.paySign, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				);
				jweixin.ready(function() 
					jweixin.checkJsApi(
						jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) 
							console.log('checkjsapi Success')
							console.log(res);
						,
						fail: function(res) 
							console.log('res')
							console.log(res);
						
					);
					jweixin.chooseWXPay(
						timestamp: self.rtData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: self.rtData.nonceStr, // 支付签名随机串，不长于 32 位
						package: self.rtData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: self.rtData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: self.rtData.paySign, // 支付签名
						success: function(res) 
							// 支付成功后的回调函数
							uni.hideLoading();
							console.log('paysuccess')
							console.log(res)
						,
						cancel: function(r) 
							uni.hideLoading();
						,
						fail: function(res) 
							uni.hideLoading();
							console.log('payfail')
							console.log(res)
						
					);
				);

				jweixin.error(function(res) 
					console.log('error')
					console.log(res)
					uni.hideLoading();
					uni.showToast(
						icon: 'none',
						title: '支付失败了',
						duration: 4000
					);
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					/*alert("config信息验证失败");*/
				);
			,
			// 初始页面，获取用户的openId
			onLoad: function(option) 
				console.log('添加默认openId')
				// this.getCode()
				this.$data.openId = 'oSGyC4sGl4b_k1xyuHAnbpCpQyCM'
			,

			// 静默方式获取jsCode
			getCode() 
				let user_appid = "wx8bcc446cbafebf08"; //个人开发者appid
				let local = window.location.href; //重定向地址
				console.log(local)
				let wx_code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId

				console.log("local:", local);
				//判断有没有code
				if (wx_code == null || wx_code === "") 
					console.log("没有code跳转");
					//获取code的地址。获取成功重定向后地址栏中将会带有code
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=$user_appid&redirect_uri=$encodeURIComponent(
			          local
			        )&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
				 else 
					console.log("有code开始调用接口:", wx_code);
					// this.getOpenId(wx_code); //把code传给后台获取用户信息
				
			,
			//截取code
			//getUrlParam方法就是使用正则截取地址栏里的code，有兴趣可以研究一下，没兴趣直接拿来用
			getUrlParam: function(name) 
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			,
		,
	
</script>

<style>
	.payv 
		margin-top: 20%;
	
</style>

准备就绪之后，开始下一步的操作–公众号配置菜单。

使用微信的接口调试工具设置的。地址：https://mp.weixin.qq.com/debug

1. 第一步，获取access_tocken ，输入测试公众号页面的appID和appsecret，点击检查问题
   
2. 获取到access_token之后，使用这个access_token给测试公众号设置菜单。接口类型选择自定义菜单，填入刚刚获取到的access_token,以及菜单的json串。
   

    "button":[
        
            "type":"view",
            "name":"ME",
            "url":"http://txv6jy.natappfree.cc/#/pages/zhang/zhang"
        
    ]

这个时候，在用微信测试公众号就会有菜单了。

测试页面微信支付

问题总结

1. 内网穿透访问页面时提示：Invalid Host header
   解决方案：h5添加：“disableHostCheck”: true属性