2021-08-24

uniapp微信小程序一键登录、获取手机号

---

。

1.登录授权

//参考地址 https://uniapp.dcloud.io/api/plugins/login?id=login
//type：按钮的样式类型
//将open-type设置为getUserInfo

<button type="primary" class="btn_login flex_center" open-type="getUserInfo" @click="login">微信用户一键登录</button>

login(){
		uni.login({
			success: (res) => {
				let code = res.code;  //获取code  
			}
		})
		//注意uni.getUserProfill(获取用户信息)与uni.login()同级
		uni.getUserProfile({
				desc: '用户登录',  //声明获取用户个人信息后的用途，不超过30个字符
				success: async (res) => {
						//用户信息在res里   在这里进行用户点击允许后的操作
				},
				fail: (res) => {},
				complete: (res) => {}, //成功失败都会执行
		})

}

2.获取手机号码

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">点击获取手机号</button>

           onGetPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						icon: "none",
						title: "用户取消授权"
					})
				} else {
				 //点击允许   可以发请求啦
					this.$api('/tribe/user/authUserMobile', {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res=>{})
				}

			},

3.小程序的登录流程梳理

1.wx.login获取临时登录凭证code
2.发送code给后端，后端通过code，appid，appsecret调用微信接口，返回openid和session-key；
3.后端通过openid和session-key生成token返回给前端
4.前端把后端返回的token缓存起来