一个新站,重新与你们分享故事

小程序首次打开弹出授权框获取用户信息

小杂念 wangfa 1367℃ 0评论

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。

不得不说,微信的调整,用户体验上去了,开发难度增加了,给大家分享最近实践中的解决方案。

1.在首页index.wxml的最后加上以下代码(请通过查看源代码获取此片段)


      

注:我把提示语做了一个后台控制,方便以后修改不用每次都进行迭代升级。变量暂时取为{{tishiyu}}

2.index.js部分
A.首先在data部分加入tishiyu

data: {
    
    tishiyu: ''
  },

B.这是点击确认授权按钮的处理逻辑,可根据自己的情况添加相应处理逻辑。

getUserInfo: function (e) {
    var self = this;
    if (e && e.detail.userInfo) {

      console.log(e.detail.userInfo)
//存入
      var GGname = e.detail.userInfo.nickName;

      var GGhome = e.detail.userInfo.city;

      var GGtouxiang = e.detail.userInfo.avatarUrl;

      var GGgender = e.detail.userInfo.gender;

      //把用户微信信息存入手机缓存
      wx.setStorageSync('nickname', GGname);

      wx.setStorageSync('city', GGhome);

      wx.setStorageSync('avatarUrl', GGtouxiang);

      wx.setStorageSync('gender', GGgender);
      self.setData({
        showTip: false
      })
    }
  }

C.onLoad部分。

先从服务器获取提示语内容

let that = this
    wx.request({
      url: 'https://***********************.php?code=5',
      data: {
        
      },
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        //var myDate = new Date();
        var tishiyu = res.data.tupian;
        console.log(tishiyu);


        that.setData({

          tishiyu: tishiyu

        });
        // console(runData);
      }
    })

然后下面是默认获取获取用户信息(如果已授权获取成功,如果没有授权,弹窗授权)

var self = this;
     wx.getSetting({
      success(res) {
        console.log(res.authSetting)
        console.log(res.authSetting['scope.userInfo'])
        var sqpd = res.authSetting['scope.userInfo'];
        if (!sqpd) {

          self.setData({
            showTip: true
          });
        }else{

     //开始获取用户信息


          wx.getUserInfo({
            success: res => {
              console.log(res.userInfo);

              //下面是用户的昵称/city/avatar/gender

              var GGname = res.userInfo.nickName;

              var GGhome = res.userInfo.city;

              var GGtouxiang = res.userInfo.avatarUrl;

              var GGgender = res.userInfo.gender;

              //把用户微信信息存入手机缓存
              wx.setStorageSync('nickname', GGname);

              wx.setStorageSync('city', GGhome);

              wx.setStorageSync('avatarUrl', GGtouxiang);

              wx.setStorageSync('gender', GGgender);

              
            }
          })



        }
        
      }
    })

4.样式表wxss

@import '../../weui.wxss';
.modal-box {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  top: 0rpx;
  width: 100%;
  height: 100%;
}

.modal-content {
  background: #fff;
  width: 600rpx;
  margin: 40% auto 0;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ebebec;
}

.content-title {
  height: 100rpx;
  text-align: center;
  font-size: 1.2rem;
  padding-top: 10rpx;
}

.content-text {
  padding: 0 50rpx 50rpx;
}

.modal-btns {
  width: 600rpx;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.dialog-btn {
  border-radius: 0;
  background: #fff;
  height: 100rpx;
  width: 100%;
}

.dialog-btn::after {
  border: none;
  border-radius: 0;
}

.cancel {
  color: #ccc;
}

.confirm {
  border-left: 1px solid #ebebec;
  color: #60d048;
}

转载请注明:王三去-和你分享我们的故事|www.wangfa.org » 小程序首次打开弹出授权框获取用户信息

喜欢 (4)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址