更新记录

1.0.6（2023-05-30） 下载此版本

修改插件授权页头像，老用户可平滑接入 无需更新

1.0.5（2023-05-08） 下载此版本

新增 自定义组件内使用该插件的示例

1.0.4（2023-05-04） 下载此版本

新增readme文件

平台兼容性

插件介绍

头像助手，为小程序提供快速获取用户头像及昵称的小插件，减少开发成本

插件优点

和微信小程序官方现在提供的头像填写能力和昵称填写能力相比，该插件有以下优点：

1、该插件可一键【同时】获取头像与昵称，减少用户操作流程

2、获取到的头像地址是可直接访问的网络地址，开发者不必再自己存储图片

效果预览

申请插件

在微信小程序后台-设置-第三方设置-插件管理-添加插件 【头像助手】，文档地址： 点击查看

使用插件

插件支持小程序原生引用和uniapp跨平台框架引用，使用插件前建议先仔细阅读文档

微信小程序官方文档： 点击查看

uniapp中使用小程序插件的相关文档：点击查看

代码示例（uni-app版）

1、manifest.json文件，源码模式在mp-weixin节点下添加

"plugins": {
  "xk-user-info": {
    "version": "1.0.0",
    "provider": "wxe30b4ad3738653e4"
  }
}

2、pages.json文件，在需要引用的页面style节点下添加（如仅在自定义组件中使用，略过此处，直接看第4步）

"mp-weixin": {
  "usingComponents": {
    "xk-user-info": "plugin://xk-user-info/user-info"
  }
}

3、页面中使用该插件

<xk-user-info @getUserInfo="getUserInfo">
    <button>授权头像及昵称</button>
    <!-- 此处使用slot插槽，按钮样式可完全自定义 -->
</xk-user-info>

export default {
    data() {
        return {
            userInfo: null
        }
    },
    methods: {
        getUserInfo(e) {
            if(e && e.detail){
                console.log('获取用户信息成功');
                console.log(e.detail.userInfo);
                this.userInfo = e.detail.userInfo;
            }
        }
    }
}

4、自定义组件中使用该插件（注：需修改编译后的代码，且返回的数据结构少了一层detail）

<xk-user-info @getUserInfo="getUserInfo">
    <button>授权头像及昵称</button>
    <!-- 此处使用slot插槽，按钮样式可完全自定义 -->
</xk-user-info>

export default {
    data() {
        return {
            userInfo: null
        }
    },
    methods: {
        getUserInfo(e) {
            // 注意：这里少了一层detail
            if(e){
                console.log('获取用户信息成功');
                console.log(e.userInfo);
                this.userInfo = e.userInfo;
            }
        }
    }
}

修改编译后的代码

"xk-user-info": "plugin://xk-user-info/user-info"

方案1: 在/components/login.json中的usingComponents节点增加上述代码，（login换成你的组件名）

方案2: 在app.json中的usingComponents节点增加上述代码

代码示例（微信小程序原生开发）

1、在app.json文件

"plugins": {
  "xk-user-info": {
    "version": "1.0.0",
    "provider": "wxe30b4ad3738653e4"
  }
}

2、页面json文件

"usingComponents": {
    "xk-user-info": "plugin://xk-user-info/user-info"
}

3、页面wxml文件

<xk-user-info bind:getUserInfo="getUserInfo">
    <button>授权头像及昵称</button>
    <!-- 此处使用slot插槽，按钮样式可完全自定义 -->
</xk-user-info>

4、页面js文件

Page({
    data: {
        userInfo: null
    },
    getUserInfo(e) {
        console.log('获取用户信息成功');
        console.log(e.detail.userInfo);
        this.setData({
            'userInfo': e.detail.userInfo
        });
    }
})

求好评

兄弟们，如果该插件对您有用，不要忘了给个5星好评呀～🌟🌟🌟🌟🌟