<open-data type="userAvatarUrl"></open-data>
之前是使用open-data获取微信昵称和头像,但是更新之后,小程序不再支持使用该方法
现在需要用wx.getUserProfile这个API获取用户信息。页面产生点击事件(如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。
官方例子:wx.getUserProfile(Object object) | 微信开放文档 (qq.com)
获取用户信息按官方的来即可。但是在登录小程序获取一次后我们需要把用户信息存起来,不能点击一次获取一次。
文件:
<button open-type="chooseAvatar" bindchooseavatar="assd"> <image src="{{image}}" /> </button> <form catchsubmit="formSubmit" catchreset="formReset"> <view class="name"> <view class="name_text"> 昵称 </view> <view> <input class="weui-input" name="input" type="nickname" placeholder="请输入昵称" /> </view> </view> <view class="enter"> <button style="margin: 30rpx 0" type="primary" formType="submit">登录</button> </view> </form>
wxss文件:
.button { width: 100%; height: 200px; } .button button { width: 25%; height: 100px; margin-top: 50px; background-color: #ffffff; } .button image { width: 150%; height: 100%; } .name { width: 100%; height: 50px; border: 1px solid #cecccc; display: flex; } .name_text { width: 20%; height: 50px; line-height: 50px; padding-left: 5%; } .name input { width: 80%; height: 50px; } .enter { width: 100%; display: flex; justify-content: center; margin-top: 100px; }
js文件:
这是写一个默认的灰色头像
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' Page({ data: { image: defaultAvatarUrl }, })
我们需要点击按钮获取到用户头像,然后把图片存储到本地 wx.setStorageSync() 方法使用
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' Page({ data: { image: defaultAvatarUrl }, //用户头像 assd: function (e) { console.log(e.detail.avatarUrl); let headimg =e.detail.avatarUrl // 存储用户头像 wx.setStorageSync('headimg', headimg) this.setData({ image: e.detail.avatarUrl }) }, //用户名 formSubmit(e) { let nickname=e.detail.value.input // 存储用户名称 wx.setStorageSync('nickname', nickname) }, })
如何获取缓存数据:使用 wx.getStorageSync() 这个方法就可以获取本地数据
其他页面js:
Page({ data: { scrollTop: true }, onShow: function () { let img = wx.getStorageSync('headimg') let name = wx.getStorageSync('nickname') } })