2018-08-03 22:23:38 woqianduo 阅读数 69285

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

1.实现思路

微信授权登录仅适用于使用微信用户信息的用户,如果自己的项目有完善的用户信息(一套式开发项目),可不使用微信用户信息;如果仅为微信小程序,则要授权、获取用户信息

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

2.界面简介

这里写图片描述

3.源码

authorize.html

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

authorize.wxss

.header {
    margin: 90rpx 0 90rpx 50rpx;
    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;
}

authorize.json

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

authorize.js

const app = getApp();
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: '/pages/index/index'
                            })
                        }
                    });
                }
            }
        })
    },
    bindGetUserInfo: function (e) {
        if (e.detail.userInfo) {
            //用户按了允许授权按钮
            var that = this;
            //插入登录的用户的相关信息到数据库
            wx.request({
                url: app.globalData.urlPath + 'user/add',
                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: '/pages/index/index'  
            })
        } else {
            //用户按了拒绝按钮
            wx.showModal({
                title:'警告',
                content:'您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
                showCancel:false,
                confirmText:'返回授权',
                success:function(res){
                    if (res.confirm) {
                        console.log('用户点击了“返回授权”')
                    } 
                }
            })
        }
    },
    //获取用户信息接口
    queryUsreInfo: function () {
        wx.request({
            url: app.globalData.urlPath + 'user/userInfo',
            data: {
                openid: app.globalData.openid
            },
            header: {
                'content-type': 'application/json'
            },
            success: function (res) {
                console.log(res.data);
                getApp().globalData.userInfo = res.data;
            }
        });
    },

})

代码的 wx.request 是小程序发起网络请求,用于用户与数据的交互。官网地址:https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html
URL分析:app.globalData.urlPath(全局url;例如:https://www.baidu.com
user/userInfo(接口具体地址)

小程序源码地址:https://github.com/cuigeg/wxchat.git

拓展

安利一下,微信小程序什么情况下需要授权:
这里写图片描述
授权代码:

注意:wx.authorize({scope: “scope.userInfo”}),无法弹出授权窗口,请使用 <button open-type="getUserInfo"></button>

wx.getSetting({
    success(res) {
        if (!res.authSetting['scope.record']) {
            wx.authorize({
                scope: 'scope.record',
                success() {
                    // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
                    wx.startRecord()
                }
            })
        }
    }
})

如果此篇博客对您或者您的朋友有帮助,请予以收藏或者转发,感谢您的查看,始终信仰:每一次分享都会帮助一些采坑中的道友,爱分享,能让道友时候踩一个坑是我们的幸福,
如果有什么不对的地方,请于评论区提示,及时发现问题解决问题会让我们进步更快,谢谢
参考文章地址:https://blog.csdn.net/weidong_y/article/details/79636386

2019-01-14 13:46:32 wh_xmy 阅读数 2184

背景:由于微信官方修改了 getUserInfo、authorize 接口,无法弹出授权窗口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发,这样就需要我们加一个授权页面去搞定了。

前提:微信授权登录仅适用于使用微信用户信息的用户,如果自己的项目有完善的用户信息(一套式开发项目),可不使用微信用户信息;如果仅为微信小程序,则要授权、获取用户信息。

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

授权页面的代码:

authorize.wxml

<!--pages/authorize/authorize.wxml-->
<view class="box" wx:if="{{canIUse}}">
    <button class='bottom' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
        允许授权
    </button>
</view>

<view class="box" wx:else>请升级微信版本</view>

authorize.wxss

/* pages/authorize/authorize.wxss */
page{
  height:100%;
  width:100%;
  background: url(https://www.toread.com.cn/Public/sg/images/authorize.png) no-repeat 0 0;
  background-size:100% 100%;
  overflow: hidden;
  overflow-y: hidden;
}
.box{
  height:100%;
  width:100%;
  padding-top:530rpx;
  box-sizing: border-box;
}
.bottom {
    box-sizing: border-box;
    border-radius: 8rpx;
    margin:0 34rpx;
    font-size: 36rpx;
    height:90rpx;
    font-family: PingFangHK-Regular;
    background:#ffffff;
    color:#000000;
}

authorize.json

{
  "navigationBarTitleText": "微信授权"
}

authorize.js

// pages/authorize/authorize.js
// import util from './utils/util.js';
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //判断小程序的API,回调,参数,组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.hideShareMenu();//禁用分享功能
    var that = this;
    // 查看是否授权
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function (res) {
              //从数据库获取用户信息
              // console.log(res);
              // that.queryUsreInfo();
              //用户已经授权过
              wx.switchTab({
                url: '/pages/index/index'
              })
            }
          });
        }
      }
    })
  },
  // post请求
  requestData:function(url, data0, successCallback, errorCallback) {
    wx.request({
      url: app.globalData.rootApi + url,
      data: data0,
      method: "POST",
      success: function (res) {
        successCallback(res);
      },
      error: function (res) {
        errorCallback(res);
      },
    });
  },
  // 授权登录
  login: function (data0, successCallback, errorCallback){
    this.requestData('Login/check', data0, successCallback, errorCallback);
  },
  //点击授权按钮
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      var that = this;
      // 登录
      wx.login({
        success: res => {
          // console.log(res);
          const code = res.code;
          // console.log(code);
          // 获取用户信息
          wx.getSetting({
            success: res => {
              if (res.authSetting['scope.userInfo']) {
                // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
                wx.getUserInfo({
                  success: res => {
                    // 可以将 res 发送给后台解码出 
                    // console.log(res);
                    this.userInfo = res.userInfo;
                    var nickName = res.userInfo.nickName;
                    var avatarUrl = res.userInfo.avatarUrl;
                    // 存储用户名和头像
                    wx.setStorageSync('nickName', nickName);
                    wx.setStorageSync('avatarUrl', avatarUrl);
                    var iv = res.iv;
                    var encryptedData = res.encryptedData;
                    var postData = {};
                    postData.code = code;
                    postData.iv = res.iv;
                    postData.encryptedData = res.encryptedData;
                    // console.log("postdata");
                    // console.log(postData);
                    app.globalData.userInfo = res.rawData;
                    //后台服务器授权登录接口
                    this.login(postData,
                      (res) => {
                        // console.log("login----")
                        if (res.data.code == 1) {//获取成功 
                          // console.log("后台服务器授权登录成功!");
                          var utoken = res.data.utoken;
                          // 先移除可能需要更改的storage
                          // wx.removeStorageSync('utoken');
                          //设置本地缓存
                          wx.setStorage({
                            key: 'utoken',
                            data: utoken,
                          });
                          //用户已经授权过
                          wx.reLaunch({
                            url: '/pages/index/index'
                          });
                        }
                   else {
                          wx.showModal({
                            title: '温馨提示',
                            content: res.data.msg
                          })
                        }
                      }
                    )
                    // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                    // 所以此处加入 callback 以防止这种情况
                    if (this.userInfoReadyCallback) {
                      this.userInfoReadyCallback(res)
                    }
                  }
                })
              }
            }
          })
        }
      })
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          if (res.confirm) {
            // console.log('用户点击了“返回授权”')
          }
        }
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

