最近改造一个微信小程序项目:
原登录逻辑:直接获取用户信息()进行登录
改造后:用户登录前先获取用户手机号 判断时候注册过 再进行后续操作(这边主要介绍如何直接获取手机号)
实现逻辑
微信小程序页面代码(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;
}
}
})
},
})