微信小程序如何同時(shí)獲取用戶信息和用戶手機(jī)號(hào)
今天在寫登陸頁面的時(shí)候,由于需要的個(gè)人信息和手機(jī)號(hào)的授權(quán),但是如果在頁面上直接放2個(gè)按鈕,豈不是很呆???
索性就寫了一個(gè)mask層,去引導(dǎo)用戶授權(quán)手機(jī)號(hào)。

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

2. mask 層里面 有一個(gè)按鈕,這個(gè)按鈕是去觸發(fā) 微信原生的 獲取用戶手機(jī)號(hào)的 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 >綁定手機(jī)號(hào)</view>
<view >請(qǐng)先綁定手機(jī)號(hào)在進(jìn)行此操作</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ā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)
// 開發(fā)者妥善保管用戶快速填寫的頭像昵稱,避免重復(fù)彈窗
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途,后續(xù)會(huì)展示在彈窗中,請(qǐng)謹(jǐn)慎填寫
success: (res) => {
this.showDialogBtn();//調(diào)用一鍵獲取手機(jī)號(hào)彈窗(自己寫的)
}
})
},
// 顯示一鍵獲取手機(jī)號(hào)彈窗
showDialogBtn: function () {
this.showModal = true
},
// 隱藏一鍵獲取手機(jī)號(hào)彈窗
hideModal: function () {
this.showModal = false
},
//獲取用戶手機(jī)號(hào)
getPhoneNumber (e) {
console,log(e.detael)
},
總結(jié)
到此這篇關(guān)于微信小程序如何同時(shí)獲取用戶信息和用戶手機(jī)號(hào)的文章就介紹到這了,更多相關(guān)微信小程序獲取用戶信息手機(jī)號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
e.target與e.currentTarget對(duì)象的使用區(qū)別詳解
這篇文章主要為大家介紹了e.target與e.currentTarget的使用區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
Javascript異步編程async實(shí)現(xiàn)過程詳解
這篇文章主要介紹了Javascript異步編程async實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
Javascript中使用parseInt函數(shù)需要注意的問題
這篇文章主要介紹了Javascript中使用parseInt函數(shù)需要注意的問題,本文講解了parseInt函數(shù)在IE8下可能會(huì)返回0值的兼容問題解決方法,需要的朋友可以參考下2015-04-04
js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法
這篇文章主要介紹了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法,通過js的window.requestAnimationFrame來解決這一問題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子
這篇文章主要介紹了JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子,需要的朋友可以參考下2014-04-04
如何在JavaScript中運(yùn)行.NET?Core代碼詳情
這篇文章主要介紹了在JavaScript中運(yùn)行.NET?Core代碼詳情,DotNetJS可以將C#項(xiàng)目編譯為與任何環(huán)境兼容的單文件JavaScript庫,變可以在JavaScript中運(yùn)行.NET?Core代碼,相關(guān)操作分享詳情,需要的小伙伴可以參考一下2022-04-04
ECharts多圖表聯(lián)動(dòng)功能的實(shí)現(xiàn)過程
echarts是非常好用的圖表插件,下面這篇文章主要給大家介紹了關(guān)于ECharts多圖表聯(lián)動(dòng)功能的相關(guān)資料,需要的朋友可以參考下2021-06-06

