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

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

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

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

索性就寫了一個mask層，去引導用戶授權手機號。

1. 當我點擊快捷登錄的微信登錄時，首先觸發(fā)的是微信原生的獲取用戶信息userInfo 的方法，再它的 success 回調里面去打開 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ā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
        wx.getUserProfile({
            desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
            success: (res) => {
		this.showDialogBtn();//調用一鍵獲取手機號彈窗（自己寫的）
            }
	})
    },
    // 顯示一鍵獲取手機號彈窗
                    showDialogBtn: function () {
            this.showModal = true
                    },
                    // 隱藏一鍵獲取手機號彈窗
                    hideModal: function () {
                             this.showModal = false
                    },
    //獲取用戶手機號
    getPhoneNumber (e) {
        console,log(e.detael)
    },

總結

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

您可能感興趣的文章:

AngularJs+Bootstrap實現漂亮的計算器
這篇文章主要為大家詳細介紹了angularJs+Bootstrap實現漂亮的計算器，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
bootstrap-table實現服務器分頁的示例（spring 后臺）
本篇文章主要介紹了bootstrap-table實現服務器分頁的示例（spring 后臺），具有一定的參考價值，有興趣的可以了解一下
2017-09-09
JS敏感詞過濾代碼
本篇文章主要介紹了JS敏感詞過濾實例，詳細的介紹了兩種方法，RegExp（），replace（），具有一定的參考價值，有興趣的可以了解一下。
2016-12-12
javascript制作sql轉換為stringBuffer的小工具
這篇文章主要介紹了javascript制作sql轉換為stringBuffer的小工具，使用方法很簡單，吧寫好的sql語句只要格式化好之后放進去就可以了，推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
探索webpack模塊及webpack3新特性
webpack是一個強大的模塊打包工具，在處理依賴、模塊上都很優(yōu)秀，本文從bundle.js文件分析出發(fā)去探索了不同模塊方案的加載機制，初步去理解webpack，并且對webpack3特性進行闡述
2017-09-09
JavaScript常用本地對象小結
這篇文章主要介紹了JavaScript常用本地對象小結的相關資料,需要的朋友可以參考下
2016-03-03
JavaScript實現隱藏省略文字效果的方法
這篇文章主要介紹了JavaScript實現隱藏省略文字效果的方法,涉及javascript基于事件響應實現頁面字符串元素的獲取、截取、設置等相關操作技巧,需要的朋友可以參考下
2017-04-04
微信小程序開發(fā)之視頻播放器 Video 彈幕彈幕顏色自定義實例
本篇文章主要介紹了微信小程序開發(fā)之視頻播放器 Video 彈幕彈幕顏色自定義實例，具有一定的參考價值，有興趣的同學可以了解一下。
2016-12-12
JavaScript實現數組對象去重的多種方法
這篇文章主要介紹了JavaScript實現數組對象去重的多種方法，使用set對象或使用`reduce`方法，本文結合示例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2023-02-02
echarts餅圖標簽formatter使用及餅圖自定義標簽
項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網學習了一番,下面這篇文章主要給大家介紹了關于echarts餅圖標簽formatter使用及餅圖自定義標簽的相關資料,需要的朋友可以參考下
2022-12-12