步骤一:调用login函数拿到code、iv、encryptedData,然后调用后端接口把code、iv、encryptedData传给后端,后端返回openid,后端的code=0是新用户需要注册,在拿到用户的手机号 。code=1是老用户,拿到token直接登录
步骤二:当code等于0的时候,在页面上需要添加一个获取手机号的按钮,通过按钮的事件 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" 来获取用户手机号
步骤三:当拿到了用户的手机号,在步骤一的时候拿到了openid,把手机号和openid,调用后端接口然后后端返回token,存入本地
登录成功
部分HTML的代码
就是一开始是确定登录的按钮,如果是新用户就需要把确定登录的按钮变成获取用户手机号的按钮,然后来通过按钮的原生事件来获取手机号
<view class="agreement flex">
<view class="yuan"></view>
<view class="consts">
微信授权将获取您的公开信息(头像、昵称等)注册登录
</view>
</view>
<view class="butbox">
<view class="but1 flex-center" @click="login" v-if="isbut">
<image :src="`${IMG_HOST}/image/weixin.png`" mode=""></image>
<view class="text ">
微信授权登录
</view>
</view>
<button type="default" class="but1 logbut" v-else open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">获取手机号</button>
<view class="but2" @click="nologin">
暂不登录
</view>
<!-- <button bindtap="login">登录</button> -->
</view>
data() {
return {
isbut:true,
// 获取code值
loginInfo: {
code: '',
iv: '',
rawData:'',
encryptedData: '',
openid:'',
session_key:''
},
// 获取手机号
params: {
loginInfo:''
},
// 注册小程序
register:{
mobile:'',
open_id:''
}
}
},
// 点击登录
login(){
console.log(1);
let that = this
//调用微信小程序的登录接口
wx.login({
success(e) {
// console.log(e);
that.loginInfo.code = e.code //拿到的code存储在data中
that.loginInfo.iv = e.iv
that.loginInfo.encryptedData = e.encryptedData
console.log(that.loginInfo);
wx.showModal({
title: '温馨提示',
content: '微信授权登录后才能正常使用小程序功能',
cancelText: '拒绝',
confirmText: '同意',
success( sucessInfo ) {
//调用微信小程序的获取用户信息的接口
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
lang: 'zh_CN',
success:(info)=> {
console.log('info111',info);
// `````````````````````````````````````````````
// 调用后台接口拿到openid
postLogin(
{code:that.loginInfo.code,iv:that.loginInfo.iv,encryptedData:that.loginInfo.encryptedData},
).then((res)=>{
console.log('22',res);
// code==1为已注册直接登录
if(res.data.code===1){
console.log(res.data.code);
uni.setStorage({
key:"token",
data:res.data.msg,
success: function (){
console.log("存储成功")
}
})
// 返回上一页
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
uni.navigateBack({
success: function() {
beforePage.onLoad(); // 执行上一页的onLoad方法
}
});
// code==0是新用户需要注册,拿到open_id和session_key,把登录按钮改成获取手机号的按钮
}else if(res.data.code===0){
console.log('fff');
that.register.open_id=res.data.msg.openid
that.params.session_key=res.data.msg.session_key
// console.log(that.params.session_key);
that.isbut=false
}
console.log('res.data',res.data);
})
//把获取到的信息复制到data中的loginInfo中
that.loginInfo = Object.assign( that.loginInfo, info )
// 个人信息
uni.setStorage({
key:"login",
data:that.loginInfo.userInfo,
success: function (){
console.log("存储成功")
}
})
uni.getStorage({
key:"login",
success: function(res){
console.log(res.data); //123456789
}
})
//调用后台的接口,把所有整合的个人信息传过去
// that.handlerLogin( that.loginInfo )
},
fail(e) {
console.log('获取用户信息失败', e)
}
})
},
fail() {
console.log("拒绝")
},
complete() {}
})
},
fail(e) {
console.log('fail', e)
wx.showToast({
title: '网络异常',
duration: 2000
})
return
}
})
}
// 获取手机号
getPhoneNumber(e){
console.log(e.detail);
this.params.encryptedData = e.detail.encryptedData;
this.params.iv = e.detail.iv;
this.LoginPhone()
},
// 获取到了手机号
LoginPhone(){
console.log(this.params);
postLoginPhone(this.params).then((res)=>{
console.log('phone',res.data);
this.register.mobile=res.data.msg.phoneNumber
console.log(this.register);
// 小程序注册
this.LoginRegister()
})
},
// 小程序注册
LoginRegister(){
postLoginRegister(this.register).then(res=>{
console.log('注册',res.data);
uni.setStorage({
key:"token",
data:res.data.msg,
success: function (){
console.log("存储成功")
}
})
// 返回上一页,并且更新onLoad()中的方法
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
uni.navigateBack({
success: function() {
beforePage.onLoad(); // 执行上一页的onLoad方法
}
});
})
},