微信小程序实现授权登录


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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
纯js实现倒计时功能
Jan 06 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
基于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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
python发送伪造的arp请求
2014/01/09 Python
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
python数据抓取3种方法总结
2021/02/07 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
建筑自我鉴定
2013/10/19 职场文书
会计毕业生求职简历的自我评价
2013/10/20 职场文书
专科应届生求职信
2013/11/24 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
4s店活动策划方案
2014/08/25 职场文书
人才市场接收函
2015/01/30 职场文书
祝寿主持词
2015/07/02 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