以上代码可以解决新版小程序授权登录问题,可能有部分方法需要使用app.js和util.js,下面附上部分代码:

app.js

//app.js
import util from './utils/util.js';
var loginStatus = true;
App({
  onLaunch: function () {
    //获取微信顶部导航栏高度
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
        console.log(res.statusBarHeight + 46)
      }, fail(err) {
        console.log(err);
      }
    })
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    //检查登录是否过期
    wx.checkSession({
      success: function (e) {   //登录态未过期
        console.log("没过期");
      },
      fail: function () {   //登录态过期了
        console.log("过期了");
        //重新调取授权登录接口
        util.checkLogin();
      }
    });
  },
  globalData: {
    userInfo: null,
    code:'',
    rootApi: 'https://www.toread.com.cn/index.php/sg/'
  }
})

util.js

var app = getApp();

// const rootApi = 'https://xxx/index.php/sg/';//测试环境
const rootApi = 'https://xxx/index.php/sg/';//线上环境
// 微信自定义格式化时间方法,传入new Date()
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
/**
 * 时间格式化为 时 分 秒(传入时间为毫秒)
 */
function MillisecondToDate(msd) {
  var time = parseFloat(msd) / 1000;
  if (null != time && "" != time) {
    if (time > 60 && time < 60 * 60) {
      time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
        parseInt(time / 60.0)) * 60) + "秒";
    }
    else if (time >= 60 * 60 && time < 60 * 60 * 24) {
      time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
        parseInt(time / 3600.0)) * 60) + "分钟" +
        parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
          parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
    }
    else {
      time = parseInt(time) + "秒";
    }
  }
  return time;
}
/**
 * 时间戳转化为年 月 日 时 分 秒
 * number: 传入时间戳
 * format:返回格式,支持自定义,但参数必须与formateArr里保持一致
*/
function zformatTime(number, format) {

  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];

  var date = new Date(number * 1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));

  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));

  for (var i in returnArr) {
    format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
// post请求
function requestData(url, data0, successCallback, errorCallback) {
  wx.request({
    url: rootApi+url,
    data: data0,
    method: "POST",
    success: function (res) {
      successCallback(res);
    },
    error: function (res) {
      errorCallback(res);
    },
  });
}

// get请求
function getRequestData(url, data0, successCallback, errorCallback) {
  wx.request({
    url: rootApi+url,
    data: data0,
    method: "GET",
    success: function (res) {
      successCallback(res);
    },
    error: function (res) {
      errorCallback(res);
    },
  });
}

// 授权登录
function login(data0, successCallback, errorCallback) {
  requestData('Login/check', data0, successCallback, errorCallback);
}

// 用户登陆过期重新登录
function checkLogin() {
  wx.login({
    success: res => {
      const code = res.code;
      // 获取用户信息
      wx.getSetting({
        success: res => {
          if (res.authSetting['scope.userInfo']) {
            // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
            wx.getUserInfo({
              success: res => {
                console.log(res);
                // 可以将 res 发送给后台解码出 
                this.userInfo = res.userInfo;
                var iv = res.iv;
                var encryptedData = res.encryptedData;
                var postData = {};
                postData.code = code;
                postData.iv = res.iv;
                postData.encryptedData = res.encryptedData;
                //后台服务器授权登录接口
                this.login(postData,
                  (res) => {
                    console.log("login----")
                    if (res.data.code == 1) {//获取成功 
                      console.log("检测登陆过期后再次登录成功!");
                      var utoken = res.data.utoken;
                      // 先移除可能需要更改的storage
                      // wx.removeStorageSync('utoken');
                      //设置本地缓存
                      wx.setStorage({
                        key: 'utoken',
                        data: utoken,
                      });
                      //用户已经授权过
                      wx.reLaunch({
                        url: '/pages/index/index',
                      })
                    }
                    else {
                      wx.showModal({
                        title: '温馨提示',
                        content: res.data.msg
                      })
                    }
                  }
                )
                // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                if (this.userInfoReadyCallback) {
                  this.userInfoReadyCallback(res)
                }
              }
            })
          }
        }
      })
    }
  })
}

