博客

获取流程图





ui库Vant Weapp：


Vant Weapp地址（点击跳转）

第一种方法

适用于直接点击登录获取

在界面添加登录按钮，用户点击按钮调用wx.getUserProfile()函数来提示用户授权登录，授权成功后，把用户头像数据和名称数据保存到缓存区里，并且改变全局变量的值

点击登录后



登录成功后跳转到首页

 <van-button size="small" type="primary" block color="rgba(0, 153, 255, 1)"  open-type="getUserInfo" bindtap="getUserProfile">微信一键登录</van-button>

布局以及路由跳转可以根据需求结合hasUserInfo以及canIUseGetUserProfile状态进行加判断改动


js代码

data: {
    //是否已经获取用户信息
    hasUserInfo: false,
    //是否可以调用获取信息得函数
    canIUseGetUserProfile: false，
  },
  //第一次获取用户信息
  getUserProfile: function (e) {
    wx.getUserProfile({
      desc: '获取您的微信个人信息',
      success: (res) => {
        this.setData({
          hasUserInfo: true
        })
        var app = getApp()
           app.globalData.userInfo = res.userInfo; // 将用户信息存到globalData里面
      },
      fail: function (e) {
        wx.showToast({
          title: '你选择了取消',
          icon: "none",
          duration: 1500,
          mask: true
        })
      }
    })
  },
  onLoad: function (n) {
    this.setData({
      canIUseGetUserProfile: true
    })
  },
  // 当我们登录完退出再次进入，为了避免再次点击登录按钮多次获取用户信息的情况，如果后台userInfo信息存在，直接进入登录页面，无需再次登录进行获取
  onShow: function () {
    //获取用户globalData信息
    var n = getApp().globalData.userInfo
    //当本地缓存的用户名称不为""或者null时，设置userinfo信息
    if (n.nickName != '' && n.nickName != null) {
      this.setData({
        hasUserInfo: true,
        canIUseGetUserProfile: true
      })
      wx.navigateTo({
        url: '../first/first'  // 跳转到首页
      })
      // 通过wx.login获取登录凭证（code），然后通过code去获取我们用户的openid
      wx.login({
        success: (res) => {
          console.log(res);
        },
      })
    }
  }

第二种方法，弹框点击允许=》获取用户信息=》跳转到首页

效果图

<!-- 验证码弹框 -->
  <van-dialog use-slot title="请填写手机短信验证码" show="{{ show }}" show-cancel-button confirm-button-open-type="getUserInfo" bind:close="onClose" confirmButtonText="允许" cancelButtonText="拒绝" bind:getuserinfo="getUserInfo">
    <view class="check">
      <!-- 输入验证码 -->
      <view class="query">
        <view class="query_item_name">已发送到手机号： 137***3701</view>
        <view class="query_num_block">
          <input type='number' class="num_item_block" wx:for="{{inputLen}}" wx:key="{{index}}" disabled bindtap='onFocus' value="{{iptValue.length>=index+1?iptValue[index]:''}}" />
        </view>
        <input name="password" password="{{true}}" class='hidden_ipt' maxlength="{{inputLen}}" focus="{{isFocus}}" bindinput="setValue"></input>
        <view class="getCode">
          <text bindtap="countDown" wx:if="{{countDownNum == 60 || countDownNum == -1}}">获取验证码</text>
          <text type="primary" plain="true" wx:else>{{countDownNum}}秒可重发</text>
        </view>
      </view>
    </view>
  </van-dialog>

 // 获取用户信息
  getUserInfo: function (e) {
    if (e.detail.userInfo) {
      var app = getApp()
      app.globalData.userInfo = e.detail.userInfo;
      //用户按了允许授权按钮
      var that = this;
      var code = '',
      wx.login({
        //获取code
        success: function (res) {
          code = res.code //返回code
          console.log(code, 'code')
        }
      })
      //授权成功后，跳转进入小程序首页
      wx.navigateTo({
        url: '/pages/first/first'
      })
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击了“返回授权”')
          }
        }
      })
    }
  },

弹框css

.query{
  padding-top:90rpx;
}
.query .query_item_name{
  font-family: PingFangSC-Regular;
  font-size: 35rpx;
  color: #737586;
  letter-spacing: 0;
  margin-left: 35rpx;
}
.query_num_block{
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  padding-left:36rpx;
  padding-right:36rpx;
  margin:80rpx auto 110rpx;
}
.check .confirm{
  margin:auto;
  width:200rpx;
  height: 68rpx;
  background: #F86221;
  border-radius: 33px;
  text-align: center;
  line-height: 68rpx;
  font-family: PingFangSC-Medium;
  font-size: 30rpx;
  color: #FFFFFF;
  letter-spacing: 0;
}
.num_item_block{
  height: 116rpx;
  width:80rpx;
  border:1px solid #cdcdcd;
  font-family: PingFangSC-Regular;
  border-radius: 8rpx;
  line-height: 116rpx;
  text-align: center;
  font-size: 36rpx;
  color: #25252B;
}
.hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}
.getCode{
  margin-left: 35rpx;
  margin-top: -120rpx;
  margin-bottom: 30rpx;
  font-size: 35rpx;
}