uni-app 微信小程序 登录/注册功能
用户分为两类：没有注册的用户，已经注册的用户如何检测？首先需要触发用户点击，这里使用button按钮user.vue<button @click="getuserinfo()" class="btn">登录 / 注册</button>js 处理用户触发事件，调用getUserProfile获取用户信息，每次请求都会弹出授权窗口，用户同意后返回 userInfo。调用uni.
·
用户分为两类：没有注册的用户，已经注册的用户
如何检测？首先需要触发用户点击，这里使用button按钮
user.vue
<button @click="getuserinfo()" class="btn">登录 / 注册</button>
js 处理用户触发事件，调用getUserProfile获取用户信息，每次请求都会弹出授权窗口，用户同意后返回 userInfo。调用uni.login 返回用户登录凭证code码，将获取到的userlnfo、code参数传递给后端接口，接口返回状态码判断用户是否已经注册过了...................
getuserinfo(e) {
let that = this;
if (that.preventClick) {
that.preventClick = false; //防止用户重复点击弹出授权窗口
wx.getUserProfile({
desc: '用于完善用户资料',
lang: 'zh_CN',
success: (res) => {
//console.log(res);
that.preventClick = true;
uni.login({
provider: 'weixin',
success: function(loginRes) {
var user_info = JSON.stringify(res['userInfo']); //获取 getUserProfile API返回的用户信息
uni.setStorageSync('zc_userinfo', user_info); //将用户信息缓存在本地
uni.request({
header: {
'content-type': 'application/x-www-form-urlencoded'
},
url: '接口地址',
method: '接口类型',
data: {
code: loginRes['code'], //login API返回用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息
user_info: user_info, // code 和 userinfo 一起传参数回去给后台接口
},
success: function(res3) {
//console.log(res3);
if (res3.data.code == 0) { //根据接口返回的code码判断用户是否已经注册过了，（返回的code码和后端工程师商量好统一返回）
that.login(res3.data.data); //登录成功代表用户已经注册过了，代表数据库能查询到用户信息，这时候可以调用vuex.login()缓存用户信息、登陆状态
uni.showToast({
title: '登录成功',
duration: 1000
});
setTimeout(function() {
//跳转页面后自动刷新
uni.switchTab({
url: '/pages/user/user',
success: function(e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null){
return;
} else {
page.onLoad();
}
}
});
}, 200);
} else if (res3.data.code == -2) { //代表用户没有注册过，数据库查询不到相关信息，弹窗要求用户点击注册按钮
that.shows = "block";
} else { //其他原因登录失败
uni.showToast({
title: '授权登录失败！',
mask: true,
icon: 'none'
})
}
}
})
}
});
},
fail: (res) => { //接口调用失败的回调函数
//console.log(res)
that.preventClick = true;
}
})
}
},如果用户没有注册过，弹窗要求用户点击按钮进行注册
使用button按钮 设置获取用户手机号，可以从@getphonenumber回调中获取到用户信息
<button class="popup_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
lang="zh_CN">点击注册</button>
js调用uni.login 获取登录凭证 code，使用 code 换取 openid 和 session_key 等信息
使用encryptedData、iv、session_key换取手机号码，检查手机号码是否为合法的11位数字....
注册成功调用vuex.login()缓存用户信息、登陆状态
//小程序登录获取手机号码注册
getPhoneNumber: function(e) {
//console.log(e)
var that = this;
if (e.detail.errMsg != "getPhoneNumber:ok") {
uni.showModal({
title: '提示',
showCancel: false,
content: '未授权',
success: function(res) {}
})
} else {
//调用接口获取登录凭证
uni.login({
provider: 'weixin',
success: function(loginRes) {
//console.log(loginRes)
//获取到的code
var code = loginRes.code;
//获取openid
uni.request({
header: {
'content-type': 'application/x-www-form-urlencoded'
},
url: '接口地址',
method: '接口类型',
data: {
code: code, //login API返回用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息
},
success: function(res) {
//console.log(res)
var res = JSON.parse(res.data);
var se_key = res.session_key;
var encryptedData = e.detail.encryptedData;
var iv = e.detail.iv;
var openid = res.openid;
var unionid = res.unionid;
//换取手机号
uni.request({
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
url: '接口地址',
method: '接口类型',
data: {
encryptedData: encryptedData,
iv: iv,
se_key: se_key
},
success: function(res2) {
//console.log(res2)
var res2 = JSON.parse(res2.data);
if (res2.phoneNumber != "") {
var phoneNumber = res2.purePhoneNumber;
that.phone = phoneNumber;
var cellPhone = /^\d{11}$/;
if (!cellPhone.test(that.phone) || that.phone.length != 11 || that.phone.length == 0) {
uni.showToast({
title: '手机号获取失败,请重新登入或者联系管理员~',
duration: 2000,
icon: "none"
})
return;
} else {
//拿到手机号码开始注册
uni.request({
header: {
'content-type': 'application/x-www-form-urlencoded'
},
url: '接口地址',
method: '接口类型',
data: { //接口需要的数据
code: code,
binding: that.phone,
openid: openid,
unionid: unionid,
session_key: se_key,
user_info: uni.getStorageSync('zc_userinfo'),
//..............
},
success: function(res) {
//console.log(res)
//判断接口返回的状态码
if (res.data.code == 0) {
that.login(res.data.data); //注册成功，这时候可以调用vuex.login()缓存用户信息、登陆状态
uni.showToast({
title: '注册成功',
duration: 1000
});
that.shows ="none"; //关闭弹窗
setTimeout(function() {
uni.switchTab({
url: '/pages/user/user',
success: function(e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) {
return;
} else {
page.onLoad(); //跳转页面后自动刷新
}
}
});
},500);
} else if (res.data.code == -1) { //注册失败 根据接口返回的状态码做出判断，弹窗提示信息
that.code = "";
uni.showToast({
title: res.data.msg,
mask: true,
icon: 'none'
})
} else if (res.data.code == -2) {
that.mobile = "";
uni.showToast({
title: res.data.msg,
mask: true,
icon: 'none'
})
} else {
uni.showToast({
title: res.data.msg,
mask: true,
icon: 'none'
})
}
}
})
}
} else {
that.phone = '';
}
}
})
},
});
}
});
}
},
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)