// 去前后空格  
function trim(str) {
  return str.replace(/(^\s*)|(\s*$)/g, "");
}

// 提示错误信息  
function isError(msg, that) {
  that.setData({
    showTopTips: true,
    errorMsg: msg
  })
}

// 清空错误信息  
function clearError(that) {
  that.setData({
    showTopTips: false,
    errorMsg: ""
  })
}
//判断字符串中是否含有表情符号
function isEmojiCharacter(substring) {
  for (var i = 0; i < substring.length; i++) {
    var hs = substring.charCodeAt(i);
    if (0xd800 <= hs && hs <= 0xdbff) {
      if (substring.length > 1) {
        var ls = substring.charCodeAt(i + 1);
        var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
        if (0x1d000 <= uc && uc <= 0x1f77f) {
          return true;
        }
      }
    } else if (substring.length > 1) {
      var ls = substring.charCodeAt(i + 1);
      if (ls == 0x20e3) {
        return true;
      }
    } else {
      if (0x2100 <= hs && hs <= 0x27ff) {
        return true;
      } else if (0x2B05 <= hs && hs <= 0x2b07) {
        return true;
      } else if (0x2934 <= hs && hs <= 0x2935) {
        return true;
      } else if (0x3297 <= hs && hs <= 0x3299) {
        return true;
      } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
        || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
        || hs == 0x2b50) {
        return true;
      }
    }
  }
}  

module.exports = {
  formatTime: formatTime,
  zformatTime: zformatTime,
  requestData: requestData,
  trim: trim,
  isError: isError,
  clearError: clearError,
  getRequestData: getRequestData,
  checkLogin: checkLogin,
  login:login,
  formatDuring:formatDuring,
  MillisecondToDate: MillisecondToDate,
  isEmojiCharacter: isEmojiCharacter
}

如有疑问可以随时提问,或者哪位大神有更好的方法可以分享一下。
 

2017-05-25 23:33:09 sinat_34810781 阅读数 2332

