uniapp微信小程序登陆方法

my_login.vue:

页面效果：

效果一：没勾选

效果二：勾选以后

接下来上代码：

<template>
	<view class="login-container">
		<view class="logo">
			<image src="/static/imges/my/icon_logo.png"></image>
		</view>
		<!-- 勾选用户协议思路：给两个"微信一键登录"按钮
				1.ischeked=true勾选了，就获取用户信息open-type="getPhoneNumber"
				2.ischecked=false没勾选，给点击事件提示"请先阅读并勾选用户协议"-->
		<block v-if="ischecked">
			<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				class="btn-login">微信一键登录</button>
		</block>
		<block v-else>
			<button type="primary" class="btn-login" @click="btn_Select">微信一键登录</button>
		</block>

		<view class="agreement">
			<radio class="ck_radio" color="#02C9AA" :checked="ischecked" @click="ischecked=!ischecked" />
			<!-- @click="ischecked=!ischecked"的作用能让单选按钮可以点击"勾选也可以取消"，不加这句单选按钮只能勾选"取消不了" -->
			<text class="tips">我已阅读并同意</text>
			<navigator class="info" url="/filepage/agreement/agreement">《用户协议》</navigator>
		</view>
	</view>
</template>

script：

<script>
	var _this;
	export default {
		name: "my-login",
		data() {
			return {
				// 单选按钮的勾选
				ischecked: false,
			};
		},

		created() {
			_this = this;
		},
		methods: {
			getPhoneNumber(e) {
				var phoneCode = e.detail.code;
				if (phoneCode == undefined) {
					// 拒接授权
				} else {
					// console.log("获取手机号的code=" + phoneCode)
					uni.login({
						success(res) {
							if (res.code) {
								// 掉用请求后端的方法
								console.log("res.code传token=" + res.code)
								_this.getlogin11(res.code, phoneCode);
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			// 请求后端的方法传两个参数code,和手机号码给后端，后端返回token
			async getlogin11(code, phoneCode) {
				//调用登录
				const ress = await this.$myRuquest({
					method: 'post',
					url: '/api/Login/WxLogin',
					data: {
						code: code,
						phoneCode: phoneCode
					},
				})
				// 七天后过期了
				// if (res.data.code == 401) {
				// 	//跳转登陆页面
				// 	uni.navigateTo({
				// 		url: '/common/my-login/my-login'
				// 	})
				// }
				// console.log(ress);
				if (ress.code == 500) {
					uni.showToast({
						title: "登陆失败",
						duration: 3000,
						icon: "error"
					})
				} else {
					//console.log(ress.data.user);
					var json = {
						tk: ress.data.token,
						user: ress.data.user
					}
					// 登陆成功后把后端返回的token和用户信息user(openid, nickName等信息)"存储到vuex保存起来"
					this.$store.commit("m_user/refreshToken", json);
					// uni.setStorage('token',ress.data.token);
					uni.showToast({
						title: "登陆成功",
						duration: 3000,
						icon: "success"
					})

					// 我的收藏页面，如果没登陆，点击收藏按钮跳转到登陆页面，登陆成功以后回到上一个页面
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							// 刷新上个页面数据
							success: () => {
								let page = getCurrentPages().pop();
								if (page) {
									page.onLoad(page.options); //执行上个页面的方法
								};
							}
						})
					}, 1000)
				}
			},
			// 点击按钮弹出勾选用户协议
			btn_Select() {
				uni.showToast({
					title: '请先阅读并勾选用户协议',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
			},
		}
	}
</script>

css部分:

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		padding-top: 346rpx;
		align-items: center;
		width: 100%;
		// height: 100vh;
		background-color: #F5F7F9;

		.logo {
			width: 160rpx;
			height: 160rpx;
			padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 20px 2px rgba(226, 33, 151, 0.25999999046325684);
			border-radius: 24rpx;
		}

		.logo image {
			width: 100%;
			height: 100%;
		}

		.btn-login {
			position: relative;
			margin-top: 144rpx;
			padding-left: 60rpx;
			width: 574rpx;
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			border-radius: 25px;
			background-color: #AF4184;
		}

		.btn-login::before {
			position: absolute;
			content: '';
			top: 24rpx;
			left: 140rpx;
			width: 48rpx;
			height: 48rpx;
			background: url(../../static/imges/my/icon_wx.png) no-repeat;
			background-size: 100% 100%;
		}

		.agreement {
			display: flex;
			margin-top: 300rpx;
			font-size: 24rpx;

			.ck_radio {
				vertical-align: middle;
				margin-top: -6rpx;
			}

			.tips {
				margin-left: 15rpx;
			}

			.info {
				color: #02C9AA;
			}
		}
	}
</style>