uniapp微信小程序登录流程

1.登录

uni.login()

返回一个code,传入code请求后端接口,拿到session_key和openid。

// 获取用户登录状态
login() {
	uni.login({
		provider: 'weixin',
		onlyAuthorize: true,
		success: (res) => {
			let {data:{data:{session_key,openid}}} = suss
			uni.setStorage({
				key:"session",
				data:{session_key,openid}
			})
		}
	})	
},

2.获取用户信息

uni.getUserProfile

获取用户的信息,会得到signature,iv,encryptedData,将得到的session_key同时传入后端接口,获取后端返回的token,即表示登录成功

注意:uni.getUserProfile不能写在回调方法中,需要通过一个新的点击事件触发

根据最新微信官方要求,通过uni.getUserProfile将不再返回真实的用户头像和昵称,只会返回默认灰色头像和“微信用户”。需要用户通过头像昵称填写能力授予。

// 获取用户信息
getUserInfo() {
	uni.getUserProfile({
		desc: "用于登录小程序",
		success: (res) => {
			let {session_key} = uni.getStorageSync("session")
			let {
				signature,iv,encryptedData
			} = res
			this.$http.userLogin({
						session_key,
                        signature,
                        iv,
                        encryptedData,
                        mobile:this.mobile,
                        event: "login"
			}).then(info => {
				if(info.data.code){
					let {data:{data:{token}}} = info
					uni.setStorageSync("token",token)
					this.$store.commit("saveToken",token)
				}
			})
		}
	})

}

3.授权获取手机号

getPhoneNumber

getPhoneNumber用于将code换取用户手机号。 每个code只能使用一次,code的有效期为分钟。

获取手机号,得到一个code,将code传给后端接口,获取手机号

<button open-type="getPhoneNumber" @getphonenumber="getUserPhone">手机号一键授权</button>

// 获取用户手机号
getUserPhone(e){
	// 同意授权
	if(e.detail.code){
		this.$http.getUserPhone({code:e.detail.code}).then(res=>{
			if(res.data.code){
				this.mobile = res.data.data
			}else{
				uni.showToast({
					title:"手机号获取失败 请重试",
					icon:'none'
				})
			}
		})
	}else{ // 拒绝授权
		uni.showToast({
			title:"手机号获取授权失败",
			icon:'none'
		})
	}
				
},

4.头像昵称填写能力

头像选择

需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

昵称填写

需要将 input 组件 type 的值设置为 nickname,当用户在此input进行输入时,键盘上方会展示微信昵称。

从基础库2.24.4版本起,在onBlur 事件触发时,微信将异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。

<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
<u-input type="nickname" @blur="nicknameChange" placeholder="昵称"></u-input>

// 选择头像
onChooseAvatar(e) {
	let {avatarUrl} = e.detail
    // 图片直接上传到服务器
	upload(...)
}

// 用户昵称改变
nicknameChange(val){
	this.nickName = val
}

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值