UniApp ，微信小程序简单易懂实现小程序的登录功能

于 2020-06-13 22:56:25 发布
阅读量3.6k 收藏 24
点赞数 2
分类专栏： 微信小程序 小程序 uniapp 文章标签： 小程序 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46764048/article/details/106729976
版权

微信登录思路：在main.js 中封装公共函数，用于判断用户是否登录在main.js 中分定义全局变量，用于存储接口地址如果没有登录、则跳转至登录页面进入登录页面通过 wx.login 获取用户的 code通过 code 获取用户的openID和密钥

微信登录思路：

  1. 在main.js 中封装公共函数，用于判断用户是否登录
  2. 在main.js 中分定义全局变量，用于存储接口地址
  3. 如果没有登录、则跳转至登录页面
  4. 进入登录页面
  5. 通过 wx.login 获取用户的 code
  6. 通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】
  7. 通过 openId 调用后台 Api 获取用户的信息
  8. 获取成功，则说明已经授权过了,直接登录成功
  9. 获取失败，则说明没有授权过，需要授权之后才能进行登录
  10. 用户点击页面微信登录按钮【 <button open-type="getUserInfo"></button>】
  11. 获取用户数据，然后调用后台接口写入数据库  

在 main.js 中添加如下

/ 封装全局登录函数
// backpage, backtype 2个参数分别代表：
// backpage : 登录后返回的页面
// backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]
Vue.prototype.checkLogin = function( backpage, backtype ){
	// 同步获取本地数据（uid、随机码、用户名、头像）
	var user_id = uni.getStorageSync('user_id');
	var user_nu = uni.getStorageSync('user_nu');
	var user_nm = uni.getStorageSync('user_nm');
	var user_fa = uni.getStorageSync('user_fa');
	if( user_id == '' || user_nu == '' || user_fa == ''){
		// 使用重定向的方式跳转至登录页面
		uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
		return false;
	}
	// 登录成功、已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]
	return [user_id, user_nu, user_nm, user_fa];
}
// 定义一个全局的请求地址
Vue.prototype.apiServer = 'http://0608.cc/'

3.在 pages/login/login.vue 中添加如下

<template>
<view>
<!-- 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" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权登录</button>
</view>
</view>
<!-- login view html end -->

</view>
</template>

<script>
export default {
	data() {
		return {
			appid: '*************',
			secret: '*************************',
			code: '',
			sessionKey: '',
			openId: '',
			userInfo: {
				avatarUrl: '',
				city: '',
				country: '',
				gender: 1,
				language: '',
				nickName: ''
			},
			pageOption: {}
		};
	},
methods: {
		// 第一授权获取用户信息 ===》按钮触发
		wxGetUserInfo() {
			let _self = this;
			// 1.获取用户的信息
			uni.getUserInfo({
				provider: 'weixin',
				success: ( infoRes ) => {
					console.log( infoRes )
					_self.userInfo = infoRes.userInfo
					// 2.提交数据到后台、写入数据库
					uni.request({
						url: _self.apiServer + 'appletsUserInfo',
						data: {
							openid: _self.openId,
							avatarUrl: _self.userInfo.avatarUrl,
							city: _self.userInfo.city,
							country: _self.userInfo.country,
							gender: _self.userInfo.gender,
							language: _self.userInfo.language,
							nickName: _self.userInfo.nickName
						},
						method: 'POST',
						success: res => {
							if( res.data.code != 0 )
							{
								uni.showToast({ title: res.data.msg, icon: 'none' });
								return false;
							}
							// 用户信息写入缓存
							uni.showToast({title: '登录成功'})
							uni.setStorageSync( 'user_id', res.data.res.u_id );
							uni.setStorageSync( 'user_nm', res.data.res.u_nickName );
							uni.setStorageSync( 'user_fa', res.data.res.u_avatarUrl );
							uni.setStorageSync( 'user_nu', res.data.res.u_regtime );
							// 然后跳回原页面
							if( _self.pageOption.backtype == 1 )
							{
								uni.redirectTo({ url: _self.pageOption.backpage })
							}else{
								uni.switchTab({ url: _self.pageOption.backpage })
							}
						},
						fail: () => {
							uni.showToast({ title: '用户信息操作失败', icon: 'none' });
						}
					});
				},
				fail: () => {
					uni.showToast({ title: '获取用户信息失败', icon: 'none' });
				}
			});
			return false
		},
login() {
			let _self = this;

			// 0. 显示加载的效果
			uni.showLoading({
				title: '登录中...'
            });
           uni.login({
				provider: 'weixin',
				success: loginRes => {
				console.log(loginRes);
				_self.code = loginRes.code;
// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
uni.request({
				url:
'https://api.weixin.qq.com/sns/jscode2session?appid=' +
_self.appid +'&secret=' +_self.secret +'&js_code=' +_self.code +'&grant_type=authorization_code',				
                success: codeRes => {
							console.log(codeRes);
							_self.openId = codeRes.data.openid;
							_self.sessionKey = codeRes.data.session_key;
// 3.通过 openId 判断用户是否授权
    uni.request({
				url: _self.apiServer + 'loginApplets',
                data: {openid: _self.openId},
				method: 'POST',	
                 success: openIdRes => {
									console.log(openIdRes);
									// 隐藏loading
									uni.hideLoading();
									// 还没授权登录、请先授权然后登录
                   if (openIdRes.data.code == 1) {
                          / 提示消息、让用户授权
					uni.showToast({ title: openIdRes.data.msg, icon: 'none' });
					}	
                    // 已经授权了、查询到用户的数据了
                    if (openIdRes.data.code == 0) {
										// 用户信息写入缓存
					uni.showToast({title: '登录成功'})
					uni.setStorageSync( 'user_id', openIdRes.data.res.u_id );
					uni.setStorageSync( 'user_nm', openIdRes.data.res.u_nickName );
					uni.setStorageSync( 'user_fa', openIdRes.data.res.u_avatarUrl );
					uni.setStorageSync( 'user_nu', openIdRes.data.res.u_regtime );
					// 然后跳回原页面
                    if( _self.pageOption.backtype == 1 ){
					uni.redirectTo({ url: _self.pageOption.backpage })
					}else{
					uni.switchTab({ url: _self.pageOption.backpage })
						  }
						  }
						  },
fail: () => {
			uni.showToast({ title: '获取授权信息失败', icon: 'none' });
									return false;
								}
							});
						},
fail: () => {
			uni.showToast({ title: '获取 SesssionKey OpenId 失败', icon: 'none' });
							return false;
						}
					});
				},
fail: () => {
			uni.showToast({ title: '获取 code 失败', icon: 'none' });
					return false;
				}
			});
			return false;
		}
},
onLoad( options ) {
		// 接收跳转的参数
		this.pageOption = options
		//默认加载
		this.login();
	}
};
</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>

4.在 pages/my/my.vue 中添加如下：

<template>
	<view>我的页面</view>
</template>

<script>
var loginRes;
export default {
	data() {
		return {};
	},
	onLoad() {
		// 加载定义好的方法
		loginRes = this.checkLogin('../my/my', 2);
		// 没有登录成功，返回空
		if (!loginRes) {
			return;
		}
	},
	methods: {}
};
</script>

<style></style>

 

搬砖鱼哥
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值