Skip to content

小程序用户头像昵称授权

一、用户头像

  • 使用微信 button 的open-type="chooseAvatar",通过chooseavatar方法获取。
html
<button
  hover-class="none"
  open-type="chooseAvatar"
  @chooseavatar="getHeadImg"
></button>

二、用户昵称

  • 使用微信 input 的type="nickname",通过 from 的submit方法获取。
html
<input name="nickName" type="nickname" placeholder="点击授权昵称" />

相关文档

  • 获取用户信息默认都需要用户同意隐私协议,除非有特别说不需要。
img.pngimg.pngimg.png

三、 使用示例

组件位置:/src/components/userinfoauth/v3/index.vue

script中引入 nxhSDKLib,通过sdk调用方法nxhSDKLib.oUserDataModule.userInfoAuth唤起授权弹窗

js
import {nxhSDKLib} from "@/nxhsdk.module.min";

uni.showLoading({
    title: '加载中'
})
nxhSDKLib.oUserDataModule.userInfoAuth({
    theme: '#1989fa',
    authInfo: true,
    authPhone: false,
    showAgreement: true,
    isAllowClose: true,
}).then((res) => {
    // 授权成功后执行
    this.isLogin = true;
    this.userinfo = {
        nickName: res.nickname,
        avatarUrl: res.headimgurl
    }
    this.$toast("授权成功");
    this.getUserInfoFun()
}).catch((error) => {
    // 授权失败后执行
    uni.hideLoading();
    this.$toast("授权失败");
    console.log(error, '---')
    uni.hideLoading();
})

2. userInfoAuth可传配置参数option

参数说明类型默认值
authInfo开启用户信息授权(头像、昵称)Booleantrue
authPhone开启手机号授权Booleanfalse
showAgreement是否显示协议Booleantrue
agreement_txt协议名称String'小程序隐私协议'
isVersion是否低版本Boolean开启用户信息授权时自动判断
isAllowClose是否允许关闭Boolean-
  • isVersion:开启用户信息授权时,微信基础库版本大于2.21.1false,大于2.16.0小于2.21.1为 true,小于2.16.0无法授权;
  • 需要注意,示例中的组件协议是写死的,根据实际情况替换或者调用接口;
  • 需要注意,要确认代码中 oUserDataModule.userInfoAuth 方法是否是最新的,如果不是请使用示例项目中的方法替换掉;
  • 老版本的代码只做了微信基础库 2.16.0 的判断;