Micro channel small program at the same time to obtain user information and user phone number!

Today, when writing the login page, due to the need for personal information and mobile phone number authorization, but if the page directly put two buttons, isn’t it stupid??

Simply write a mask layer to guide the user to authorize the phone number.

1. When I click the shortcut login wechat login, the first trigger is the native method of obtaining user information userInfo of wechat, and then open the mask layer….. in its Success callback

2. Mask layer inside a button, this button is to trigger the wechat native getPhoneNumber method to get the user’s phone number, I don’t need to tell you more…

Direct dump code

<! -- 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 popover -->
<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 the phone number</view>
	<view >Please bind your mobile phone number before performing this operation</view>  
	<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		<image src='/static/img/share/wx.png' class='iconWx'></image>One-click binding for wechat users</button>
    </view>
</view>
Copy the code

methods: {
    getUserProfile(){
    // It is recommended to use wx.getUserProfile to obtain user information. Each time the developer uses this interface to obtain user personal information, the user needs to confirm
    // The developer should keep the profile picture nicknames that users fill in quickly to avoid repeated pop-ups
        wx.getUserProfile({
            desc: 'To improve member profile'.// Declare the purpose of obtaining the user's personal information, which will be displayed in the popover later, please fill in carefully
            success: (res) = > {
		this.showDialogBtn();// Call one key to get the phone number popover (self written)}})},// Display the one-click popover for obtaining mobile phone number
                    showDialogBtn: function () {
            this.showModal = true
                    },
                    // Hide the one-click popover to get the phone number
                    hideModal: function () {
                             this.showModal = false
                    },
    // Get the user's phone number
    getPhoneNumber (e) {
        console,log(e.detael)
    },
Copy the code

That’s all for this share. Thank you for checking. Welcome to ~~~~~~~~