uniapp 小程序微信登录

啥也不说先上效果图

html代码

<template>
	<view>
	<view class='header'>
		<image src='../../static/img/wx_login.png'></image>
	</view>
	<view class='content'>
		<view>申请获取以下权限</view>
		<text>获得你的公开信息(昵称，头像、地区等)</text> 
	</view>
	<view>
		<button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">{{loginInfo.openid != "" && loginInfo.openid != undefined ? "已授权" : "小程序授权"}}</button>
	</view>
	</view>
</view>
</template>

     js代码

<script>
import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				code: "",
				SessionKey: '',
				encryptedData: "",
				iv: "",
				OpenId: '',
				nickName: null,
				gender: 0,
				avatarUrl: null,
				isCanUse: uni.getStorageSync('isCanUse') //默认为true  记录当前用户是否是第一次授权使用的
			}
		},

		onLoad() {
			var _this=this
			uni.getSetting({
				success(res) {
					console.log("授权：", res);
					if (!res.authSetting['scope.userInfo']) {
						//这里调用授权
						console.log("当前未授权");
					} else {
						//用户已经授权过了
						console.log("当前已授权");
						//_this.login();
					}
				}
			})
		},
		methods: {
			appLoginWx() {
				var _self = this;
				// #ifdef MP-WEIXIN
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res) => {
									_self.code = res.code;
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => { //这里请求接口
											console.log(res);
											console.log(info);
											_self.login();
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})

								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
				//#endif
			},login() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});

				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log("登录", loginRes.code)
						_this.code = loginRes.code;
						if (!_this.isCanUse) {
							//非第一次授权获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									console.log('login用户信息：', infoRes.userInfo);
									//获取用户信息后向调用信息更新方法
									_this.nickName = infoRes.userInfo.nickName; //昵称
									_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
									_this.gender = infoRes.userInfo.gender;
									_this.updateUserInfo(); //调用更新信息方法
								},
								fail(err) {
									console.log("-----------" + err)
								}
							});
						}
						// 将用户登录code传递到后台置换用户SessionKey、OpenId等信息

						uni.hideLoading();
					},
				})

			},
			updateUserInfo() {
				var _this = this;
				var form = {
					appid: "你的微信小程序appid",
					secret: "需要在开发选项里面获取",
					js_code: "你登录拿取的code",
					grant_type: "authorization_code",//这个是写死的 就直接可以使用authorization_code
				}

				good.wxget("https://api.weixin.qq.com/sns/jscode2session", form, function(data) {
					
				});
			}
		}
	}
</script>

css样式

<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>

这就是uniapp 微信小程序的登陆了 下面是我参考的文章

uni-app微信小程序登录授权的实现 https://freexyz.cn/dev/20480.html

【小程序】使用uni-app搭建小程序环境--登录流程

https://www.cnblogs.com/websmile/p/12148305.html

使用uni-app开发微信小程序之登录模块

这个是最主要的

https://www.cnblogs.com/wfaceboss/p/10472413.html