微信小程序实现授权登录


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 相关文章推荐
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
AngularJS快速入门
2015/04/02 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
学生安全责任书范本
2014/07/24 职场文书
关于保护环境的建议书
2014/08/26 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
纪检干部学习心得体会
2016/01/23 职场文书