uniapp小程序获取用户头像和昵称

### 实现 UniApp 小程序获取用户头像和昵称 #### 使用 `getUserProfile` API 获取用户信息 为了安全地获取用户的头像和昵称，在 UniApp 中可以调用微信开放平台提供的 `uni.getUserProfile()` 方法。此方法会弹出官方授权窗口给用户，只有当用户点击同意后才会返回数据。 ```javascript // pages/index/index.vue <template> <view class="content"> <!-- 用户未授权 --> <button v-if="!hasUserInfo" @click="getUserProfile">获取头像昵称</button> <!-- 显示已授权的用户信息 --> <view v-else> <image :src="avatarUrl"></image> <text>{{ nickName }}</text> </view> </view> </template> <script> export default { data() { return { hasUserInfo: false, avatarUrl: '', nickName: '' }; }, methods: { getUserProfile() { uni.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写合理原因 success: (res) => { this.hasUserInfo = true; this.avatarUrl = res.userInfo.avatarUrl; this.nickName = res.userInfo.nickName; // 可在此处处理上传逻辑 或者 发送至Java后台 console.log('User Info:', res.userInfo); } }); } } }; </script> ``` 上述代码展示了如何通过按钮触发 `getUserProfile` 函数来请求用户权限并显示其基本信息[^1]。 对于支付宝小程序而言，虽然API名称不同，但是概念相似。具体来说应该使用 `my.getAuthCode` 结合服务端解码获得完整的用户资料。 #### 处理头像存储问题 考虑到微信头像链接可能失效的情况，建议将获取到的头像URL下载保存到自己的服务器上： ```javascript async function saveAvatarToLocalServer(url){ try{ const response = await uni.downloadFile({url}); if(response.statusCode === 200){ // 这里假设有一个 uploadImage 接口用来上传图片到服务器 const result = await uni.uploadFile({ url: "https://yourserver.com/upload", filePath: response.tempFilePath, name: 'file' }); // 更新视图中的头像地址为新上传成功的路径 this.setData({avatarUrl: JSON.parse(result.data).path}) console.log("Upload Success:",result); } else { throw new Error(`Download failed with status ${response.statusCode}`); } }catch(error){ console.error("Error during download or upload:",error.message); } } ``` 这段脚本实现了从临时 URL 下载图像文件并通过 `uploadFile` 方法将其上传到自定义的服务端接口[^2]。