立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 152|回复: 1
打印 上一主题 下一主题

微信小程序2019年新授权登录方法

[复制链接]
之前微信授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗。由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发

微信的官方解释如下:

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息:

一、小程序:

1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com ... mponent/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com ... nent/open-data.html

然后是自己的实现思路是 通过点击button组件去触发 getUserInof 接口,在用户进入微信小程序的时候,判断用户是否授权了,未授权,弹出授权窗口,授权进入主界面

html页面如下:



  1. ??

  2. ? ?

  3. ? ?? ?

  4. ? ?


  5. ? ? 申请获取以下权限

  6. ? ? 获得你的公开信息(昵称,头像,手机等)

  7. ? ?

  8. ??




  9. 请升级微信版本
复制代码
样式文件login.wxss如下:
  1. .headView {

  2. ??margin: 90rpx 50rpx 90rpx 50rpx; /*上右下左*/

  3. }

  4. .headImageView {

  5. ??display: block;

  6. ??margin-left: 25px;

  7. ??margin-top: 25px;

  8. ??margin-right: 25px;

  9. ??margin-bottom: 0px;

  10. ??height: 50px;

  11. }

  12. .headImage{

  13. ??display: flex;

  14. ??width: 50px;

  15. ??height: 50px;

  16. }

  17. .titleText {

  18. ??margin-left: 25px;

  19. ??margin-top: 25px;

  20. ??margin-bottom: 10px;

  21. ??font-size: 14px;

  22. ??color: #020e0f;

  23. ??text-align: center;

  24. }

  25. .contentText {

  26. ??margin-left: 25px;

  27. ??margin-top: 0px;

  28. ??margin-bottom: 0px;

  29. ??font-size: 14px;

  30. ??color: #666;

  31. ??text-align: center;

  32. }

  33. .authBtn {

  34. ??margin-top: 35px;

  35. ??margin-left: 25px;

  36. ??margin-right: 25px;

  37. ??height: 45px;

  38. font-size: 17.5px;

  39. }
复制代码
login.js代码如下:
  1. /**

  2. ??* 生命周期函数--监听页面加载

  3. ??*/

  4. ??onLoad: function(options) {

  5. ? ? var that = this;

  6. ? ? //查看是否授权

  7. ? ? wx.getSetting({

  8. ? ?? ?success: function(res) {

  9. ? ?? ???if (res.authSetting['scope.userInfo']) {

  10. ? ?? ?? ? console.log("用户授权了");

  11. ? ?? ???} else {

  12. ? ?? ?? ? //用户没有授权

  13. ? ?? ?? ? console.log("用户没有授权");

  14. ? ?? ???}

  15. ? ?? ?}

  16. ? ? });

  17. ??},

  18. bindGetUserInfo: function(res) {

  19. ? ? if (res.detail.userInfo) {

  20. ? ?? ?//用户按了允许授权按钮

  21. ? ?? ?var that = this;

  22. ? ?? ?// 获取到用户的信息了,打印到控制台上看下

  23. ? ?? ?console.log("用户的信息如下:");

  24. ? ?? ?console.log(e.detail.userInfo);

  25. ? ?? ?//授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来

  26. ? ?? ?that.setData({

  27. ? ?? ???isHide: false

  28. ? ?? ?});

  29. ? ? } else {

  30. ? ?? ?//用户按了拒绝按钮

  31. ? ?? ?wx.showModal({

  32. ? ?? ???title: '警告',

  33. ? ?? ???content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',

  34. ? ?? ???showCancel: false,

  35. ? ?? ???confirmText: '返回授权',

  36. ? ?? ???success: function(res) {

  37. ? ?? ?? ? // 用户没有授权成功,不需要改变 isHide 的值

  38. ? ?? ?? ? if (res.confirm) {

  39. ? ?? ?? ?? ?console.log('用户点击了“返回授权”');

  40. ? ?? ?? ? }

  41. ? ?? ???}

  42. ? ?? ?});

  43. ? ? }

  44. }

  45. },
复制代码


哎...今天够累的,签到来了...
沙发
?楼主| 发表于 2019-9-9 11:11:35 | 只看该作者
关于微信小程序getUserInfo最新修改后,如何在原有项目的授权逻辑的调整,html代码:

  1. 请升级微信版本
复制代码
App.js代码:
  1. App({
  2. ? ? onLaunch: function () {},
  3. ? ? onShow: function () {},
  4. ? ? .....,
  5. ? ? toLogin: function () {
  6. ? ?? ???// 前往授权登录界面
  7. ? ?? ???wx.navigateTo({
  8. ? ?? ???url: '/pages/toLogin/toLogin',
  9. ? ? })
  10. ? ? },
  11. ? ? ready: function () {
  12. ? ?? ???return Promise((resolve, reject) => {
  13. ? ?? ?? ?? ?const userkey = wx.getStorageSync('userkey')
  14. ? ?? ?? ?? ?const userId = wx.getStorageSync('userId')
  15. ? ?? ?? ?? ?const sessionData = wx.getStorageSync('sessionData')
  16. ? ?? ?? ?? ?// 检查用户是否具有登陆态
  17. ? ?? ?? ?? ?if (!userkey || !userId || !sessionData) {
  18. ? ?? ?? ?? ?? ? // 如果未登录就前往登录界面
  19. ? ?? ?? ?? ?? ? this.toLogin()
  20. ? ?? ?? ?? ?} else {
  21. ? ?? ?? ?? ?? ? // 如果有就只要更改一下Promise,以继续执行后续操作
  22. ? ?? ?? ?? ?? ? resolve()
  23. ? ?? ?? ?? ?}
  24. ? ?? ???})
  25. ? ? }
  26. })
复制代码
相关页面Js代码:
  1. var app = getApp()
  2. const someServces = require('统一接口处理文件')
  3. Page({
  4. ? ? data: {},
  5. ? ? onLoad: function (){},
  6. ? ? onShow: function (){},
  7. ? ? ......,
  8. ? ? getSomeData () {
  9. ? ?? ???// 这里我们每次调用接口时,都要先去调用app.js中的ready方法
  10. ? ?? ???// 在app中ready会返回一个promise对象,只有其返回的状态时resolved状态时才会触发.then()方法
  11. ? ?? ???app.ready().then(() => {
  12. ? ?? ?? ?? ?// 获取服务端数据
  13. ? ?? ???})
  14. ? ? }
  15. })
复制代码


哎...今天够累的,签到来了...
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|Archiver|梦飞文学网 ( 赣ICP备15004458号-1 )???

GMT+8, 2019-10-29 21:55 , Processed in 0.065874 second(s), 27 queries .

Powered by Discuz! X3.4 ? 2001-2013 Comsenz Inc & yjwx

快速回复 返回顶部 返回列表