小程序用户头像昵称授权

一、用户头像

• 使用微信 button 的open-type="chooseAvatar",通过chooseavatar方法获取。

<button
  hover-class="none"
  open-type="chooseAvatar"
  @chooseavatar="getHeadImg"
></button>

二、用户昵称

• 使用微信 input 的type="nickname",通过 from 的submit方法获取。

<input name="nickName" type="nickname" placeholder="点击授权昵称" />

相关文档

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

组件说明

小程序用户头像昵称授权组件 userInfoAuth

（1 引入

在script中引入组件和公共方法 oUserDataModule

import userInfoAuth from "/src/components/userinfoauth/index.2.0.vue";
import oUserDataModule from "/src/libs/common/user.js";

<user-info-auth ref="user-info-auth" />

（2 使用

调用公共方法oUserDataModule.userInfoAuth

uni.showLoading({
    title: '加载中'
})
oUserDataModule.userInfoAuth({
    theme: '#1989fa',
    showAgreement: true
}).then((res) => {
    // 获取用户信息
    this.isLogin = true;
    this.userinfo = {
        nickName: res.nickname,
        avatarUrl: res.headimgurl
    }
}
uni.hideLoading();
    this.$toast("授权成功");
    this.getUserInfoFun()
}).catch((error) => {
    this.$toast("授权失败");
    console.log(error, '---')
    uni.hideLoading();
});

option

参数	说明	类型	默认值
theme	主题颜色	String	'#287F59'
authInfo	开启用户信息授权（头像、昵称）	Boolean	true
authPhone	开启手机号授权	Boolean	false
showAgreement	是否显示协议	Boolean	true
agreement_txt	协议名称	String	'小程序隐私协议'
isVersion	是否低版本	Boolean	开启用户信息授权时自动判断

• isVersion：开启用户信息授权时，微信基础库版本大于2.21.1false，大于2.16.0小于2.21.1为 true，小于2.16.0无法授权；
• 需要注意，示例中的组件协议是写死的，根据实际情况替换或者调用接口；
• 需要注意，要确认代码中 oUserDataModule.userInfoAuth 方法是否是最新的，如果不是请使用示例项目中的方法替换掉；
• 老版本的代码只做了微信基础库 2.16.0 的判断；

项目示例

uni-app 项目:svn://39.107.13.238:12580/base_digi

组件位置

列表组件：/_uniapp/src/components/userinfoauth/index.2.0.vue

使用示例

位置：/_uniapp/src/pages/demo/my/index.vue