微信小程序使用微信授权登录流程

官方文档我就不贴了，写那么多我也看不下去，直接说一下流程，第一步用户触发js方法，跳转到下面的授权登录界面，用户点击授权之后就会弹出图二，用户和点击拒绝或应许之后就看下面的js流程就好，代码中每一步都有注释，看一看因该就明白了

WXML

<!--授权页面-->
<view wx:if="{{canIUse}}">
<view class='header'>
<image class="my-img" src='../../image/icon/3.jpg'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
点击授权
</button>
</view>
<view wx:else>请升级微信版本</view>

wxss

/* pages/authorize/authorize.wxss */
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.my-img {
width: 120rpx;
height: 120rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}

JS

// pages/authorize/authorize.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
// 判断小程序的API，回调，参数，组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo') //获取用户信息是否在当前版本可用
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
bindGetUserInfo: function (e) { //点击的“拒绝”或者“允许
if (e.detail.userInfo) { //点击了“允许”按钮，
wx.login({ // 调用微信登录api
success: function (res) { // 这一步是获取用户在小程序里的临时code码
app.http.getOpenId({ // 请求后台接口，用code码换取用户信息openid或者token
js_code: res.code,
}).then(res => {
wx.setStorageSync('openid', res.data.openid)
wx.setStorageSync('Token', res.data.Token)
})
},
fail: function (res) { // 获取code码失败的方法
return app.ShowToast('授权失败' + res.Msg)
}
})
} else {
//用户点击拒绝逻辑
}
}
})

最后

以上就是甜蜜翅膀为你收集整理的微信小程序使用微信授权登录流程的全部内容，希望文章能够帮你解决微信小程序使用微信授权登录流程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。