微信小程序实现授权登录


Posted in Javascript onMay 15, 2019

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

1.实现思路

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

2.界面简介

微信小程序实现授权登录微信小程序实现授权登录

3.源码

login.wxml

<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>

login.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;
}

login.json

{
 
"navigationBarTitleText": "授权登录"
 
}

login.js

代码的 wx.request 是我项目与后台的一些交互,可直接删除掉。

需要修改的地方:

记得自己补上 wx.switchTab 接口中的 url 属性,这是授权成功后跳转的页面路径,由于我的首页是 tarBar 页面,所以这里用wx.switchTab ,如果不是 tarBar 页面的话,可以用 wx.navigateTo 和 wx.redirecTo 去跳转

Page({
 data: {
  //判断小程序的API,回调,参数,组件等是否在当前版本可用。
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 onLoad: function () {
  var that = this;
  // 查看是否授权
  wx.getSetting({
   success: function (res) {
    if (res.authSetting['scope.userInfo']) {
     wx.getUserInfo({
      success: function (res) {
       //从数据库获取用户信息
       that.queryUsreInfo();
       //用户已经授权过
       wx.switchTab({
        url: ''
       })
      }
     });
    }
   }
  })
 },
 bindGetUserInfo: function (e) {
  if (e.detail.userInfo) {
   //用户按了允许授权按钮
   var that = this;
   //插入登录的用户的相关信息到数据库
   wx.request({
    url: getApp().globalData.urlPath + 'hstc_interface/insert_user',
    data: {
     openid: getApp().globalData.openid,
     nickName: e.detail.userInfo.nickName,
     avatarUrl: e.detail.userInfo.avatarUrl,
     province:e.detail.userInfo.province,
     city: e.detail.userInfo.city
    },
    header: {
     'content-type': 'application/json'
    },
    success: function (res) {
     //从数据库获取用户信息
     that.queryUsreInfo();
     console.log("插入小程序登录用户信息成功!");
    }
   });
   //授权成功后,跳转进入小程序首页
   wx.switchTab({
    url: '' 
   })
  } else {
   //用户按了拒绝按钮
   wx.showModal({
    title:'警告',
    content:'您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
    showCancel:false,
    confirmText:'返回授权',
    success:function(res){
     if (res.confirm) {
      console.log('用户点击了“返回授权”')
     } 
    }
   })
  }
 },
 //获取用户信息接口
 queryUsreInfo: function () {
  wx.request({
   url: getApp().globalData.urlPath + 'hstc_interface/queryByOpenid',
   data: {
    openid: getApp().globalData.openid
   },
   header: {
    'content-type': 'application/json'
   },
   success: function (res) {
    console.log(res.data);
    getApp().globalData.userInfo = res.data;
   }
  });
 },
 
})

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

Javascript 相关文章推荐
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
原生javascript获取元素样式
Dec 31 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
基于vue实现一个神奇的动态按钮效果
May 15 #Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 #Javascript
详解VSCode配置启动Vue项目
May 14 #Javascript
微信小程序下拉菜单效果的实例代码
May 14 #Javascript
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 #Javascript
You might like
PHP开发中四种查询返回结果分析
2011/01/02 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Vue实现简易计算器
2020/02/25 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python 追踪except信息方式
2020/04/25 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Django使用rest_framework写出API
2020/05/21 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
2015年党总支工作总结
2015/05/25 职场文书
七年级语文教学反思
2016/03/03 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python