近期在学习开发微信公众号,但是在配置环境的时候遇到了问题。在页面授权的时候,拿不到code。并且 snsapi_userinfo 授权模式的情况下,并没有弹出授权协议,页面要么显示redirect_uri 参数错误,要么就是没有任何提示,空白的。但是也没有进入授权,后台code是null.

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx61f1d7040095146f&redirect_uri=http://www.weixin2124969127.tunnel.2bdata.com/Weixin/index.jsp&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 

上面代码点击之后 进去是空白页面,后台取出时null.

配置的回调域名是:

www.weixin2124969127.tunnel.2bdata.com/Weixin

代码并没有部署到服务器,使用的是内网穿透,微信公众号的测试号,本机环境。
在网上也找了看了很多,也试了下别人的授权页面,部分可以进,id和uri一改,就错了。另外,有说 uri 要 urlEncodeUTF8,但是,改后就参数错误。
有没有经验丰富的帮忙看下,哪里出现问题了

2019-06-26 11:57:42 m0_45041148 阅读数 70
前几天做了一个H5页面项目,它是依托于微信服务号的网页.需要包含微信登录、微信支付以及微信订单查询功能;
在这里说一下先说一下微信登录授权功能的实现
**微信登录授权**
微信登录授权呢,分为静默授权和非静默授权;两个的区别是scope属性的属性值不同,scope= scopr_base是静默授权也就是不弹出页面,直接获取用户信息,scope=scope_userinfo是非静默授权,用户需要同意授权,然后通过获得的openid获取用户的昵称,性别,城市等信息...非静默授权在用户未关注公众号的情况下也可以使用,因此我比较青睐于这种方式,接下来给大家展示一下这个步骤

A. 获取微信公众号的APPID和APPSecret
获取APPID有两种方式,一种是公众号新建立,粉丝不太多,可能会直接使用公众号APPID,在开发->基本配置中的开发者ID中可以看到

此处可获取APPID和APPSecret
但如果公众号粉丝较多,为了公众号的用户体验来说,可以使用测试账号, 开发者工具->测试账号
在这里插入图片描述
进行配合操作,就可以看到以下界面
在这里插入图片描述
B. 配置回调域名的界面
用户需要在JS接口安全域名中,配置一下安全域名,将提供的安全文件配置到服务器根目录下即可,但配置域名一定要注意是 www.XXX.com格式的,不要带http://头,带这个后期会出现redirect_uri参数不正确的情况

C. 用户授权并获取code
首先,引入jWeixin.js,可参考这个网址使用<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>,
下一步,其实就是改变自己URL,另自己访问这个网址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

在其中的相关参数其实比较简单,像上方所说的你需要注意scope参数,使用不同参数达到你静默授权或者非静默授权的目的
在这里插入图片描述
下面放出我的登录JS代码
在这里插入图片描述
login.js

var url = this.location.href;
const suffixUrl = url.split("?")[1];
if (suffixUrl == null || suffixUrl == "" || suffixUrl == undefined) {
    var appID = "wx34b2beb43bf1a5a5";
    var redirectUri = "http://www.muyi-nature.com/h5/user/saveOpenId";
    // 授权接口地址
    var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri="
        + encodeURIComponent(redirectUri) + "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect";
    window.location.href = strUrl;
    
}

D. 获取access_token
这个非常简单,在公众平台,为我们提供了一个接口在线调试功能,选择 微信公众开发者平台->接口在线调试 , 使用测试号的可以在此换取access_token , 选中access_token,输入自己的APPID和APPSecret即可获取access_token
但是!!! 如果使用非测试号,建议不用在前端换取access_token,前端使用截取URL中的code方式发送给后端,从后端发起请求换取Access_token以提高安全性,不容易被他人获取

到这里,后端便已经可以根据code拿到用户的openid,再根据openid拿到用户的信息,就可以实现用户的微信登录了

2020-01-04 16:28:29 marendu 阅读数 40

