配置
使用之前要在微信公众平台配置搜集用户信息申请
设置账号设置
-服务内容声明
-用户隐私保护指引
使用
<button type="primary" class="login_btn" hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseAvatar">获取微信头像</button>
const chooseAvatar = (e) => {
}
踩坑
用户首次进入小程序并使用相关开发能力时,微信会自动进行隐私确认弹窗。
修改之后:
<!-- 用户首次进入小程序并使用相关开发能力时,微信会自动进行隐私确认弹窗-->
<!-- 若用户拒绝该隐私指引,后续再点击按钮则无法触发@chooseavatar,点击按钮没有任何反应(微信的隐私弹窗有个内置的cd时间,大约15秒左右,第一次拒绝后等大约15秒后再点击按钮,才会再次出现弹窗 ),
交互体验很差。且控制台也可能不会出现任何报错信息。-->
<!-- 在按钮上添加click事件,事件回调中获取用户的隐私授权情况,未授权则主动唤起隐私弹窗-->
<button type="primary" class="login_btn" hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseAvatar" @click="checkPrivacy">使用微信账号进入</button>
// 是否使用微信头像
const useAvatar = ref(true);
// 选择用户头像, 重点, 得调用下上传图片接口
const chooseAvatar = async (e) => {
try {
const avatar = await uploadFile({
url: '/api/file/upload',
filePath: e.detail.avatarUrl
});
console.log('chooseAvatar', avatar)
// 获取用户头像
wxlogin.avatarUrl = avatar.data;
useAvatar.value = false;
} catch (e) {
useAvatar.value = false;
console.log('获取用户头像失败', e)
}
}
/**
* 用户首次进入小程序并使用相关开发能力时,微信会自动进行隐私确认弹窗
* 若用户拒绝该隐私指引,后续再点击按钮则无法触发@chooseavatar,点击按钮没有任何反应(微信的隐私弹窗有个内置的cd时间,大约15秒左右,
* ,才会再次出现弹窗 ),交互体验很差。且控制台也可能不会出现任何报错信息。
* 此时可以通过使用wx.getPrivacySetting、wx.requirePrivacyAuthorize等api来优化交互
* wx.getPrivacySetting:获取用户隐私授权状态
* wx.requirePrivacyAuthorize:手动唤起微信隐私确认弹窗
* 在按钮上添加click事件,事件回调中获取用户的隐私授权情况,未授权则主动唤起隐私弹窗
*/
const checkPrivacy = () => {
setTimeout(() => {
// wx.getPrivacySetting:获取用户隐私授权状态
uni.getPrivacySetting({
success: res => {
// res.needAuthorization 是否需要隐私授权 true-需要(未授权) false-不需要(已授权)
// wx.requirePrivacyAuthorize:手动唤起微信隐私确认弹窗
res.needAuthorization && wx.requirePrivacyAuthorize();
}
})
}, 500)
}