• 微信小程序button授权页面,用户拒绝后仍可再次授权


    微信小程序授权页面,进入小程序如果没授权跳转到授权页面,授权后跳转到首页,如果用户点拒绝下次进入小程序还是能跳转到授权页面,授权页面如下

    app.js  中的 onLaunch或onShow中加如下代码,如果没授权跳转到授权页面

        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }else{
              // 未授权,跳转到授权页面
              wx.reLaunch({
                url: '/pages/auth/auth',
              })
            }
          }
        })

    auth.wxml 授权页面结构

    <view class="auth">
      <image src="https://res.wx.qq.com/wxopenres/htmledition/images/favicon32f740.ico" class="img" mode="aspectFill"></image>
      <view class="title">微信授权页面</view>
      <view class="describe">此页面是微信授权页面,点击下方按钮弹出授权或跳转页面</view>
      <button class="btn" open-type='getUserInfo' wx:if="{{canIUse}}" bindgetuserinfo='onAuth'>点击微信授权</button>
      <navigator wx:if="{{!canIUse}}" class="btn" url="/pages/auth/auth" open-type="reLaunch" hover-class="other-navigator-hover">已经授权点击调转</navigator>
    </view>

    auth.wxss  授权页面样式

    /* 开始 */
    page {
      height: 100%;
      display: table;
    }
    
    .auth {
      margin-top: 0;
      text-align: center;
      display: table-cell;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      padding: 100rpx;
      vertical-align: middle;
    }
    
    .img {
      border-radius: 50%;
      border: 1px solid #fff;
      background-color: #fff;
      margin: 0 0 60rpx;
      display: inline-block;
       200rpx;
      height: 200rpx;
      line-height: 0;
    }
    
    .title {
      display: inline-block;
       100%;
      margin: 0 0 60rpx;
    }
    
    .describe {
      color: #a7aaa9;
      font-size: 26rpx;
      margin: 0 0 60rpx;
      border-radius: 50%;
      text-align: center;
      display: inline-block;
       100%;
    }
    
    .btn {
      padding: 0 60rpx;
      background-color: #19be6b;
      margin: 20rpx 0 200rpx;
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px #19be6b;  
      background: #fff !important;
      color: #19be6b !important;
      display: inline-block;
      border-radius: 10rpx;
    }

    auth.js  授权页面js,点击授权后跳转到首页

    var app = getApp();
    Page({
      data: {
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      onAuth() {
        wx.getSetting({
          success: (res) => {
            if (res.authSetting['scope.userInfo']) {
              wx.reLaunch({
                url: '../index/index',
              })
            }
          }
        })
      }
    })

    ==============================================

     本文链接 https://www.cnblogs.com/stumpx/p/9225323.html

    ==============================================

  • 相关阅读:
    企业架构研究总结(38)——TOGAF架构能力框架之架构能力建设和架构治理
    企业架构研究总结(37)——TOGAF企业连续体和工具之架构资源库及架构工具的选择
    企业架构研究总结(36)——TOGAF企业连续体和工具之企业连续体构成及架构划分
    SQL高级查询——50句查询(含答案) ---参考别人的,感觉很好就记录下来留着自己看。
    致不想奋斗的女人们
    16-Angular中的动画
    15-Angular的路由
    14-Angular供应商和自定义服务
    13-$location以及$interpolate等服务
    12-Angular的http与location
  • 原文地址:https://www.cnblogs.com/stumpx/p/9225323.html
Copyright © 2020-2023  润新知