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


Posted in Javascript onAugust 23, 2019

一、前言

由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发。

官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

二、实现思路

自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示授权页面,让用户去执行授权的操作。如果已经授权了,则直接跳过这个页面,进入首页。

三、界面简介

1.不带 tabBar

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

2.带 tabBar

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

四、源码

1.index.wxml

<view wx:if="{{isHide}}">
 <view wx:if="{{canIUse}}" >
  <view class='header'>
   <image src='/images/wx_login.png'></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>
</view>
 
<view wx:else>
 <view>我的首页内容</view>
</view>

2.index.wcss

.header {
 margin: 90rpx 0 90rpx 50rpx;
 border-bottom: 1px solid #ccc;
 text-align: center;
 width: 650rpx;
 height: 300rpx;
 line-height: 450rpx;
}
 
.header image {
 width: 200rpx;
 height: 200rpx;
}
 
.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;
}

3.index.js

Page({
 data: {
  //判断小程序的API,回调,参数,组件等是否在当前版本可用。
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  isHide: false
 },
 
 onLoad: function() {
  var that = this;
  // 查看是否授权
  wx.getSetting({
   success: function(res) {
    if (res.authSetting['scope.userInfo']) {
     wx.getUserInfo({
      success: function(res) {
       // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
       // 根据自己的需求有其他操作再补充
       // 我这里实现的是在用户授权成功后,调用微信的 wx.login 接口,从而获取code
       wx.login({
        success: res => {
         // 获取到用户的 code 之后:res.code
         console.log("用户的code:" + res.code);
         // 可以传给后台,再经过解析获取用户的 openid
         // 或者可以直接使用微信的提供的接口直接获取 openid ,方法如下:
         // wx.request({
         //  // 自行补上自己的 APPID 和 SECRET
         //  url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
         //  success: res => {
         //   // 获取到用户的 openid
         //   console.log("用户的openid:" + res.data.openid);
         //  }
         // });
        }
       });
      }
     });
    } else {
     // 用户没有授权
     // 改变 isHide 的值,显示授权页面
     that.setData({
      isHide: true
     });
    }
   }
  });
 },
 
 bindGetUserInfo: function(e) {
  if (e.detail.userInfo) {
   //用户按了允许授权按钮
   var that = this;
   // 获取到用户的信息了,打印到控制台上看下
   console.log("用户的信息如下:");
   console.log(e.detail.userInfo);
   //授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来
   that.setData({
    isHide: false
   });
  } else {
   //用户按了拒绝按钮
   wx.showModal({
    title: '警告',
    content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
    showCancel: false,
    confirmText: '返回授权',
    success: function(res) {
     // 用户没有授权成功,不需要改变 isHide 的值
     if (res.confirm) {
      console.log('用户点击了“返回授权”');
     }
    }
   });
  }
 }
})

关于 TabBar 的处理,只需要把上面写好的页面设置到 app.json 里面即可。

4.github 下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript高级学习笔记整理
Aug 14 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 #Javascript
VUE实现移动端列表筛选功能
Aug 23 #Javascript
简述ES6新增关键字let与var的区别
Aug 23 #Javascript
微信小程序后台持续定位功能使用详解
Aug 23 #Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 #Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 #Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 #Javascript
You might like
PHP入门学习笔记之一
2010/10/12 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
javascript自执行函数
2017/02/10 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Python configparser模块操作代码实例
2020/06/08 Python
python如何爬取网页中的文字
2020/07/28 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
超市开店计划书
2014/04/26 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
走群众路线学习笔记
2014/11/06 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle