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
}