话不多说直接上代码
.js代码
首先
let app =getApp()
data: {
userInfo: null,
// 遮罩层
show:false
},
processLogin(){
this.setData({
show: true });
},
getPhoneNumber(options) {
console.log(options)
console.log(options.detail.errMsg)
console.log(options.detail.iv)
console.log(options.detail.encryptedData)
// 获取加密算法
let iv = options.detail.iv;
console.log(iv)
//获取加密数据
let encryptedData = options.detail.encryptedData;
console.log(encryptedData)
// 获取用户id
let uid = wx.getStorageSync('uid')
console.log(uid)
let sessionKey = wx.getStorageSync('sessionKey')
console.log(sessionKey)
let data = {
iv,
encryptedData,
uid,
sessionKey
}
console.log(data)
// 请求用户信息
app.http.entry(data).then(resp => {
console.log(resp)
// 注册成功
this.setData({
show:false,
userInfo: resp.data
})
})
},
login(){
wx.login({
// 先 wx.login 获取到code值
success: (resp) => {
console.log(resp);
// 传递参数
let code = resp.code;
console.log(code)
// let iv = wx.getStorageSync('iv')
// console.log(iv)
// let encryptedData = wx.getStorageSync('encryptedData')
// console.log(encryptedData)
// 登录接口,需要传code,iv,encryptedData
wx.getUserInfo({
success: function (resp) {
console.log(resp)
let iv = resp.iv;
// wx.setStorageSync('iv', iv)
console.log(iv)
let encryptedData = resp.encryptedData
// wx.setStorageSync('encryptedData', encryptedData)
console.log(encryptedData)
let obj = {
iv,
encryptedData,
code
}
// wx.request('/weChatLogin?code='+code)
app.http.logon(obj).then((resp) => {
console.log(resp);
// 将token保存到本地
let token = resp.data.data.token;
wx.setStorageSync('token', token)
let uid=resp.data.data.uid;
wx.setStorageSync('uid',uid)
let sessionKey=resp.data.data.sessionKey
wx.setStorageSync('sessionKey', sessionKey)
let openId =resp.data.data.openId
wx.setStorageSync('openId', openId)
})
}
})
}
})
},
.json代码
{
"usingComponents": {
"van-popup": "/miniprogram_npm/@vant/weapp/popup",
"van-button": "@vant/weapp/button/index"
}
}
.wxml代码
<!--pages/my/my.wxml-->
<!-- 头像区域 -->
<view class="mine_useravatar">
<view wx:if="{
{userInfo!=null}}" style="text-align:center">
<view style="height:100rpx"><image src="{
{userInfo.headUrl}}" style="width:100rpx;height:100rpx;border-radius:50px 50px 50px 50px"></image></view>
<view style="height:30rpx">{
{
userInfo.nickName}}</view>
</view>
<view>
<button wx:if="{
{userInfo==null}}" type="primary" open-type="getUserInfo" bindgetuserinfo="processLogin" >点击登录</button>
<!-- 遮罩层 -->
<van-cell title="展示弹出层" is-link />
<van-popup show="{
{ show }}" bind:close="onClose">
<view style="width:600rpx;text-align:center">
<view>提示</view>
<view>尊敬的用户,需要您授权手机号</view>
<van-button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" bindtap="login">授权</van-button>
</view>
</van-popup>
</view>
</view>
.wxss代码
.mine_useravatar{
width: 300rpx;
height: 150rpx;
margin-left: 220rpx;
margin-top: 30rpx;
line-height: 150rpx;
border-radius: 50%;
}