快捷導(dǎo)航

微信小程序如何同時獲取用戶信息和用戶手機號

更新時間：2021年08月11日 14:27:20 作者：沒故事的燕同學(xué)

小程序登錄是現(xiàn)在小程序里面很普遍的一個功能,因為官方提供的方法,可以一鍵獲取到用戶信息,一鍵拿到手機號,這篇文章主要給大家介紹了關(guān)于微信小程序如何同時獲取用戶信息和用戶手機號的相關(guān)資料,需要的朋友可以參考下

今天在寫登陸頁面的時候，由于需要的個人信息和手機號的授權(quán)，但是如果在頁面上直接放2個按鈕，豈不是很呆？？？

索性就寫了一個mask層，去引導(dǎo)用戶授權(quán)手機號。

1. 當(dāng)我點擊快捷登錄的微信登錄時，首先觸發(fā)的是微信原生的獲取用戶信息userInfo 的方法，再它的 success 回調(diào)里面去打開 mask 層.....

2. mask 層里面有一個按鈕，這個按鈕是去觸發(fā) 微信原生的獲取用戶手機號的 getPhoneNumber 的方法，接下來就不用我多說了吧。。。。

直接甩代碼

<!--快捷登錄-->
<button open-type="getUserInfo" @tap="getUserProfile">
    <view class="item column center">
	<image class="iconc" src="/static/img/share/wx.png"></image>
    </view>
</button>
<!--登錄彈窗-->
<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 >綁定手機號</view>
	<view >請先綁定手機號在進行此操作</view>  
	<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		<image src='/static/img/share/wx.png' class='iconWx'></image>微信用戶一鍵綁定
	</button>
    </view>
</view>

methods: {
    getUserProfile(){
    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認
    // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
        wx.getUserProfile({
            desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
            success: (res) => {
		this.showDialogBtn();//調(diào)用一鍵獲取手機號彈窗（自己寫的）
            }
	})
    },
    // 顯示一鍵獲取手機號彈窗
                    showDialogBtn: function () {
            this.showModal = true
                    },
                    // 隱藏一鍵獲取手機號彈窗
                    hideModal: function () {
                             this.showModal = false
                    },
    //獲取用戶手機號
    getPhoneNumber (e) {
        console,log(e.detael)
    },

總結(jié)

到此這篇關(guān)于微信小程序如何同時獲取用戶信息和用戶手機號的文章就介紹到這了,更多相關(guān)微信小程序獲取用戶信息手機號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: