Mini Program Authorization Login Notes2020-07-28

Need to judge

index.JS

  onLoad: function (options) {
    var that = this
  // 判断用户是否授权登录
    wx.getSetting({
      success: function (res) {
        // 判断是否授权
        if (res.authSetting['scope.userInfo']) {
           //获取用户信息
          wx.getUserInfo({
            success: function (res) {
              //用户已经授权过，添加用户信息
              // var that = this
              //wx.setStorageSync('nickName', res.userInfo.nickName)
              //wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
            }
          });
        }else{
          wx.showToast({
             title: '请授权登录！',
             icon: 'none',
             duration: 1500,
             success: function () {
          //定时器，未授权1.5秒后跳转授权页面
             setTimeout(function () {
             wx.reLaunch({
             url: '../denglu/index',
                })
              }, 1500);
             }
            })
        }
      }
    })
  },

Authorization page index(pages)

denglu.js

const app = getApp()
Page({
    data: {
        //判断小程序的API，回调，参数，组件等是否在当前版本可用。
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        userInfo: "",
        isHide: false
    },

    onLoad: function () {
        var that = this;
        // 查看是否授权
        wx.getSetting({
            success: function (res) {
                if (res.authSetting['scope.userInfo']) {
                    wx.getUserInfo({
                        success: function (res) {
                            console.log("userInfo：", res.userInfo);
                            that.setData({
                                userInfo: res.userInfo,
                                
                            })

                            // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
                            // 根据自己的需求有其他操作再补充
                            wx.navigateBack(1) //返回前一页 返回前一页 返回前一页
                        }
                    });
                } else {
                    // 用户没有授权
                    // 改变 isHide 的值，显示授权页面
                    that.setData({
                        isHide: true
                    });
                }
            }
        });
    },

    bindGetUserInfo: function (e) {
        if (e.detail.userInfo) {
            //用户按了允许授权按钮
            var that = this;
            // 获取到用户的信息了，打印到控制台上看下
            console.log("用户的信息如下：");
            console.log(e.detail.userInfo);

            //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
            that.setData({
                isHide: false,
            });
            wx.navigateTo({
                url:"../index/index"
            })
        } else {
            //用户按了拒绝按钮
            wx.showModal({
                title: '警告',
                content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
                showCancel: false,
                confirmText: '返回授权',
                success: function (res) {
                    // 用户没有授权成功，不需要改变 isHide 的值
                    if (res.confirm) {
                        console.log('用户点击了“返回授权”');
                    }
                }
            });
        }
    }
})

Authorization page denglu.wxml

<cu-custom bgColor="bg-gradual-grey" isCustom="{
   
   {true}}">
	<view slot="content">授权登录</view>
</cu-custom>
<view wx:if="{
   
   {isHide}}">
	<view wx:if="{
   
   {canIUse}}">
		<view class='header'>
			<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595847129591&di=05577ed088aa6f20b16b27dd07ed3fd9&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F9b4596c8e4540a7ccb9532f43caff1dcd486769a2bb10-T2Fgh6_fw658></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>
</view>

<view wx:else>
	<!--index.wxml-->
	<view class="container">
		<view class="userinfo">
			<image bindtap="bindViewTap" class="userinfo-avatar" src="{
   
   {userInfo.avatarUrl}}" mode="cover"></image>
			<text class="userinfo-nickname">{
   
   {userInfo.nickName}}</text>
		</view>
	</view>
	<view class="usermotto">
		<text class="user-motto">登录成功</text>
	</view>
</view>

Authorization page denglu.wxss

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  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;
}


/**index.wxss**/
.userinfo {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

• Unauthorized page rendering
  

Finally, if you have any questions, you can contact WX: qiaominliu

Finally-----------You know------------------------------------ -------