轻松对接 GetUserProfile，完美解决老版本兼容问题

曾经终败给现在 2023-01-16 02:54 185阅读 0赞

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

流程图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

userProfile组件

userProfile/index.wxml

<view>
      
      <button wx:if="{ {canIUseGetUserProfile}}" bindtap="handleGetUserProfile">
        <text>获取头像昵称</text>
      </button>
      
      <block wx:else>
        
        <block wx:if="{ {!canAutoGetUserInfo}}">
          <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">
            <text>获取头像昵称</text>
          </button>
        </block>
        
        <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);
        }
    });

使用组件

[https_developers.weixin.qq.com_community_develop_doc_000cacfa20ce88df04cb468bc52801_blockType_1]: http://github.crmeb.net/u/defu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/14eca57f99c34e22b59a193172103883.png