uniApp 登录篇 ＜小程序登录＞

接下来会陆续更新 小程序、h5公众号、支付宝(可能)  ，只要涉及到的使用uniApp登录的业务，都会记录在登录篇中，不定期更新。

第一步:通过uni.login 获取CODE 回传给服务器 需要服务器端提供一个接口

因为很多地方要使用 所以我封装了一下 并且挂载到了vue的原型

//微信静默获取Code并返回
V_Proto.$getCodeWx = async function() {
//这个函数会返回一个CODE 是通过uni.login得到的 如果没有获取到则会返回false 
	let that = this;
	let [err, res] = await uni.login({
		provider: 'weixin'
	})
	if (res) {
		return res
	}
	return false
}
 

第二步 获取Token (后端自定义的登录态)

//有了CODE后 可以调取接口 后端可以通过CODE 获取到用户的基础信息 (不包含头像和昵称) 

//此时的登录是静默的 用户无感知的 

//写一个方法挂载到全局 多处需要用到的时候方便调用


//小程序完整登录流程
V_Proto.$WxMpLogin = async function() {
	//尝试抛出错误
	try {
		let that = this;
		//拿到lifeData 持久化保存数据体
		let lifeData = uni.getStorageSync('lifeData');
		//如果local中不存在Token 和用户完整信息 则重新登录并且授权
		if (!lifeData.vuex_Token||!lifeData.vuex_userInfoAuth) {
			let result = await that.$getCodeWx(); //静默登录Code拿取
			//Code为正常 则执行下一步获取用户授权
			if (result) {
				getToken({
					code: result.code
				}).then(res => {
					that.$u.vuex('vuex_Token', res.data.result.userToken); //Token存入local且存入全局配置Com用于调用Api
					com.userToken = res.data.result.userToken;  
					//开始请求用户授权 将昵称头像进行获取 
					this.$getWxInfo(); 
				})
			}
		}else{
			//否则Token存在且用户信息也完整的话 将com的userToken保持和local同步
			com.userToken = lifeData.vuex_Token;
			console.log(com,'保持登录态')
		}  
	} catch (e) {
		console.log(e, '尝试获取微信小程序登录失效..')
	}
}

//第三步 在获取了Token之后我们需要调用提前封装好的获取用户头像和信息的方法

//同样 挂载到vue上

//弹出窗口并请求用户授权拿取头像昵称
V_Proto.$getWxInfo =  function() {
	let that = this;
	uni.showModal({
		title: '温馨提示',
		content: '请您授权微信登录后,才能正常使用小程序功能',
		success:res => {
			if (res.confirm) {
				console.log('用户1次授权同意')
				uni.getUserProfile({
					desc: '获取您的昵称、头像、地区及性别',
					success(info) { 
						getWxInfo(info).then(res=>{
							if(res.data.code==200){
								//返回正常则将完整信息包含用户头像和名称进行存入
								that.$u.vuex('vuex_userInfoAuth',res.data.result);
							}else{
								console.log(res,'请求获取用户头像信息失败')
							}
						})
					},
					fail(err) {
						console.log(err,'用户取消授权');
					}
				})
				console.log(res,'详细的用户信息')
			} else if (res.cancel) {
				//如果用户点击了取消按钮 
				console.log('用户1次授权取消');
				uni.showToast({
					title: '您已取消授权!',
					icon: 'error',
					duration: 2000
				});
			}
		}
	})
}

//这是二次封装的接口请求 以及需要传递的参数

//comParams 是我全局引用的配置参数 会跟随Token变化而改变值 

//根据iv 和二次授权 获取微信个人用户基本信息 不包含手机号
export function getWxInfo(data){
	return http.get('接口路径后端给你的',{
		params:{ 
			userToken:comParams.userToken,
			encryptedData:data.encryptedData,
			iv:data.iv,
		}
	})
}

//根据iv 和二次授权 获取微信个人用户基本信息 包含手机号
export function getPhoneWxInfo(data){
	return http.get('接口路径后端给你的 由后端拿到你传递的数据进行解密',{
		params:{ 
			userToken:comParams.userToken,
			encryptedData:data.encryptedData,
			iv:data.iv,
		}
	})
}

以上三步做完 基本上已经拿到了用户的Token 头像 昵称 等信息 

//第四步 引导用户获取手机号 并根据业务 是直接绑定 还是获取短信认证后 再进行绑定 

//我这边业务是获取到绑定手机号 将手机号帮用户输入在input中 用户点击获取验证码 再绑定手机号

//首先需要一个button 按钮在页面上引导用户进行点击 绑定手机

<button class="bindPhone-btn" open-type="getPhoneNumber"
								@getphonenumber="onGetPhoneNumber"></button>

//注意 必须是button 按钮 但是当然 他会很丑 所以需要你自己写class 完善成你需要的样子

//我这边是改变了他的背景图 将他的边线 去掉了 否则会很难看 去边线的CSS代码如下 
//CSS - > 
.bindPhone-btn::after{
			border: none !important;
}

//用户点击后 触发 onGetPhoneNumber 也会触发小程序的获取手机号弹窗 用户点击确认和拒绝 都有回调
//JS - >
onGetPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log("用户点击了接受")
					console.log(e.detail);
                    //用户点击接受后 你会拿到和之前获取基本信息一样的iv 和en 几个参数 传递给后端，后端调取微信官方的接口并且进行解密 再回传手机号到前台
					getPhoneWxInfo(e.detail).then(res=>{
						console.log(res,'获取到的手机号');
						if(res.data.result){
							//如果接口成功返回了手机号  执行你需要的逻辑
						}else{
							console.log(res,'获取绑定的手机号失败my.js')
						}
					})

				} else {
					console.log("用户拒绝了获取手机号!")
				}
			},

再来几张效果图 

        

 

 

以上差不多就是登录到获取手机号 到绑定的流程了 。我也是第一次做，后续有任何问题会及时更新。希望能帮到大家。