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


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读取ASP设定的COOKIE
Feb 15 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
图解上海144收音机
2021/03/02 无线电
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
jQuery select控制插件
2009/08/17 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Python 基础知识之字符串处理
2017/01/06 Python
简单了解Django模板的使用
2017/12/20 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Django nginx配置实现过程详解
2020/09/10 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
文明学生事迹材料
2014/01/29 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书