uniapp实现微信小程序手机号授权

首先要进行手机号授权，app_id必须是企业类型的

一般手机号之前我们会先进行一次静默授权，获取code

首先看静默授权

我通常就封装成一个方法

login.js

export function login(){
	      uni.login({
				success: res => {
					console.log(res)
					uni.request({
						url: '',
						method: "POST",
						header: {
						
						},
						data: {
							code: res.code
						},
						success: result => {
							console.log(result)
							uni.showToast({
								title: result.data.msg,
								icon: "none"
							})
							if(result.data.status =='success'){
								console.log(result.data.status)
								uni.reLaunch({
									url:'/pages/index/index'
								})
								uni.setStorageSync('token',result.data.token)
							}else{
								uni.login({
									success:res=>{
										uni.setStorageSync('code',res.code)
									}
								})
							}
						
						},
						fail: (err) => {
							
						}
					})
				}
			})
		}

啥意思呢？

上面的result.data.status =='success,这是后台返回的一个状态码，意思就是我们手机号授权过，就不用进行第二次授权了，直接跳到主页面
并且后台会返回一个token,然后我们存在本地缓存里面

这个需要放在我们的页面路由里面，因为这是我们一进页面就要判断的，一般放在APP.vue中的onLaunch里面

接下来就是手机号授权页面了，因为微信现在不允许一进页面就弹出授权框，必须通过button点击才行

<button type="primary" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">微信用户登录</button>

methods

export default {
		methods: {
			onGetPhoneNumber(e) {
				console.log(e)
				uni.showLoading({
					title: '请等待',
					mask: false
				})
				const encryptedData = e.detail.encryptedData
				const iv = e.detail.iv
				if(e.detail.errMsg =="getPhoneNumber:ok"){
					this.login(encryptedData, iv)
				}else{
					uni.showToast({
						title: '请重新获取',
						icon: "none"
					})
				}
			},
			login(encryptedData, iv) {
					uni.hideLoading()
						uni.request({
							url: '',
							method: "POST",
							header: {
							},
							data: {
								code: uni.getStorageSync('code'),
								encryptedData: encryptedData,
								iv: iv
							},
							success: result => {
								if (result.data.status == 'success') {
									uni.showToast({
										title: '授权成功',
										icon: "none"
									})
									uni.reLaunch({
										url:'../index/index'
									})
									uni.setStorageSync('token', result.data.token)
								} else {
									uni.hideLoading();
									uni.showToast({
										title: result.data.msg,
										icon: "none"
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									title: err.data.msg,
									icon: "none"
								})
							}
						})			
			}
		},
	}

手机号授权传递三个参数，code，encryptedData，iv

code在静默授权已经存到本地了，encryptedData和iv我们通过onGetPhoneNumber已经获取了，当我们点击允许时候就保存token到本地，同时跳转到主页面，拒绝就弹出请重新获取

一般还可能存在一个登陆过期的问题，状态码一般为403吧，一般就写在封装的网络请求里面

   if(res[1].statusCode ==403){
				uni.showToast({
					icon:'none',
				    title: '登陆过期,请重新授权登录',
				    duration: 3000
				});
				uni.reLaunch({
					url:'/pages/login/login',
				})
				login()
				
			}

如果res[1].statusCode ==403，就让它返回login页面重新授权，然后我们调用login方法，让它重新执行一次，然后自动再跳转到主页面即可