uniapp微信H5公众号授权与支付

目录

前言

准备工作

配置回调域名

授权方式

参数

完整代码

---

前言

网页授权微信官方文档：网页授权 | 微信开放文档

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

 uniapp的h5页面放置微信公众号内，属于微信的内置浏览器，可以通过网页授权获取微信code。

准备工作

配置回调域名

网页授权之前，需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。

前端主要是通过跳转到微信官方发地址获取code信息，然后跳转到配置的授权回调域名，code信息就在回调地址栏上，通过自定义方法获取即可：

授权方式

• 静默授权：以snsapi_base为 scope 发起的网页授权，是用来获取进入页面的用户的 openid 的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
• 非静默授权：以snsapi_userinfo为 scope 发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。
   

参数

• appid：公众号的唯一标识
• redirect_uri ：授权后重定向的回调链接地址
• scope：授权方式

完整代码

尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

只需要获取code给后端换取openid即可

 注意

授权后回调页面，此处如果再返回，会跳转到空白页

• 1.初次授权时先存储页面历史列表的长度
• 2.在code回调页面之后，进行history.go返回到1.初始页面
• 此处需要留意通过code获取用户信息这个步骤最好放在回到初始页面的时候进行。

App.vue中

	import {getWxAuthorize} from 'utils/api.js'
	const appid = "xxx"; //公众号的唯一标识
	const redirect_uri = "xxxx/"; //授权后重定向的回调链接地址
	const scope = "snsapi_userinfo"; //非静默授权：snsapi_userinfo  静默授权：snsapi_base
    onLaunch(e) {
			this.getCode(e)
	},
	// 获取code
	async getCode(e) {
		const openid = uni.getStorageSync('OPENID');
		const code = uni.getStorageSync('CODE');
		if (!code && !(e && e.query && e.query.code) && !openid) {
			//不存在存储的code 不存在地址参数code 不存在openid
			//存储当前初始页面历史列表数量
			uni.setStorageSync("historyLength", history.length);
			//获取code
			document.location.replace(
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`);
		} else if ((e && e.query && e.query.code) && !openid) {
			//存在地址参数code 不存在openid
			uni.setStorageSync('CODE', e.query.code);
			const historyLength = uni.getStorageSync("historyLength");
			//跳转回初始页面
			history.go(-(history.length - historyLength));
		} else if (code && !openid) {
			//存在存储的code 不存在openid
			uni.removeStorageSync('CODE');
			//请求后端接口获取用户的信息
			let result = await getWxAuthorize({
					code,
                    scope:"snsapi_userinfo"
			});
			//保存用户的openid
			uni.setStorageSync('OPENID', result.data.openid);
		}
	},
			

 方式二

截取code

		initUrlStr: function() {
				// var r = window.location.hash.split("?")[1];
				var r = window.location.search.substring(1)
				if (r) {
					r = decodeURI(r);
					var json = "{";
					var arr = r.split("&");
					for (var i = 0; i < arr.length; i++) {
						var arri = arr[i].split("=");
						json += arri[0] + ":'" + arri[1] + "'";
						if (i != arr.length - 1) {
							json += ",";
						}
					}
					json += "}";
					return eval("(" + json + ")");
				} else {
					var json = {};
					return json;
				}
			},

获取code

 

async getCode(e) {
  let url =
    `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}?cityid=${getApp().globalData.cityid}&scope=${scope}&response_type=code&connect_redirect=1#wechat_redirect`
  console.log(url);
  let json = this.initUrlStr()
  let code = json.code
  console.log(json, code, '----截取code值');
  if (!(e && code)) {
    console.log('没有code--------', e, code);
    //获取code
    document.location.replace(url);
  } else {
    console.log('存在code-----------', e, code)
    //请求后端接口获取用户的信息
    let openid = await getWxAuthorize({
      code
    });
    console.log(openid, 'openid');
    if (openid == 'args is error') {
      console.log('openID拉取失败', e, code);
      document.location.replace(url)
    } else {
      console.log(openid, 'openid', getApp().globalData.openid, 'globalData-openid');
      //保存用户的openid
      getApp().globalData.openid = openid
    }


  }
},

公众号支付

1.申请企业微信

2.获取openid和密钥 菜单 开发-基本配置 获取秘钥 、设置ip白名单

3.安全域名配置 进入公众号设置-功能设置配置

 4.代码实现 点击请求优先去请求后台订单支付接口数据，将获取到的数据放入以下请求数据里面 

callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(function() {
								uni.hideLoading();
								uni.redirectTo({
									url: '../member/orderdetail?id=' + that.id
								});
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},