uniapp 微信小程序登录

先配置uniapp的小程序应用ID跟密钥

然后看代码，登录页面：

<template>
	<!-- login view html start -->
	<view>
		<view>
			<view class="header">
				<!-- <image src="/static/img/public/login-wx.png"></image> -->
			</view>
			<view class="content">
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像、地区等)</text>
			</view>
			<button class="bottom" type="primary" withCredentials="true" @tap="getUserProfile">授权登录</button>
            <!-- 注意，这里要用@tap -->
		</view>
	</view>
	<!-- login view html end -->
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			getUserProfile() {
				uni.getUserProfile({
					desc: 登录,
					success: (info) => {
						console.log(info)
                        //这里取到的是用户的信息，自己安排自己的业务
						uni.login({
							provider: weixin,
							success: (res) => {
								console.log(res)
                                //这里获取的是用户的code，用来换取 openid、unionid、session_key 等信息，再将信息丢给后台自己的登录业务就行了
							}
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		},
		onLoad(options) {
			//默认加载
			// this.getUserProfile();
		}
	};
</script>

<style>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
</style>

方法：