微信小程序开发mpvue实现授权登录

  1. 通过请求wx.login() 在成功回调中获取到code,通过button组件调出getuserinfo 方法,和直接wx调用获取的数值一致,再在其中弹出模态框,诱导用户授权手机,之后将信息发送给后端随后跳转页面

    <template>
      <view class="authorize-contianer">
        <div class="auth-item" @click="login">请微信授权</div>
        <div class="btn-authorize">
          <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">确认授权</button>
        </div>
        <div v-if="cancelAuth" class="refuse">请授权,否则无法进入哦~</div>
    
          <div v-if="isPone" class="alert" >
          <div class="auth">
            <div class="apply">
              <span class="">需要获取您的手机权限</span>
              <p>(请开启手机权限)</p>
            </div>
            <button class="confirm" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认</button>
          </div>
        </div>
      </view>
    </template>
    <script>
    import { getToken } from '@/api/main'
    export default {
      data () {
        return {
          cancelAuth: false,//判断用户是否拒绝获取信息
          newType: '',
          path: '../home/main',
          shareDetail: {},
          code: '',
          isPone: false  //用于显示获取手机权限窗口
    
        }
      },
      methods: {
          //获取手机号
        getPhoneNumber(e) {
          console.log(e)
          if (e.mp.detail.errMsg==="getPhoneNumber:ok") {
            this.isPone = false
            this.params.iv = e.mp.detail.iv
            this.params.encryptedData = e.mp.detail.encryptedData
            console.log(this.params)
            this.getTokenAsync(this.params)
          }
        },
          //调用wx.login获取code
        login() {
          let me = this
          let obj = wx.getStorageSync('USER_INFO')
          console.log(obj, 'USER_INFOUSER_INFO')
          if (obj) {
            wx.switchTab({ url: this.path })
          } else {
            wx.login({
              success (res) {
                if (res.code) {
                  me.code = res.code
                }
              }
            })
          }
        },
        // 请求后获取token
        async getTokenAsync(params) {
          let res = await getToken(params)
          if (res.success) {
            wx.setStorageSync('USER_INFO', JSON.stringify(res.data))
          	wx.switchTab({ url: this.path })
          } else {
            console.log("获取失败")
          }
        },
        //  调用用户信息授权页面
        bindGetUserInfo(e) {
          if (!this.cancelAuth) {
            this.isPone = true
          }
          wx.setStorageSync('USER_MSG', JSON.stringify(e.mp.detail.userInfo))
          console.log(e)
          if (e.mp.detail.userInfo) {
            this.params = {
              code: this.code,
              name: e.mp.detail.userInfo.nickName,
              userIcon: e.mp.detail.userInfo.avatarUrl,
            }
          } else {
            // 用户按了拒绝按钮
            this.cancelAuth = true
          }
        }
      },
      onShow () {
        this.path ='../home/main'
        this.login()
      }
    }
    </script>
    <style lang="scss">
    .authorize-contianer {
      height: 100%;
       background: #fff;
      background-size:100% 100%;
      text-align: center;
      .authorize-icon {
        padding-top: 254rpx;
        width: 200rpx;
        height: 200rpx;
        display: block;
        margin: 0 auto;
        padding-bottom: 10rpx;
      }
      .auth-item {
        margin-top:92rpx;
        font-size: 36rpx;
        line-height:40rpx;
        color:rgb(255,145,37);
        font-weight: bold;
      }
      .refuse{
        padding:18rpx 0;
        font-size:24rpx;
        width:80%;
        margin:0rpx auto;
        background:#000000d1;
        color:#fff;
        margin-top:140rpx;
        border-radius:6rpx;
      }
      .btn-authorize {
        margin: 0 auto;
        margin-top:160rpx;
        button{
          width: 80%;
          background:-webkit-linear-gradient(left,rgb(255,152,22),rgb(255,120,17));
          background:-o-linear-gradient(right,rgb(255,152,22),rgb(255,120,17));
          background:-moz-linear-gradient(right,rgb(255,152,22),rgb(255,120,17));
          background:linear-gradient(to right,rgb(255,152,22),rgb(255,120,17));
          border-radius: 40rpx;
          color:rgb(255,255,255);
          font-size: 34rpx;
          font-weight: bold;
        }
      }
      .alert{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        outline: 0;
        -webkit-overflow-scrolling: touch;
        background-color: rgb(0, 0, 0);  
        filter: alpha(opacity=60);  
        background-color: rgba(0, 0, 0, 0.6); 
        z-index: 9999;
        .auth{
          position: absolute;
          top: 50%;
          left: 50%;
          width: 80%;
          height: 340rpx;
          border-radius: 20rpx;
          transform:translate(-50%,-50%);
          background: #fff;
          display: flex;
          flex-direction: column;
          .apply{
            margin: 0rpx auto;
            padding: 60rpx 40rpx;
            flex:1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-size: 34rpx;
            color:rgb(34,34,34);
          
            p{
              font-size:30rpx
            }
          }
          .confirm{
            text-align: center;
            height: 100rpx;
            width: 100%;
            line-height: 100rpx;
            font-size: 34rpx;
            color:rgb(255,145,37);
          }
        }
      }
    }
    </style>
    
    

微信公众平台开发

阅读数 351

没有更多推荐了,返回首页