微信小程序授权登录详解(附完整源代码)

一、前言

由于微信正式修改了getUserInfo界面，不可能一进入微信小程序就弹出授权窗口，只能通过按钮触发。

官方联系：https://developers . weixin . QQ.com/community/developer/doc/0000 a 26 E1 ACA 6012 e 896 a 517556 c 01

二，理念的实现

编写一个微信授权登录页面供用户点击，即通过按钮组件触发getUserInof界面。当用户进入微信小程序时，判断用户是否获得授权，如果没有，则显示授权页面，让用户进行授权操作。如果已经授权，直接跳过此页，进入首页。

三.界面介绍

1.没有tabBar

2.带tabBar

第四，源代码

1.index.wxml

View wx : if=' { { Ishide } } ' View wx : if=' { { CAniuse } } ' View class=' header ' image src='/images/wx _ log in . png '/image/View class=' content ' View申请以下权限/查看文本以获取您的公共信息(昵称、头像等)。)/text/View button class=' bottom ' type=' primary ' open-type=' getuser info ' lang=' zh _ cn ' bindguteuserinfo=' bindguteuserinfo '授权登录/button/View查看wx :否则请升级微信版本/view/view查看wx :否则查看我的主页内容/view/view2.index.wcss。标头{ margin : 90 rpx 0 90 rpx 50 rpx；border-bottom: 1px实心# ccc文本对齐：中心；宽度： 650 rpx；height: 300rpx线高： 450 rpx；} .标题图像{ width: 200rpxheight: 200rpx} .内容{ margin-left : 50 rpx；保证金-底部： 90 rpx；} .内容文本{ display:块；color: # 9d9d9d边距-top : 40 rpx；} .底部{ border-radius : 80 rpx；margin: 70rpx 50rpxfont-size : 35 rpx；}3.index.js

页面({ data : {///))判断当前版本是否有applet的API、回调、参数、组件可用。canouse : wx . canouse(' button . open-type . getuserinfo ')，isHide: false }，onload : function(){ var that=this；//检查wx . getsetting({ success 3360 function(RES){ if(RES . auth setting [' scope . user info ']){ wx . getuser info({ success 3360 function(RES)}//用户已经授权，所以不需要显示授权页面，所以不需要更改isHide的值。//还有其他操作可以根据自己的需要进行补充。//我在这里实现的是在用户授权成功后调用微信的wx.login界面，从而获得codewx . log in({ success : RES={//获得用户代码后：RES . code console . log ')//可以传输到后台，然后解析得到用户的openid。//或者使用微信提供的界面直接获取，如下：//wx.request({ ////填写自己的APPID和Secret//URL : ' https://API . weixin . QQ.com/SNS/jscode 2 session？appid=own appid secret=own secret js _ code=' RES . code ' grant _ type=authorization _ code '，//success 3360 RES={////获取了用户的openid //console.log('用户的OpenID 3360 ' RES . data . OpenID)/}/})；} });} });} else {//用户没有授权//更改isHide的值，显示授权页面that . setdata({ isHide : true })；} } });}，bindinguserinfo :函数(e){ if(e . detail . user info){//用户按下了=this的权限按钮var//获取用户信息，打印在控制台上，查看console.log('用户信息如下：')；console . log(e . detail . UserInfo)；//授权成功后，通过更改isHide的值显示实现页面，隐藏授权页面。那个。setdata({ Ishide : false })；}否则{//用户按下了拒绝按钮wx . show modal({ title : ' warning '，content: '您点击了拒绝授权，将无法进入小程序，请授权后再进入！'，showcancel3360 false，confirm text : ' return authorization '，success: function(res) {//用户未成功授权，因此如果(res.confirm) {console.log('用户点击了' return authorization ')则无需更改isHide的值；} } });}}})对于TabBar处理，你只需要将上面写的页面设置成app.json即可.

4.github下载

https://github.com/yyzheng1729/loginDemo

动词（verb的缩写）类似条款的建议

微信小程序侧边栏滑动实现过程分析(带完整源代码)

微信小程序下拉列表实现方法分析(带完整源代码)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。