如何用uni-app做微信小程序授权登录?!

540 阅读2分钟

我们使用在使用微信小程序的过程中,发现每次登录都需要用户去授权才可以登录小程序并使用其功能。在使用uni-app开发微信小程序自然也需要去做授权登录,关于微信小程序授权登录一共有两种方案。一、就是微信开发文档那一套的授权登录(在uni-app上使用不方便个人认为)。二、在uni-app做的小程序授权登录()。话不多说直接上代码。
*注意这里的逻辑问题,第一用户在未登录时的状态是 false的,这里我一般在缓存中存储一个USERTATUS来判断用户是否是登录状态。登录为true,未登录为false。通过这个来判断用户登录状态,做进一步的操作处理。

一、创建一个授权登录的界面

通过触发button按钮来进行授权登录等操作(登录样式可以自行设计)

image.png

二、点击授权登录后实现效果图如下

注意:这里的加载提示是自己写的用的是uni.showLoading
image.png
当点击授权登录后触发事件去获取用户的微信昵称和微信头像

				/* 获取微信昵称和微信头像 */
	uni.getUserProfile({
		desc: '获取用户基本资料',
		success: (res) => {
			that.wxuserInfo = res.userInfo;
			uni.login({
				provider: 'weixin',
				success: (res) => {
                                       //1.到这一步用户点击确认授权就已经获取到昵称和头像等信息了下面操作是进一步的操作
					if (res.code) {
                                           //2.这里就是拿到用户数据去后台请求 得到openid
						uni.request({
							url: 'www.wx.com',//这里网址换成自己的
							data: {
								code: res.code
							},
							method: 'POST',
										success(resOpenId) {
                                      //3.根据返回的openid来判断
                                      if (resOpenId.data.code > 0) {
                                          that.judgeRegister(resOpenId.data.message)
                                          //这里的方法是我的需求需要 需要去根据openid判断该用户是否已经注册过
						} else {
                                       //4.后续就是获取openid失败
                                       that.showErr("获取open失败1");
								}
							},
							fail(resOpenId) {
											that.showErr("获取open失败2");
							}
						})
					} else {
						that.showErr("登录失败");
					}
				},
				fail: (res) => {
					that.showErr("授权用户信息失败");
				}
			});

                },
                fail: (res) => {
                        that.showErr("用户信息授权失败");
                }
	});

直接将代码块复制粘贴使用即可。 如果只需要获取用户的账号信息等代码如下:

		/* 登录 */
		login() {
			uni.showLoading({
				title: '登录中',
				mask: true
			});
			let that = this;
			/* 获取微信昵称和微信头像 */
			uni.getUserProfile({
				desc: '获取用户基本资料',
				success: res => {
					that.wxuserInfo = res.userInfo;
					uni.login({
						provider: 'weixin',
						fail: res => {
							that.showErr('授权用户信息失败');
						}
					});
				},
				fail: res => {
					that.showErr('用户信息授权失败');
				}
			});
		},

后续注册判断是否登录可以自行处理添加。