uniapp开发微信小程序之登录

最近开发了一个关于订餐的小程序,记录一下开发过程中运到的问题。
小程序登录实现流程:
(1)调用微信登录方法获取code
(2)后端接口根据code查询该用户是否手机号授权,已绑定openID
(3)若绑定过,则直接跳入页面;若没有,则进入授权页面,进行手机号授权
(4)获取手机号授权code
(5)后端接口通过微信登录code和手机号授权code,获取openID,绑定到该用户账号上
(6)登录成功

下面是简单调用微信的登录方法,获取code

getUserInfo() {
				wx.login({
					success(res) {
						console.log("登录信息", res)
						if (res.code) {
							console.log(res.code)
							// 调用接口。将登录code传给后端进行判断
						} else {
							console.log(res.errMsg)
						}
					}
				})
			},

根据微信的官方文档,获取用户用户手机号,通过将 button 组件 open-type 属性值设置为 “getPhoneNumber”。用户同意后,会回调 bindgetphonenumber 事件,获取到code 。这里需要注意下,如果是uniapp写的微信小程序,就不能直接回调 bindgetphonenumber 事件,可以用 @getphonenumber ;还有就是一定要根据e.detail.errMsg 判断一下用户是否拒绝授权。详细示例如下:

<template>
	<view>
		<view class="content">
			 <view class="login_box"">
				<view class="wx_img">
					<button class="button_2" open-type="getPhoneNumber" @getphonenumber="getUserInfo">
						<uni-icons type="weixin" color="#FFFFFF" size="25"></uni-icons>
						<text class="button_text_20">微信用户一键登录</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
export default {
	data() {
			return {
				code: '', //wx.log
			}
		},
	methods: {
			// 直接获取手机号授权
	  		/* getUserInfo(e) {
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
					// 如果拒绝授权登录,就走这里
				} else {
				   // 同意手机号授权登录
				    console.log(e.detail.code)
				   // 拿到手机号的授权code和上面微信授权的code之后。就可以传给后端,登陆啦
				}
			}, */
			// 授权登录,下面是先微信登录,再手机号授权登录
			getUserInfo(e) {
				let that = this
				wx.login({
					success(res) {
						console.log("登录信息", res)
						if (res.code) {
							that.code = res.code
							that.getPhoneNumber(e)
							console.log(that.code)
						} else {
							console.log(res.errMsg)
						}
					}
				})
			},
			// 手机号授权
			getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
					// 如果拒绝授权登录,就走这里
				} else {
				   // 同意手机号授权登录
				    console.log(e.detail.code)
				   // 拿到手机号的授权code和上面微信授权的code之后。就可以传给后端,登陆啦
				}
			}
		}
 }
  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值