微信小程序如何同時(shí)獲取用戶信息和用戶手機(jī)號(hào)
今天在寫登陸頁(yè)面的時(shí)候,由于需要的個(gè)人信息和手機(jī)號(hào)的授權(quán),但是如果在頁(yè)面上直接放2個(gè)按鈕,豈不是很呆???
索性就寫了一個(gè)mask層,去引導(dǎo)用戶授權(quán)手機(jī)號(hào)。
1. 當(dāng)我點(diǎn)擊快捷登錄的 微信登錄時(shí),首先觸發(fā)的是 微信原生的 獲取用戶信息userInfo 的方法,再它的 success 回調(diào)里面去打開(kāi) mask 層.....
2. mask 層里面 有一個(gè)按鈕,這個(gè)按鈕是去觸發(fā) 微信原生的 獲取用戶手機(jī)號(hào)的 getPhoneNumber 的方法,接下來(lái)就不用我多說(shuō)了吧。。。。
直接甩代碼
<!--快捷登錄--> <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獲取用戶信息,開(kāi)發(fā)者每次通過(guò)該接口獲取用戶個(gè)人信息均需用戶確認(rèn) // 開(kāi)發(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-07Javascript異步編程async實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了Javascript異步編程async實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04Javascript中使用parseInt函數(shù)需要注意的問(wèn)題
這篇文章主要介紹了Javascript中使用parseInt函數(shù)需要注意的問(wèn)題,本文講解了parseInt函數(shù)在IE8下可能會(huì)返回0值的兼容問(wèn)題解決方法,需要的朋友可以參考下2015-04-04js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法
這篇文章主要介紹了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法,通過(guò)js的window.requestAnimationFrame來(lái)解決這一問(wèn)題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10JavaScript使用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庫(kù),變可以在JavaScript中運(yùn)行.NET?Core代碼,相關(guān)操作分享詳情,需要的小伙伴可以參考一下2022-04-04ECharts多圖表聯(lián)動(dòng)功能的實(shí)現(xiàn)過(guò)程
echarts是非常好用的圖表插件,下面這篇文章主要給大家介紹了關(guān)于ECharts多圖表聯(lián)動(dòng)功能的相關(guān)資料,需要的朋友可以參考下2021-06-06