uni-app做微信小程序的登录

前台uni-app+colorUi
授权模态框只有这样才能弹出来以下是代码

<button class="button" open-type="getUserInfo" @getuserinfo="appLoginWx" />

我的页面，这里可以点击登录按钮

<template>
	<view>
		<view class="center">
			<view class="logo" :hover-class="!login ? 'logo-hover' : ''">
				<image class="logo-img" :src="login ? uerInfo.avatarUrl : avatarUrl"></image>
				<view class="logo-title uer-name">
					<text>{{ login ? 'Hi，'+uerInfo.nickName : '点我登录' }}</text>
				</view>
				<!-- open-type="getUserInfo" @getuserinfo="appLoginWx" 这两个是重点 -->
				<button class="button" open-type="getUserInfo" @getuserinfo="appLoginWx" />
			</view>
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			login: false,
			avatarUrl: '../../static/uni-center/logo.png',
			uerInfo: {},
			pageOptions: { backpage: '', backtype: '' }
		};
	},
	onLoad(option) {
		this.pageOptions = option;
	},
	onShow(){
		if(this.$db.get("userToken")!=''){
			if(this.$db.get("user")!=''){
				this.uerInfo=JSON.parse(this.$db.get("user"));
			}
			this.login=true;
		}else{
			this.login=false;
		}
	},
	methods: {
		appLoginWx() {
			if(!this.login){
			//先判断登录了吗
			var _self = this;
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: res => {
								_self.authorization = res.code;
								uni.getUserInfo({
									provider: 'weixin',
									success: info => {
										//这里请求接口
										console.log(res);
										console.log(info);
										//根据code去访问后台
										_self.$api.login(code).then(res => {
											
											if (res.success) {
												//表示已绑定去
												_self.$db.set('userToken', res.result.token);
												_self.$db.set("user",JSON.stringify(info.userInfo))
												// 跳转
												if (_self.pageOptions.backtype == undefined) {
												//跳转到默认页面
													uni.switchTab({
														url: '/pages/views/myclass'
													});
												} else {
													if (_self.pageOptions.backtype == 1) {
														uni.redirectTo({ url: _self.pageOptions.backpage });
													} else {
														uni.switchTab({ url: _self.pageOptions.backpage });
													}
												}
												return true;
											}
										});
									},
									fail: () => {
										uni.showToast({ title: '微信登录授权失败', icon: 'none' });
									}
								});
							},
							fail: () => {
								uni.showToast({ title: '微信登录授权失败', icon: 'none' });
							}
						});
					} else {
						uni.showToast({
							title: '请先安装微信或升级版本',
							icon: 'none'
						});
					}
				}
			});
		}
		}
	}
};
</script>

<style>
@font-face {
	font-family: texticons;
	font-weight: normal;
	font-style: normal;
}

page,
view {
	display: flex;
}

page {
	background-color: #f8f8f8;
}

.center {
	flex-direction: column;
}

.logo {
	width: 750upx;
	height: 240upx;
	padding: 20upx;
	box-sizing: border-box;
	background-color: #50B7EA;
	flex-direction: row;
	align-items: center;
	position: relative;
}

.logo-hover {
	opacity: 0.8;
}

.logo-img {
	width: 150upx;
	height: 150upx;
	border-radius: 150upx;
}

.logo-title {
	height: 150upx;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-left: 20upx;
}

.uer-name {
	height: 60upx;
	line-height: 60upx;
	font-size: 38upx;
	color: #ffffff;
}

.go-login.navigat-arrow {
	font-size: 38upx;
	color: #ffffff;
}

.login-title {
	height: 150upx;
	align-items: self-start;
	justify-content: center;
	flex-direction: column;
	margin-left: 20upx;
}

.list-text {
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	flex: 1;
	text-align: left;
}
.button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
</style>

想在页面判断是否登录，可以在main.js挂载一个方法

Vue.prototype.checkLogin = function(backpage, backtype) {
	var _self=this
	if (!this.$db.get('userToken')) {
		// #ifdef MP-WEIXIN这个判断可以判断他是否授权但是授权后还是没有token，token刷新后就不执行该页面了，有知道可以跟我说一声
		// uni.getSetting({
		// 	success(res) {
		// 		console.log("授权：", res);
		// 		if (!res.authSetting['scope.userInfo']) {
					//这里调用授权
					uni.showModal({
						title: '提示',
						content: '您还未授权登录，请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log(backpage)
								//switchTab 不能传参数 backpage='+backpage+'&backtype='+backtype
								uni.switchTab({
									url: '/pages/views/mine'
								});
								return false
							} else if (res.cancel) {
								console.log("退出")
								return false
							}
						}
					});
				} 
	// 		}
	// 	})
	// 	//#endif
	// }
	return this.$db.get('userToken');
}

在页面这样调用就可以了，如果是tab页面要用switchTab跳转第二次参数是干这个的，注意switchTab 不能传参数

var loginRes = this.checkLogin('/pages/views/myclass', '2');
		if (!loginRes) {
			return false;
		}