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

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。 不得不说，微信的调整，用户体验上去了，开发难度增加了，给大家分享最近实践中的解决方案。 1.在首页index.wxml的最后加上以下代码（请通过查看源代码获取此片段）

<view class="modal-box" hidden='{{!showTip}}'>

  <view class="modal-content">

    <view class="content-title">使用前必读</view>

    <view class="content-text">

     {{tishiyu}}

    </view>

  </view>

  <view class="modal-btns">

    <view class="weui-flex">

      <view class="weui-flex__item">

        <button class="dialog-btn confirm" open-type="getUserInfo" bindgetuserinfo="getUserInfo">确认</button>

      </view>

    </view>

  </view>

</view>

     注：我把提示语做了一个后台控制，方便以后修改不用每次都进行迭代升级。变量暂时取为{{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;
}