微信小程序实现授权登录


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参数的小问题
Mar 02 Javascript
CSS常用网站布局实例
Apr 03 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JavaScript数组方法总结分析
May 06 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP面向对象精要总结
2014/11/07 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
让您的菜单不离网站
2006/10/03 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
javascript每日必学之多态
2016/02/23 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
Js apply方法详解
2017/02/16 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
如何写自我鉴定
2014/03/19 职场文书
环保倡议书500字
2014/05/15 职场文书
校园标语大全
2014/06/19 职场文书
负责培养人意见
2015/06/05 职场文书
无工作证明怎么写
2015/06/15 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js