uniapp-H5微信公众号登录

uniapp-H5使用微信公众号登录

在使用uni-app混合开发时，在H5中如何使用微信公众号授权获取code进行后端校验登录做一个记录(微信网页官方开发文档)
思路：微信登录 --> 唤起链接(用户允许时可返回code) --> 全局监听code --> 有code则触发三方授权 —> 没有code判断是否登录getUserInfo

1.挟持是否在微信h5打开

• 在微信点击链接打开网页点击微信登录

if (process.env.VUE_APP_PLATFORM === 'h5') {
	var ua = navigator.userAgent.toLowerCase();  
	if(ua.match(/MicroMessenger/i)=="micromessenger") { 
		uni.setStorageSync("index-path",'packages/center/pages/personal/personal')  
		let appid=this.$store.state.weixinAppid
		let redirectUri=encodeURIComponent(window.location.origin+"/#/"+uni.getStorageSync("index-path"))//encodeURIComponent('http://uli.anma.tech/index.html')//
		let scope="snsapi_userinfo"
		let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`
		console.info(url)
		// 唤起链接,如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE
		window.location.href=url
	}else{
		uni.showToast({
			icon: 'none',
			position: 'bottom',
			title: '请在微信客户端打开'
		});
	}
}

2.在App.vue中做一个全局监听code

<script>
	//根据参数名获取参数值
	function getQueryStringByName(name){
	     var result = window.location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
	     if(result == null || result.length < 1){
	         return "";
	     }
	     return result[1];
	}
	export default {
		
		async onLaunch(option) {
			console.warn('App Launch ');
			console.warn(option)
			uni.setStorageSync("index-path",option.path||'pages/home/home')
			
			// #ifdef H5
				//截取code
				let code=option.query.code||getQueryStringByName("code")
				if(code){
					// 如果有code则触发api接口进行登录
					this.$store.dispatch('wechartLogin',{
						third:'weixin',
						code:code
						}
					)
					// this.$store.dispatch("auth",code)
					console.log('微信的code:',code)
				}else{
					var ua = navigator.userAgent.toLowerCase();
					if(uni.getStorageSync('token')){
						let res=await this.$store.dispatch("getUserInfo")
						if(res.code==1){
							return
						}
					}
				}
			// #ifdef
		},
		
	}
</script>

3.具体看官方开发文档

微信