实现效果：
小程序在线考试
目录
1.安装Vant Weapp
2.用户授权实现流程
兼容处理：
onLoad() { {
if (wx.getUserProfile) {
console.log("支持 wx.getUserProfile")
} else {
console.log("不支持 wx.getUserProfile");
}
}
login.wxml
<view class="loginContent">
<view wx:if="{{isHide}}">
<view wx:if="{{canIUseGetUserProfile}}">
<view class='header text-center mb10'>
<image src='../../icons/logo.png'></image>
</view>
<view class='content text-center'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<van-button type="info" class="loginBtn" round bindtap="getUserProfile" block>授权登录</van-button>
</view>
<view wx:else>请升级微信版本</view>
</view>
</view>login.wxss
.loginContent{
width: 80%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.loginText{
text-align: center;
margin-bottom:50rpx;
}
.header image {
width: 100rpx;
height: 100rpx;
}
.content {
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 20rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
.loginBtn button{
font-size:32rpx;
}app.js
App({
globalData: {
apiUrl:"http://192.168.2.00:8010",
canIUseGetUserProfile:false,
},
onLaunch: function(options) {
if (wx.getUserProfile) {
console.log("支持 wx.getUserProfile")
this.globalData.canIUseGetUserProfile = true;
} else {
console.log("不支持 wx.getUserProfile");
this.globalData.canIUseGetUserProfile = false;
}
// 查看是否授权
let openId = wx.getStorageSync('openId');
console.log(openId,"用户信息授权获取")
if(openId){
wx.switchTab({
url: '/pages/myCenter/index',
})
}
},
})login.js重要代码
1.解决第一次获取用户信息、手机号失败问题
wx.login({
success: res => {
if(res.code){
console.log("code", res.code)
}
}
})2.用户授权流程
3.用户授权方法
getUserProfile() {
wx.getUserProfile({
desc: '获取你的昵称、头像、地区及性别', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res)=> {
// console.log(res,"获取用户信息")
this.setData({
encryptedData:res.encryptedData,
iv:res.iv
})
// 调用微信的 wx.login 接口，从而获取code
wx.login({
success: res => {
this.handleSessionKeyAndOpenId(res.code);
}
});
},
fail:()=>{
wx.showModal({
title: '授权提示',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
});
},3.获取openId
handleSessionKeyAndOpenId(code){
wx.request({
url: app.globalData.apiUrl+"/wxUser/getSessionKeyAndOpenId",
data: {
code:code
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) =>{
console.log(res.data.data.openId,"获取openId")
// 获取用户信息
wx.setStorageSync('openId',res.data.data.openId);
// this.handleUserInfo(res.data.data.sessionKey,res.data.data.openId);
wx.request({
url: app.globalData.apiUrl+'/wxUser/examUserInfo',
data: {
openId:res.data.data.openId
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) =>{
console.log(res,"是否等记")
if(res.data.code==200){
wx.switchTab({
url: '/pages/examList/index',
})
}else{
// wx.showToast({
// icon: "none",
// title: res.data.msg
// })
wx.switchTab({
url: '/pages/myCenter/index',
})
}
},
fail: (err) =>{
wx.showToast({
icon: "none",
title: '请求失败'
})
}
})
},
fail: () =>{
wx.showToast({
icon: "none",
title: '获取用户code失败'
})
wx.clearStorageSync();
}
})
},完整代码 ：
const app = getApp();
Page({
data: {
//判断小程序的API，回调，参数，组件等是否在当前版本可用。
// canIUse: wx.canIUse('button.open-type.getUserProfile'),
openId:"",
sessionKey:"",
canIUseGetUserProfile:app.globalData.canIUseGetUserProfile,
isHide:false,
userInfo:{},//用于存放获取的用户信息
openId:"",
},
onLoad: function() {
// 解决第一次获取用户信息、手机号失败问题
wx.login({
success: res => {
if(res.code){
console.log("code", res.code)
}
}
})
// 查看是否授权
let openId = wx.getStorageSync('openId');
if(openId){
this.setData({
isHide:false
})
// 检查openid是否等记了
wx.request({
url: app.globalData.apiUrl+'/wxUser/examUserInfo',
data: {
openId:wx.getStorageSync('openId')
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) =>{
if(res.data.code==200){
console.log("跳转考试页")
wx.switchTab({
url: '/pages/examList/index',
})
}else{
console.log("跳转个人页")
wx.switchTab({
url: '/pages/myCenter/index',
})
}
},
fail: (err) =>{
wx.showToast({
icon: "none",
title: '请求失败'
})
}
})
}else{
// 没有授权
this.setData({
isHide:true
})
}
},
getUserProfile() {
wx.getUserProfile({
desc: '获取你的昵称、头像、地区及性别', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res)=> {
// console.log(res,"获取用户信息")
this.setData({
encryptedData:res.encryptedData,
iv:res.iv
})
// 调用微信的 wx.login 接口，从而获取code
wx.login({
success: res => {
this.handleSessionKeyAndOpenId(res.code);
}
});
},
fail:()=>{
wx.showModal({
title: '授权提示',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
});
},
handleSessionKeyAndOpenId(code){
wx.request({
url: app.globalData.apiUrl+"/wxUser/getSessionKeyAndOpenId",
data: {
code:code
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) =>{
console.log(res.data.data.openId,"获取openId")
// 获取用户信息
wx.setStorageSync('openId',res.data.data.openId);
wx.request({
url: app.globalData.apiUrl+'/wxUser/examUserInfo',
data: {
openId:res.data.data.openId
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) =>{
console.log(res,"是否等记")
if(res.data.code==200){
wx.switchTab({
url: '/pages/examList/index',
})
}else{
wx.switchTab({
url: '/pages/myCenter/index',
})
}
},
fail: (err) =>{
wx.showToast({
icon: "none",
title: '请求失败'
})
}
})
},
fail: () =>{
wx.showToast({
icon: "none",
title: '获取用户code失败'
})
wx.clearStorageSync();
}
})
},
})未完待续.........
