之前经手的一个uniapp开发的app剩下一个微信登录的功能,之前没有独立搞过这一块,在网上查了很多资料已解决。记录一下实现的步骤,方便下一次copy。

一、首先在Hbuilder中配置微信授权登录

App模块配置中勾选OAuth -->微信登录 :填写appid和appsecret
微信授权登录

二、获取appid和appsecret

  • 1、appid和appsecret是在微信开放平台中获取的。首先需要去微信开放平台注册账号,创建移动应用(下图)
    微信开放平台

  • 2、 创建移动应用需要填写包名和签名(后续会介绍如何获取),按照提示填写完成 创建应用。
    在这里插入图片描述

  • 3、查看应用的appid和appsecret

在这里插入图片描述

三、获取第二步中的应用包名和应用签名

  • 1、应用包名是HBuilder打包时的Android包名:随便填写,遵循 xxx.xxx.xxx各式,不允许大写字母

在这里插入图片描述

  • 2、应用签名:点击上图的使用自有证书选项 点击前往生成证书页面
    在这里插入图片描述
    在这里插入图片描述

这一步也比较简单,按照文档上步骤来就行。特别需要注意的是上图中的md5码就是第二步中需要使用到的签名,忘记了可以利用上面查看证书信息的指令查看。密码也不要忘记了,打包app的时候需要输入密码。

四、登录按钮代码

上面的步骤都是为了获取微信授权的,下面开始写页面代码,比较简单

<template>
	<view class="page">
		<view class="login">
			<!-- <view class="header"><image src="/static/img/weixin.png"></image></view> -->
			<view class="content">
				<view class="title">legao 申请使用</view>
				<view class="info">你的微信头像、昵称、地区和性别信息</view>
			</view>
			<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="handleThirdLoginApp">授权登录</button>
			<button type="default" class="refuse" @click="goback">拒绝</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {};
	},
	methods: {
		goback() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		//app第三方登录

		handleThirdLoginApp() {
			var that = this;
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								// loginRes 包含access_token,expires_in,openid,unionid等信息
								//这里只需要把这些数据传递给后台,让后台去请求微信的接口拿到用户信息就可以了,
								//然后返回登录状态
								that.getApploginData(loginRes); //请求登录接口方法
							},

							fail: function(res) {
								that.$refs.uToast.show({
									title: '微信登录失败',
									type: 'warning'
								});
							}
						});
					}
				}
			});
		},

		//请求登录接口方法

		getApploginData(data) {
			var that = this;
			//这边是前端自己去调微信用户信息的接口,根据接口需要请求,如果不需要前端去获取的话就交给后端,可省去次操作
			uni.request({
				url: 'https://api.weixin.qq.com/sns/userinfo?access_token=' + data.authResult.access_token + '&openid=' + data.authResult.openid,
				method: 'GET',
				dataType: 'json',
				header: {
					'content-type': 'application/x-www-form-urlencoded' // 默认值
				},

				success(res) {
					console.log('【登录回调啾啾啾】', res);
					//前端调用微信接口,获取到微信用户的基本信息,传递给后台
					that.$api.wxloginThred({ unionid:data.authResult.unionid,image:res.data.headimgurl, nickname:res.data.nickname,}).then(res=>{
						console.log(res)
						if (res.statusCode == 200) {
							uni.setStorageSync('userInfo', JSON.stringify(res.data));
							uni.setStorageSync('logined', 1);
							that.$store.commit('SET_STATE', ['logined', true]);
							that.$store.commit('SET_STATE', ['userInfo', res.data]);
							uni.showToast({
								title: '登陆成功',
								duration: 2000
							});
							//登录成功 跳转到首页
							that.checkFirst()
						}
					});
				},
				fail() {
					that.$refs.uToast.show({
						title: '微信登录失败',
						type: 'warning'
					});
				}
			});
		},
		checkFirst(){
			this.$api.checkFirst({}).then(res=>{
				if(res.data == '1'){
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/begin'
						});
					}, 2000);
				}else{
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/index'
						});
					}, 2000);
				}
			})
		},
	}
};
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