背景：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?blockType=1

流程图

userProfile组件

userProfile/index.wxml

<view>
  <!-- getUserProfile -->
  <button wx:if="{{canIUseGetUserProfile}}" bindtap="handleGetUserProfile">
    <text>获取头像昵称</text>
  </button>
  <!-- getUserInfo -->
  <block wx:else>
    <!-- getUserInfo auto -->
    <block wx:if="{{!canAutoGetUserInfo}}">
      <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">
        <text>获取头像昵称</text>
      </button>
    </block>
    <!-- getUserInfo manual -->
    <block wx:else>
      <button bindtap="handleGetUserInfo">
        <text>获取头像昵称</text>
      </button>
    </block>
  </block>
</view>

userProfile/index.js

Component({
    properties: {
        scopeCfg: {
            type: Object,
            value: {
                USER_PROFILE: {
                    order: 1,
                    handleEvtCallBack: function () { },
                },
            }
        },
    },
    data: {
        canIUseGetUserProfile: false,
        canAutoGetUserInfo: false,
    },
    lifetimes: {
        attached: function () {
            if (wx.getUserProfile) {
                this.setData({
                    canIUseGetUserProfile: true,
                });
            }
            this.checkGetUserInfo();
        }
    },
    methods: {
        handleGetUserProfile: function () {
            var _this = this;
            wx.getUserProfile({
                desc: '用于完善会员资料',
                success: function (res) {
                    _this.handleEvtCallBack({
                        scope: 'USER_PROFILE',
                        auth: true,
                        data: res.userInfo,
                    });
                },
                fail: function (err) {
                    _this.handleEvtCallBack({
                        scope: 'USER_PROFILE',
                        auth: false,
                        data: err,
                    });
                }
            });
        },
        checkGetUserInfo: function () {
            var _this = this;
            wx.getSetting({
                success: function (res) {
                    if (res.authSetting['scope.userInfo']) {
                        _this.setData({
                            canAutoGetUserInfo: true,
                        });
                    }
                },
            });
        },
        handleGetUserInfo: function () {
            var _this = this;
            wx.getUserInfo({
                success: function (res) {
                    _this.handleEvtCallBack({
                        scope: 'USER_PROFILE',
                        auth: true,
                        data: res.userInfo,
                    });
                },
                fail: function (err) {
                    _this.handleEvtCallBack({
                        scope: 'USER_PROFILE',
                        auth: false,
                        data: err,
                    });
                }
            });
        },
        handleEvtCallBack: function (param) {
            var scope = param.scope, auth = param.auth, data = param.data;
            var callBack = (this.data.scopeCfg["" + scope].handleEvtCallBack);
            callBack(auth, data);
        }
    },
});

userProfile/index.json

{
  "component": true,
  "usingComponents": {}
}

业务怎么使用

引入组件（index.json）

{
  "usingComponents": {
    "user-profile": "../userProfile/index"
  }
}

定义参数

Page({
    data: {
        scopeCfg: {
            USER_PROFILE: {
                order: 1,
                handleEvtCallBack: function () { }
            }
        },
        pageCfg: {
            useSlot: true,
        }
    },
    onLoad: function () {
        var scopeCfg = this.data.scopeCfg;
        scopeCfg.USER_PROFILE.handleEvtCallBack = this.handleGetUserProfile;
        this.setData({
            scopeCfg: scopeCfg,
        });
    },
    handleGetUserProfile: function (status, data) {
        console.log(status, data);
    }
});

使用组件

<view class="container">
  <!-- 默认的授权样式 -->
  <user-profile scopeCfg="{{scopeCfg}}"></user-profile>
</view>