收藏
评论

获取用户信息的做法


首选做这个接口改动的目的:

1、不要一进页面就让出现用户弹窗。

2、减少不必要的授权,在必须用到信息的时候在进行授权


一般有两种情况:

1、存储到服务器

2、只是用于页面展示



先说第一种情况,一般都是在进入小程序的时候就需要授权,所以我是有一个授权登录页面




显而易见,用户可以选择  不授权即可进入小程序


<button open-type="getUserInfo" wx:if="{{login}}" bindgetuserinfo="getuserinfo">

   授权并登录

button>

 
<button wx:else bindtap="getuserinfo">登录button>


但是如果每次用户进来,都需要点一下登录岂不是很烦?

所以记住登录状态最靠谱的办法就是,检测用户有没有授权

修改后的getUserInfo,在用户没有授权的情况下,不会出现弹窗,直接fail。所以如果授权了,就会直接success

onLoad () {
   wx.getUserInfo({
     success (res) {
       wx.switchTab({
         url: '../index/index'
       })
     }
   })
 }

用户再次使用小程序的时候,页面会在登录页面停留一瞬间然后进入小程序。

如果没有授权,需要用户再次点击登录,或者把用户拒绝授权记录下来,免打扰。


再说第二种情况  wxml页面直接展示

   直接使用官方提供的 open-data

"user-head">"userAvatarUrl" lang="zh_CN">
"userNickName" lang="zh_CN"  class="user-name">


就可以达到页面展示的效果。

缺点的就是头像加载稍微有一点慢,并且没有缓存。

有错误的地方或者更好的方式希望大家都可以提出。


/#-----------------------code-----------------------#/

//    登录页

<!--pages/login/login.wxml-->
<view class="container">
  <view class="main">
    <text class="h1">TuRing</text>
    <block wx:if="{{show}}">
      <button open-type="getUserInfo" bindgetuserinfo="getuserinfo" type="primary">授权并登录</button>
    </block>
    <block wx:else>
      <button bindtap="getuserinfo" type="primary">登录</button>
    </block>
    <view class="check">
      <checkbox-group  bindchange="checkboxChange">
        <checkbox value="{{true}}" checked="{{true}}"/><text>授权小程序获得你的公开信息</text>
      </checkbox-group>
    </view>
  </view>
</view>

// pages/login/login.js
Page({
  data: {
    show: true
  },
  getuserinfo () {
    wx.switchTab({
      url: '../index/index'
    })
  },
  checkboxChange () {
    this.setData({
      show: !this.data.show
    })
  },
  onLoad () {
    wx.getUserInfo({
      success (res) {
        wx.switchTab({
          url: '../index/index'
        })
      }
    })
  }
})

/* pages/login/login.wxss */
.main{
  overflow: hidden;
  background: #fff;
}
 
.check{
  text-align: center;
  font-size: 12px;
  color: #1AAD16;
}
.check text{
  vertical-align: middle;
}
.check checkbox{
  vertical-align: middle;
}
 
.h1{
  display: block;
  text-align: center;
  margin-top: 35vh;
}
 
button{
  width: 80vw;
  font-size: 16px;
  margin-top: 36vh;
  margin-bottom: 8vh;
}



最后一次编辑于  2018-05-22  (未经腾讯允许,不得转载)
复制链接收藏赞 2

1 个评论

  • 夜怡趣
    夜怡趣
    2018-05-15

    说了半天,看了半天,不懂,直接写解决方案和代码教程,更实在!!

    2018-05-15
    赞同 2
    回复