关于小程序授权更好体验

当我们点击拒绝，可能有些功能不能更好的使用，所以，我们要为用户打造更好的体验！

 

废话不多说，直接上代码！

授权页面

auth.wxml

<view class="imgBox">

<!-- 心跳 -->

<view class="bottomMiddleHeaderItemSubView">

<image src="../../images/heart.png" style="width:150rpx; height:150rpx;" animation="{{animationMiddleHeaderItem}}"></image>

</view>

</view>

<view class='textBox'>

<view class='welcome'>

<text>欢迎使用小程序</text>

</view>

<button class='btn' open-type="getUserInfo" bindgetuserinfo="getUserInfo">开始使用</button>

</view>

auth.css

/* pages/auth/auth.wxss */

.imgBox{
  width: 100%;
  height: 360rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100rpx;
}
.textBox{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 150rpx;
  font-size: 50rpx;
  color: #f10215;
}
.btn{
  background: #f10215;
  width: 60%;
  font-size: 40rpx;
  color: #FFFFFF;
}

auth.js

// pages/auth/auth.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo:{},
    hasUserInfo: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  getUserInfo: function (e) {
    console.log(e)
    if (e.detail.userInfo) {
      console.log('授权通过')
      console.log(e.detail.userInfo)
      const user = e.detail.userInfo;
      wx.setStorageSync('user', user)
      wx.reLaunch({
        url: '../index/index',
      })
    } else {
      console.log('拒绝授权')
      wx.reLaunch({
        url: '../checkAgain/checkAgain',
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var circleCount = 0;
    this.animationMiddleHeaderItem = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
      delay: 100,
      transformOrigin: '50% 50%',
      success: function (res) {

      }
    });

    setInterval(function () {
      if (circleCount % 2 == 0) {
        this.animationMiddleHeaderItem.scale(1.15).step();
      } else {
        this.animationMiddleHeaderItem.scale(1.0).step();
      }
      this.setData({
        animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()
      });
      circleCount++;
      if (circleCount == 1000) {
        circleCount = 0;
      }
    }.bind(this), 1000);
  },

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

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

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

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

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

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

如果点击拒绝，怎会切到我们重新授权页面

重新授权页面

checkAgain.wxml

<view class='textBox'>
  <text class='title'>温馨提示！</text>
  <text>为保证您的正常使用，请进行授权！</text>
</view>
<view class='btnBox'>
  <button class='btn' open-type="getUserInfo" bindgetuserinfo="getUserInfo">重新授权</button>
</view>

checkAgain.wxss

/* pages/checkAgain/checkAgain.wxss */
.textBox{
  width: 100%;
  padding: 30rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.textBox text{
  line-height: 80rpx;
}
.title{
  font-size: 50rpx;
}
.btnBox{
  width: 100%;
  display: flex;
  justify-content: center;
}
.btnBox .btn{
  background: #f10215;
  width: 60%;
  font-size: 40rpx;
  color: #FFFFFF;
}

checkAgain.js

// pages/checkAgain/checkAgain.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  getUserInfo: function (e) {
    console.log(e)
    if (e.detail.userInfo) {
      console.log('授权通过')
      console.log(e.detail.userInfo)
      const user = e.detail.userInfo;
      wx.setStorageSync('user', user)
      wx.reLaunch({
        url: '../index/index',
      })
    } else {
      console.log('拒绝授权')
      wx.reLaunch({
        url: '../checkAgain/checkAgain',
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

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

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

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

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

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

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

如果点击允许，则直接进入小程序首页。

 

好了，谢谢大家看我写的废话，如对你有帮助，请直接拿走，不用谢。