实现微信小程序的授权登录(微信如何授权登录小程序)

因为微信官方修改了getUserInfo的界面，所以不可能一进入微信小程序就弹出授权窗口，只能按键触摸。

头发。

1.实现思路

为用户编写一个微信授权登录页面，实现点击功能，即通过按钮组件触发getUserInof接口。当用户输入micro

在信任小程序的时候，判断用户是否已经授权。如果没有，将显示下面的“界面介绍”的第一个图，用户可以执行授权操作。诸如

如果已经授权，就跳过这一页，进入首页。

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

2.界面介绍

3.源代码

login.wxml

ltview wx:if = ；{ { canIUse } } gt lt查看class = # 39标题 # 39； gt ltimage src = # 39/images/wx _ log in . png # 39； gt lt/image gt； lt/view gt； lt查看class = # 39内容 # 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

{ navigationBarTitleText : Authorization " }login.js

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

需要修改的内容:

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

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

Page({ data: {//确定是否有API、回调、参数、组件等。小程序的当前版本可用。cani use:wx . cani use( # 39；button . open -type . get userinfo # 39；)}，onLoad:function(){ var that = this；//检查wx . get setting({ success:function(RES){ if(RES . auth setting[ # 39；scope.userInfo # 39]){ wx . Get userinfo({ success:function(RES){//从数据库中获取用户信息that . queryuserinfo()；//用户已经授权了wx . switch tab({ URL: # 39；'}) } });}}}}}，bindge userinfo:function(e){ if(e . detail . userinfo){//用户按了允许授权按钮that = this//将登录用户的相关信息插入数据库wx.request ({URL: getapp()。global data . URL path+ # 39；hstc _ interface/insert _ user # 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 }，头:{ # 39；内容-类型 # 39；: '应用/JSON # 39；}，success: function (res) {//从数据库中获取用户信息that . queryuserinfo()；控制台. log( ；成功插入小程序登录用户信息！");} });//授权成功后，跳转到首页wx . switch tab({ URL: # 39；'})} else {//用户按下了拒绝按钮wx . show modal({ title: # 39；警告 # 39；，内容: # 39；您不能通过单击“拒绝授权”来访问小程序。请授权后再进入！！！'，showCancel:false，confirm text: # 39；返回授权 # 39；，success:function(RES){ if(RES . confirm){ console . log( # 39；用户点击了“返回授权” # 39；} } } } } } }，//获取用户信息接口query userinfo:function(){ wx . request({ URL:getapp())。global data . URL path+ # 39；hstc _ interface/queryByOpenid # 39；，数据:{ OpenID:get app(). global data . OpenID }，头:{ # 39；内容-类型 # 39；: '应用/JSON # 39；}，success:function(RES){ console . log(RES . data)；getApp(). global data . userinfo = RES . data；} });}，})以上是实现微信小程序授权登录的细节。请多关注主机参考其他相关文章！

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

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

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