How does WeChat Mini Program obtain user information and user phone number at the same time

<!--Quick Login-->
<button open-type="getUserInfo" @tap="getUserProfile">
    <view class="item column center">
	<image class="iconc" src="/static/img/share/wx.png"></image>
    </view>
</button>
<!--Login pop-up window-->
<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="showModal"></view>
    <view class="modal-dialog" v-if="showModal">
	<view class="modal-content">
	<view><image src='' class='show'></image></view>
	<view >Bind mobile phone number</view>
	<view>Please bind your mobile number before performing this operation</view>  
	<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		<image src='/static/img/share/wx.png' class='iconWx'></image>WeChat user one-click binding </button>
    </view>
</view>

methods: {
    getUserProfile(){
    // It is recommended to use wx.getUserProfile to obtain user information. Developers need to confirm each time they obtain user personal information through this interface. // Developers should properly keep the avatar nicknames quickly filled in by users to avoid repeated pop-ups. wx.getUserProfile({
            desc: 'Used to complete member information', //Declare the purpose of obtaining user personal information, which will be displayed in the pop-up window later, please fill in carefully success: (res) => {
		this.showDialogBtn(); //Call the pop-up window to get the mobile phone number with one click (written by myself)
            }
	})
    },
    // Display the pop-up window for getting the phone number with one click showDialogBtn: function () {
            this.showModal = true
                    },
                    // Hide the pop-up window for getting the phone number with one click hideModal: function () {
                             this.showModal = false
                    },
    //Get the user's phone numbergetPhoneNumber (e) {
        console,log(e.detael)
    },