1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序获取个人头像和昵称 和地图选点功能

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

时间:2020-10-15 09:42:18

相关推荐

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

微信小程序获取个人头像和昵称,有技巧

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获取用户信息,预计自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;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。