微信小程序 免登陆,授权获取手机号

时间:2025-01-19 13:26:57

最近改造一个微信小程序项目:

原登录逻辑:直接获取用户信息()进行登录

改造后:用户登录前先获取用户手机号 判断时候注册过 再进行后续操作(这边主要介绍如何直接获取手机号)

实现逻辑

 

微信小程序页面代码(wxml)比较简单没什么好介绍的

<view class="container">
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="login-btn one"
      type="warn">微信手机号码授权</button>
  </view>
  <view class="form-box">
    <button type="primary" class="login-btn two" catch:tap="wxBack">暂不授权</button>
  </view>
</view>

重点JS实现

var api = require('../../../config/');
var util = require('../../../utils/');
var user = require('../../../utils/');

var app = getApp();
Page({
	data: {
		sessionkey: '',
		code: '',
		openId: undefined,
		unionId: undefined,
	},
	onLoad: function (options) {
		// 页面初始化 options为页面跳转所带来的参数
		// 调用获取code 并调用后台获取sessionKey
		var that = this;
		//刷新sessionKey
		({
			success(res) {
				({
					code: 
				})
                //后台通过code获取openId和sessionkey方法
				(, {
					code: ,
				}, 'GET').then(res => {
                    //将返回值绑定到data中
					({
						openId: ,
						unionId: ,
						sessionkey: 
					})
				})
			}
		})
	},
	onReady: function () {

	},
	onShow: function () {
		// 页面显示
	},
	onHide: function () {
		// 页面隐藏

	},
	onUnload: function () {
		// 页面关闭

	},

	wxBack() {
		({
			url: '/pages/positionList/positionList'
		})
	},



	getPhoneNumber(e) {
		let that = this;
        //后台解密手机号方法
		(, {
			sessionKey: ,
			openId: ,
			unionId: ,
			wxPhoneCiphertext: 
		}, 'POST').then(res => {
			if ( === 0) {
				//已有账号 登录成功
				//存储用户信息
				('userInfo', );
				('token', );
				('tokenStatus', 1)
				 = true;
				('isWxUser', 1);
				({
					url: '/pages/recruitPerson/recruitPerson',
				})
			} else if ( === 509) {
                //没有账号进一步获取用户信息
				();
			}
		})
	},

	getUserProfile() {
		// An highlighted block
		({
			title: '温馨提示',
			content: '点击确定获取微信头像及昵称',
			success(res) {
				if () {
					({
						desc: "获取你的昵称、头像、地区及性别",
						success: res => {
							().then(res => {
								 = true;
								('isWxUser', 1);
								({
									url: '/pages/recruitPerson/recruitPerson',
								})
							}).catch((err) => {
								 = false;
								('微信登录失败');
							});
						},
						fail: res => {
							//拒绝授权
							('您拒绝了请求');
							return;
						}
					})
				} else if () {
					//拒绝授权 showErrorModal是自定义的提示
					('您拒绝了请求');
					return;
				}
			}
		})
	},

})