文章目录

• 前言
• 一、准备一个页面用于授权获取code
• • 2.在首页使用code进行授权登录

---

前言

在微信公众号h5网页里面获取授权，我是用的是uniapp框架，主要讲一下前端的操作，前面的微信公号配置域名操作可以去官网查看

---

一、准备一个页面用于授权获取code

将该页设置为进入的默认页面，功能类似登录页，只是登陆的操作是由微信来做，此页面可以什么都没有，只需要在这个页面进行跳转回调页面，获取code

 // let link = encodeURI(window.location.href);
	   let link = encodeURIComponent('https://xxxxxxxxxxxx');
	   console.log(link)
	   	console.log(link,'link');
	   	let code = null;
	   	
	   	// //判断link中有没有code=字符串  
	   	// if(link.indexOf('code=') == -1){
	   		//没有code则引导关注者打开如下页面链接，授权
	   		let appid = 'xxxxxxxxxxxxxxxxxx';
	   		let uri = link;
			
	   		let authURL = `https://open.weixin.qq/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
	   		//重新引导回本页面，然后又重新判断link.indexOf('code=') == -1
	   		window.location.href = authURL;
	   		console.log(authURL)

	   	// }

这个回调的页面设置为系统的首页路径，
let link = encodeURIComponent(‘https://域名+首页地址’);

2.在首页使用code进行授权登录

在首页的onLoad生命周期里进行登录
代码如下（示例）：

methods: {
			getQueryParam(name){
			const urlParams = new URLSearchParams(window.location.search);
			return urlParams.get(name);
			},
			//用户登录
			userLogin(){
				      const code=this.getQueryParam('code')
				      console.log(code)
				      //发送请求传参code获取用户openid
				      uni.request({
				              url: 'https://xxxx/api/user/users/wxLogin',
				              data: {
				                  code: code,
				                  // phoneNum: this.phone,
				                  // name: this.name
				              },
				              method: 'POST',
				              success: (res) => {
				                  uni.hideLoading();
				                  console.log(res);
								 
				                  // res.data.openid
				                  if (res.data.code == 200) {
				                      uni.showToast({
				                          title: res.data.msg
				                      });
				                      const userInfo = {
				                          userId: res.data.data.id
				                      };
				      				
				                      uni.setStorageSync('userInfo', JSON.stringify(userInfo));
				                      app.userInfo = userInfo;
				                      uni.setStorageSync('token', res.data.data.token);
				      				this.getMsgAccount()
									
				                  } else {
				                      uni.showToast({
				                          title: res.data.msg,
				                          icon: 'error'
				                      });
				                  }
								  // this.getMsgAccount()
				              },
				              fail: (err) => {
				                  uni.hideLoading();
								  // this.onloadFinish=true
								  // resolve()
				                  console.log(err);
				              }
				          });
				    
			},

注意，如需在首页的onshow生命周期里调用接口，而且接口需要使用登录获取的参数时，由于在onload里调用了登录接口，所以导致在onshow里调用接口时还没拿到登录接口返回的参数，导致请求失败。
所有可以在登录的成功回调里面去请求接口，然后再onshow里面判断一下是否登录，如果登陆了再去调接口，这样第一次进入首页，就可以触发登录成功的回调，后面再次进入首页也可以发送请求。

onShow() {
			// this.getWorkCount()
			//如果有用户信息,不是第一次登录
			if(app.userInfo){
				this.getMsgAccount()
			}
			
		},

---