uni-app开发微信公众号H5

最新推荐文章于 2024-05-13 13:08:55 发布

Starrysky32

最新推荐文章于 2024-05-13 13:08:55 发布

阅读量1.4k

点赞数 8

文章标签： uni-app 微信公众平台

本文链接：https://blog.csdn.net/weixin_55737887/article/details/137138135

版权

作者在开发微信公众号项目时遇到跨域问题，尝试使用jQuery和JSONP解决但受限于POST请求，转向使用Uni开发。文章详细描述了微信登录和支付流程的调整过程，包括OAuth2授权和从`chooseWXPay`到`getBrandWCPayRequest`的转换。

摘要由CSDN通过智能技术生成

前言

公司最近需要开发一个公众号项目,以我做小程序的经验以为可以轻松拿下，结果走了一路的坑。这个项目涉及的页面功能也不多，后端大佬配置好，公众号发一条链接直接跳到我的h5页面，我想着东西也不多,直接用jquary写完完事，页面写好以后，jquary在本地调试时候就报跨域，我用jsonp解决结果jsonp只能解决get请求，而我要对接的99.99%都是post请求，所以这方面行不通，本来跨域这问题,后端配置一下就行，但是后端说一句配好了,把问题扔给我，让我配代理,我一个纯原生的h5页面搁哪里配代理呀，僵持了一周，一咬牙一跺脚决定用Uni写这个项目了，

微信公众平台开发概述 | 微信开放文档

登录流程

进去先判断地址有无带微信登录需要的code 有code就直接调后台的接口登录，没有code 就跳转到拼接的地址获取code

		getCode() { // 非静默授权，第一次有弹框
				this.code = this.getUrlCode().code // 截取code	
				console.log(this.code)
			    // 判断地址栏参数有无code,如果没有code，页面地址就跳转到微信提供的获取code的链接
				if (this.code == null || this.code == '') {
				this.getAppId() //从定向到微信公众号的开发地址
				} else {
				this.getInfo();
				}
			},
			// 截取url中的code方法
			getUrlCode() { 
				var url = location.search
				var theRequest = new Object()
				if (url.indexOf("?") != -1) {
					var str = url.substr(1)
					var strs = str.split("&")
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				console.log(theRequest,'111')
				return theRequest
			},

拼接的从定向地址

	location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + res.data
						.appId + "&redirect_uri=" + url +
						"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"

微信支付

原来是想用 chooseWXPay这个方法解决好根本拉不起微信支付，不知道问题出在了哪里

		wxInit(obj){
			wx.config({
				debug:true,
				appId:obj.appId,
				timestamp: obj.timeStamp,
				nonceStr: obj.nonceStr,
				signature: obj.paySign,
				jsApiList:[
					'chooseWXPay'
				],
			});
			this.wxPay(obj)
		},
        		 wx.chooseWXPay({
			 					appId:obj.appId,
			 					nonceStr: obj.nonceStr, // 随机字符串
			 					package: obj.package,        // 固定值
			 					signType: obj.signType,
			 					timestamp: obj.timeStamp,        // 时间戳（单位：秒）
			 					paySign: obj.paySign,// 签名，这里用的 MD5/RSA 签名
			 				success (res) { 
			 					console.log(res,"支付成功")
			 					uni.$u.toast("支付成功")
			 					uni.redirectTo({
			 			url: '/pages/payment/payment',
			 		});
			 				},
						fail (e) {
			 					uni.$u.toast(e)
			 					console.log(e,"fail")
			 				 }
					})

然后查阅了文档改成了getBrandWCPayRequest方法 JSAPI调起支付

		onBridgeReady (payData) {
			let that = this
			let params = {
				appId: payData.appId, //公众号ID，由商户传入
				timeStamp: payData.timeStamp.toString(), //时间戳，自1970年以来的秒数
				nonceStr: payData.nonceStr, //随机串
				package: payData.package,
				signType: payData.signType, //微信签名方式：
				paySign: payData.paySign, //微信签名
			};
			WeixinJSBridge.invoke(
				"getBrandWCPayRequest",
				params,
				function (res) {
					console.log(res, "res")
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						uni.redirectTo({
							url: `/pages/payment/payment?price=${that.model1.userInfo.price}`,
						});
					} else {
						uni.$u.toast(res.err_msg)
					}
				}
			);
		},