uniapp 微信小程序 获取手机号/用户授权(最详细)

uniapp 微信小程序 获取手机号/用户授权(最详细)_第1张图片
小程序获取手机号,要分几步,再次做个记录,希望耐心看完。

1. 第一步 需要用户获取code,
2. 拿code获取openId 和 session_key,
3. 拉去获取手机号码权限,允许授权 获取encryptedData和iv
4. 手机号码是在后台获取的,我们只需要传 encryptedData,iv,sessionKey,openId这个四个字段就能获取到用户手机号了。具体详细步骤请看下面。

  1. 用户获取code
    uniapp 微信小程序 获取手机号/用户授权(最详细)_第2张图片
    调用login方法获取code
	onLoad(){
			this.getuserNew();               // 获取openid
    },
	
	methods:{
	
	     // 获取code
		getuserNew(){
					uni.login({
					  provider: 'weixin',
					  success:res=>{
					        console.log(res.code);  
		              }
					});
		 },

  }

	

  1. 通过code获取获取openId 和 session_key,
    在这里插入图片描述

    方法1, 通过微信官方接口获取

 uni.request({  
	url: 'https://api.weixin.qq.com/sns/jscode2session',  
		method:'GET',  
		data: {  
			appid: 'wx9*******214e0',                         //你的小程序的APPID  
			secret: '33c4d17e4********71253',                 //你的小程序的secret,  
			js_code:res.code,                                 //wx.login 登录成功后的code  
			grant_type: 'authorization_code',
		},  
		success: (cts) => {  
			// 换取成功后 暂存这些数据 留作后续操作  
			this.openId=cts.data.openid               //openid 用户唯一标识  
			this.unionid=cts.data.unionid             //unionid 开放平台唯一标识   当公众号和小程序同时登录过才会有
			this.session_key=cts.data.session_key     //session_key  会话密钥  
			console.log(cts)
			console.log(this.openId,this.session_key)
		}  
	}); 

方法2 通过后台接口获取

传我们在第一步获取的code参数去获取openId 和 session_key,
  uni.request({
		url:"http://192.168.0.93:6042/login/verifyMini****Code",
		method:"POST",
		data:{
			data:{
				code:res.code,
			}
		},
		success:(res)=>{
			if(res.data.errorinfo == null){
				console.log(res.data)
				this.openId=res.data.data.openId               //openid 用户唯一标识  
				this.session_key=res.data.data.sessionKey     //session_key  会话密钥  
				console.log(this.openId,this.session_key);
			}
		}
	})
  1. 拉去获取手机号码权限,允许授权 获取encryptedData和iv
    uniapp 微信小程序 获取手机号/用户授权(最详细)_第3张图片
 
// 获取用户手机号
	getPhoneNumber(e){
		
		console.log(e.detail.errMsg)                                            // 判断用户是否允许获取手机号
		console.log(e.detail.iv)                                                    // 参数 iv
		console.log(e.detail.encryptedData)                               // 参数encryptedData
		if(e.detail.errMsg == "getPhoneNumber:ok"){                // 用户允许或去手机号
			uni.request({
				url:"http://192.168.0.93:6042/login/miniProgramLogin",
				method:"POST",
				data:{
					data:{
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: this.session_key,
						openId: this.openId,
					}
				},
				success:(res)=>{
					if(res.data.errorinfo == null){
						console.log(res.data)       // 这个里面就有手机号了
						
					}
				}
			})
		}
	},
			

uniapp 微信小程序 获取手机号/用户授权(最详细)_第4张图片
这样就获取到了手机号码。

你可能感兴趣的:(微信端,小程序,uniapp,小程序,uni-app,前端)