微信小程序获取个人头像和昵称,和地图选点功能

JAY.LIN 收录于 Js

2022-02-26 约 1108 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=123145918

微信小程序获取个人头像和昵称，和地图选点功能

微信小程序获取个人头像和昵称，有技巧
1.可以直接获取
2.通过用户点击获取
过程中，有什么问题，可以加我微信号yizheng369探讨

先分析

这里面隐含了很多默认的规则，大家要注意：

1.可以直接获取 ：

这个要满足的条件是一定要按照微信官方给出的写法来写。这个应该是微信为了安全考虑，防止我们将用户信息用于其他违法用途吧。只能这样写。

（1）直接获取：来个最简单写法

只需这两句即可

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

（2）直接获取：复杂写法：（源码在文章最后）

这种直接获得的最大好处是，是非常便利的，不用自己调方法去获得了。

但是，有些网友觉得这种方法不够帅，不够装逼

那就用第二种： 通过方法获取 。

2.通过方法获取 ：

（这个有个问题，就是一定要通过用户点击一个按钮，然后再触发 wx.getUserProfile 方法获取到。）

**注意：**有些网友就想我直接调用 wx.getUserProfile 能获取到吗？
回答：不行。
微信规定，只能通过用户点击【授权头像昵称】这个按钮，然后触发 wx.getUserProfile 方法，才能拿到正确的头像数据。
自己随便在页面上写一个按钮，然后 bindtap="getUserProfile" 绑定这个方法就行了， getUserProfile 这个方法的具体逻辑在下面

过程中，有什么问题，可以加我微信号yizheng369探讨
我在微信小程序调用也颇有感想喔

获取头像和昵称：官方源码

// index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false, // 是否已经获取到了
    canIUse: true, // 能不能使用  另外一种写法  wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false, // 该版本微信有GetUserProfile这个方法吗？
    canIUseOpenData: true // 我能直接使用微信个人的公开数据吗？-（包括头像我昵称） // 如需尝试获取用户信息可改为false 
    // canIUseOpenData: true 可以直接获取到
    // canIUseOpenData: false 用用户点击才能获取到
    // 另一种写法 canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName')
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      console.log("当前微信版本有wx.getUserProfile：",wx.getUserProfile)
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

// index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

// index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

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

.usermotto {
  margin-top: 200px;
}

目录

微信小程序获取个人头像和昵称,和地图选点功能

微信小程序获取个人头像和昵称，和地图选点功能

先分析

获取头像和昵称：官方源码