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

微信小程序获取个人头像和昵称，有技巧
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;
}

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

微信小程序—获取用户头像、昵称
博客概要针对使用微信小程序时获取用户头像.昵称的三种方法,做一个简单分享~ 文章目录博客概要 1.wx.getUserInfo接口 2.button触发 3.open-data标签总结 1.wx ...
微信小程序获取用户头像和昵称(填写头像昵称能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
微信小程序获取用户头像和昵称(头像昵称填写能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
微信小程序获取用户头像和昵称
由于微信回收了open-data,头像返回了默认头像,昵称返回了微信用户,大家都骂骂咧咧的把getUserInfo改成了getUserProfile,getUserProfile这个api需要tap才 ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序获取用户头像昵称
微信小程序获取头像昵称问题解决文章目录微信小程序获取头像昵称问题解决前言和传统方法问题描述解决方案实现效果前言和传统方法微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码. ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...
解决通过微信小程序获取的定位坐标在百度地图渲染误差过大问题
微信小程序可以获取两种坐标系的经纬度,分别为WGS84(大地坐标系)和GCJ02(国测局坐标系)而百度却是在其基础上进行加密形成了自己的一套坐标系bd09(百度坐标系),如果直接用微信小程序获取的经纬 ...
微信小程序获取用户头像昵称组件封装（最新版）
一.前言微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接我的项目比较多,而且大部分都是只需要获取用户的头像以及昵 ...

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

先分析

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

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

最新文章

热门文章