jili2-ph/pages/index/wechat.vue

<template>
	<view>
		<view v-if="msg" class="error-box">
			{{msg}}
		</view>
		<view v-if="msg" class="order-btn" @click="goBack">返回</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				state: 0
			}
		},
		onLoad(option) {
			this.state = this.getUrlCode('state');
			let code = this.getUrlCode('code')
			if(code) {
				this.getOpenidAndUserinfo(code)
			}else{
				this.getCode ();
			}
		
		},
		methods: {
			getCode () {
				if(this.isWechat()) {
					// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
					let code = this.getUrlCode('code')
					if (code === null || code === '') {
						window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+app.globalData.appId+'&redirect_uri=' + encodeURIComponent(app.globalData.redirectUri) + '&response_type=code&scope=snsapi_userinfo&state='+this.state+'#wechat_redirect'
						// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
						// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
						// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
					}
				}
			},
			
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
			
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			
			getOpenidAndUserinfo(code) {
				let that = this;
			    uni.request({
			        url: app.globalData.serverUrl + 'Oauth/checkCode',
					data: {code: code},
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
			        success: function (res) {
			            console.log('通过code获取openid和accessToken', res)
			            if(res.data.code == 0) {
			            	var app = getApp();
			                uni.setStorageSync(app.globalData.storagePre+'token', res.data.data.token);
			            	uni.setStorageSync(app.globalData.storagePre+'userId', res.data.data.userId);
			            	app.globalData.userinfo.token = res.data.data.token;
			            	app.globalData.userinfo.userId = res.data.data.userId;
			            	// uni.reLaunch({ //关闭所有页面，跳转到闪屏页
			            	// 	url: '/pages/index/index'
			            	// })
							window.location.href = app.globalData.host+'/ph/#/pages/index/index';
			            }else{
			            	that.msg = res.data.message;
			            }
			        },
					fail: function (err) {
						console.log(err);
						that.msg = '登录失败';
					}
			    })
			},
			
			goBack(){
				uni.reLaunch({ //关闭所有页面，跳转到闪屏页
					url: '/pages/index/wechat'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.error-box{
		font-size: 40rpx;
		color: #333333;
		text-align: center;
		margin-top: 180rpx;
		margin-bottom: 80rpx;
	}
	
	.order-btn{
		width: 673rpx;
		height: 72rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		background-color: $theme-color;
		line-height: 72rpx;
		font-size: 38rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 40rpx;
	}
</style>