04.轻松对接 GetUserProfile,完美解决老版本兼容问题
背景: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>