getUserInfo

不推薦使用getUserInfo獲取使用者資訊，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的使用者個人資訊。

<template>
  <view>
      <!-- 如果只是展示使用者頭像暱稱，可以使用 <open-data /> 元件 -->
      <open-data type="userAvatarUrl"/>
      <open-data type="userNickName"/>
			<!-- 需要使用 button 來授權登入-->
      <button v-if="canIUse" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授權登入</button>
      <view v-else>請升級微信版本</view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      canIUse: wx.canIUse('button.open-type.getUserInfo'),
    }
  },
  onLoad() {
    uni.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  methods:{
    bindGetUserInfo (e) {
      console.log(e.detail.userInfo)
    }
  }
}
</script>
<style lang='scss'></style>

 

getUserProfile

推薦使用wx.getUserProfile獲取使用者資訊，開發者每次通過該介面獲取使用者個人資訊均需使用者確認。
開發者妥善保管使用者快速填寫的頭像暱稱，避免重複彈窗。

<template>
  <view>
    <view v-if="!hasUserInfo">
        <button @tap="getUserProfile"> 獲取頭像暱稱 </button>
    </view>
  </view>
</template>

<script>
  
export default {
  data() {
    return {
      code:'',
      userInfo: {},
      hasUserInfo: false,
      canIUseGetUserProfile: false,
    }
  },
  onLoad() {
    if (uni.getUserProfile) {
      this. canIUseGetUserProfile = true
    }
  },
  methods:{
    getUserProfile() {
      uni.login({
        success:(res) =>{
          this.code = res.code
          uni.setStorageSync('code',res.code)
        }
      })
      uni.getUserProfile({
        desc: '用於完善會員資料', // 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中，請謹慎填寫
        success: (res) => {
          console.log(res)
          const {userInfo} = res
          this.userInfo = userInfo
          // 可以調取後端介面取得openId和token
          this.hasUserInfo = true
        }
      })
    }
  }
}
</script>
<style lang="scss"></style>
 

getPhoneNumber

<template>
    <view class="userinfo">
      <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">獲取手機號</button>
    </view>
</template>
<script>

export default {
  data() {
    return {}
  },
  methods:{
    async getPhoneNumber(e){
      console.log(e.detail)
    }
  }
}
</script>

<style lang="scss"></style>