uniapp中h5网页微信公众号授权

uniapp中h5网页微信公众号授权

微信官方文档–>网页授权
uniapp中h5网页微信公众号授权步骤:
1.采用用户授权获取code
2.把code传给后端后端获取openid 以及是否关注公众号判断
3.没有关注跳转至关注公众号页面

主要代码

//判断用户是否是微信环境
if (isWechat()) {
				let code = getUrlParam("code"); //是否存在code 截取code代码 授权会返回code需要截取链接中code
				let local = window.location.href;
				if (code == null || code === "") {
					//不存在就打开上面的地址进行授权
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=url&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
				//appid填写你的appid 	redirect_uri填写请求成功后回调地址						
				} else {
					that.code = code;
					//把code传给后端判断用户是否关注相对应的公众号
					uni.request({
						url: 'url',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							code: that.code
						},
						method: 'GET',
						success: (res) => {
							//201没有关注公众号 跳转关注页面
							if (res.data == 201) {
								window.location.href =
									`https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=wechatbiz#wechat_redirect`;
								//_biz的获取通过登录微信公众平台 在头像那里右击查看源码 找到 uin: "658565",uin_base64: "",_biz的值等于uin_base64就可以了
							} else { //关注了可以进行下一步
								uni.request({
									url: 'url',
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									method: 'GET',
									success: (ti) => {
									
									}
								})
							}
						},
					})
				}
			}else{
				uni.showModal({
					title:'请在微信打开',
					content:'请在微信打开本网页'
				})
			}

获取code返回的code截取代码

// 判断公众号截取code
	const getUrlParam = (name) => {
		let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		let r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		}
		return null;
	}
要在uniapp开发H5登录微信公众号并进行联调,有以下几个步骤: 1. 获取微信开发者账号和相关配置信息:首先需要在微信开放平台注册并创建一个开发者账号,然后创建一个微信公众号,并获取相应的AppID和AppSecret等配置信息。 2. 在uniapp项目配置相关插件:在uniapp项目的manifest.json文件,添加对应的插件配置,如"@dcloudio/uni-mp-weixin"插件。然后在项目的App.vue通过uni.login方法获取登录凭证code,并调用uni.request方法发送请求到服务器获取用户的openid和session_key。 3. 前端与后端的联调:根据服务器返回的用户openid和session_key,在前端进行相关的业务逻辑处理,如展示用户信息、跳转到其他页面等。其,服务器端需要处理用户的登录请求,并返回openid和session_key等信息给前端。 4. 微信公众号授权设置:在微信公众号后台设置,配置网页授权域名和回调地址,并将uniapp项目的H5链接添加到公众号菜单。 5. 测试和调试:完成以上步骤后,进行测试和调试,确保登录功能在H5正常使用。可以通过调试工具、日志打印等方式进行定位和解决问题。 总结:在uniapp开发H5登录微信公众号的联调过程,需要进行微信开发者账号和相关配置的准备,配置相关插件和设置,前端与后端的联调,以及进行测试和调试。通过这些步骤,可以实现在uniapp项目登录微信公众号并进行H5联调。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值