实现微信小程序授权登录（微信小程序如何授权登录）

因为微信官方修改了getUserInfo接口，现在一进入微信小程序就无法弹出授权窗口，只能通过按钮触摸。

发送。

1.实现思路

写一个微信授权登录页面供用户点击，即通过按钮组件触发getUserInof接口。在用户进入微处理器后

当你信任一个小程序时，判断用户是否被授权。如果没有，将显示以下“界面介绍”的第一张图片，供用户执行授权操作。诸如

如果已经授权，直接跳过此页进入首页。

相关免费学习推荐:微信小程序开发

2.界面介绍

3.源代码

login.wxml

& ltview wx:if = & quot；{ { canIUse } } & quot& gt& lt查看class = & amp#39;标题和标题。#39;& gt& lt图像src = & amp#39;/images/wx _ log in . png & amp；#39;& gt& lt/image & gt；& lt/view & gt；& lt查看class = & amp#39;内容& amp#39;& gt& lt视图& gt申请以下权限

。页眉{ margin:90 rpx 0 90 rpx 50 rpx；border -bottom:1px solid # CCC；text-align:居中；宽度:650rpx身高:300rpxline -高度:450rpx} .标题图像{ width:200 rpx；身高:200rpx} .content { margin -left:50 rpx；margin -bottom:90 rpx；} .内容文本{ display:block；颜色:# 9d9d9dmargin -top:40 rpx；} .底部{ border -半径:80rpx边距:70rpx 50rpxfont -size:35 rpx；}login.json

{ & quotnavigationBarTitleText & quot:& quot授权登录" }login.js

代码的Wx.request是我的项目和后台的一些交互，可以直接删除。

需要修改的地方:

记得在wx.switchTab接口中添加url属性。这是授权成功后跳转的页面路径。因为我的主页是一个tarBar页面，所以我在这里使用它。

Wx.switchTab，如果不是tarBar页面，可以用wx.navigateTo和wx.redirecTo跳转。

Page({ data: {//判断是否有API、回调、参数、组件等。小程序的当前版本可用。cani use:wx . cani use(& amp；#39;button . open -type . get userinfo & amp；#39;)}，onLoad:function(){ var that = this；//检查wx . get setting({ success:function(RES){ if(RES . auth setting[&；#39;scope.userInfo & amp#39;]){ wx . Get userinfo({ success:function(RES){//从数据库中获取用户信息that . queryuserinfo()；//用户已经授权了wx . switch tab({ URL:&；#39;& amp#39;}) } });}}}}}，bindingetuserinfo:function(e){ if(e . detail . userinfo){//用户按了允许授权按钮that = this//将登录用户的相关信息插入数据库wx.request ({URL: getapp()。global data . URL path+&；#39;hstc _接口/插入_用户& amp#39;，数据:{ OpenID:getApp(). global data . OpenID，昵称:e.detail.userInfo.nickName，avatar URL:e . detail . userinfo . avatar URL，省份:e.detail.userInfo.province，城市:e.detail.userInfo.city }，头:{ & amp#39;内容-类型& amp#39;:& amp#39;应用程序/JSON & amp；#39;}，success: function (res) {//从数据库中获取用户信息that . queryuserinfo()；控制台. log(& quot；插入小程序登录用户信息成功！");} });//授权成功后，跳转到wx . switch tab({ URL:&；#39;& amp#39;})} else {//用户按下了拒绝按钮wx . show modal({ title:&；#39;警告&；#39;，内容:& amp#39;如果单击“拒绝授权”，您将无法进入小程序。请授权后再进入！！！& amp#39;，showCancel:false，confirm text:& amp；#39;退货授权&；#39;，success:function(RES){ if(RES . confirm){ console . log(& amp；#39;用户单击了“返回授权”&；#39;)}}}}}，//获取用户信息接口queryusreinfo:function(){ wx . request({ URL:getapp())。global data . URL path+&；#39;hstc _ interface/queryByOpenid & amp；#39;，数据:{ OpenID:get app(). global data . OpenID }，头:{ & amp#39;内容-类型& amp#39;:& amp#39;应用程序/JSON & amp；#39;}，success:function(RES){ console . log(RES . data)；getApp(). global data . userinfo = RES . data；} });}, })

这几篇文章你可能也喜欢：

• 如何为微信小程序设置页面(如何为微信小程序设置页面背景)
• 为什么我开发微信小程序只使用upData？
• 微信小程序开发笔记，收藏！！(微信小程序笔记怎么做)
• 实现网易云音乐宇宙尘特效(网易云宇宙尘动态效果)
• 记录微信小程序的践踏(开发篇)(微信小程序骗人)

本文由主机参考刊发，转载请注明：实现微信小程序授权登录（微信小程序如何授权登录） https://zhujicankao.com/113957.html