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

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

2. mask 層里面 有一個(gè)按鈕,這個(gè)按鈕是去觸發(fā) 微信原生的 獲取用戶(hù)手機(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>微信用戶(hù)一鍵綁定
</button>
</view>
</view>
methods: {
getUserProfile(){
// 推薦使用wx.getUserProfile獲取用戶(hù)信息,開(kāi)發(fā)者每次通過(guò)該接口獲取用戶(hù)個(gè)人信息均需用戶(hù)確認(rèn)
// 開(kāi)發(fā)者妥善保管用戶(hù)快速填寫(xiě)的頭像昵稱(chēng),避免重復(fù)彈窗
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶(hù)個(gè)人信息后的用途,后續(xù)會(huì)展示在彈窗中,請(qǐng)謹(jǐn)慎填寫(xiě)
success: (res) => {
this.showDialogBtn();//調(diào)用一鍵獲取手機(jī)號(hào)彈窗(自己寫(xiě)的)
}
})
},
// 顯示一鍵獲取手機(jī)號(hào)彈窗
showDialogBtn: function () {
this.showModal = true
},
// 隱藏一鍵獲取手機(jī)號(hào)彈窗
hideModal: function () {
this.showModal = false
},
//獲取用戶(hù)手機(jī)號(hào)
getPhoneNumber (e) {
console,log(e.detael)
},
總結(jié)
到此這篇關(guān)于微信小程序如何同時(shí)獲取用戶(hù)信息和用戶(hù)手機(jī)號(hào)的文章就介紹到這了,更多相關(guān)微信小程序獲取用戶(hù)信息手機(jī)號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序獲取手機(jī)號(hào)授權(quán)用戶(hù)登錄功能
- 微信小程序如何獲取用戶(hù)手機(jī)號(hào)
- 微信小程序獲取用戶(hù)綁定手機(jī)號(hào)方法示例
- 微信小程序如何通過(guò)用戶(hù)授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)
- 微信小程序用戶(hù)授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)
- 微信小程序獲取用戶(hù)手機(jī)號(hào)碼的詳細(xì)步驟
- 微信小程序中獲取用戶(hù)手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟
- 微信小程序獲取用戶(hù)手機(jī)號(hào)碼詳細(xì)教程(前端+后端)
相關(guān)文章
AngularJs+Bootstrap實(shí)現(xiàn)漂亮的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了angularJs+Bootstrap實(shí)現(xiàn)漂亮的計(jì)算器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
bootstrap-table實(shí)現(xiàn)服務(wù)器分頁(yè)的示例 (spring 后臺(tái))
本篇文章主要介紹了bootstrap-table實(shí)現(xiàn)服務(wù)器分頁(yè)的示例 (spring 后臺(tái)),具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09
javascript制作sql轉(zhuǎn)換為stringBuffer的小工具
這篇文章主要介紹了javascript制作sql轉(zhuǎn)換為stringBuffer的小工具,使用方法很簡(jiǎn)單,吧寫(xiě)好的sql語(yǔ)句只要格式化好之后放進(jìn)去就可以了,推薦給大家,有需要的小伙伴可以參考下。2015-04-04
JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法,涉及javascript基于事件響應(yīng)實(shí)現(xiàn)頁(yè)面字符串元素的獲取、截取、設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
微信小程序開(kāi)發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實(shí)例
本篇文章主要介紹了微信小程序開(kāi)發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實(shí)例,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下。2016-12-12
JavaScript實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法,使用set對(duì)象或使用`reduce`方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-02-02
echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
項(xiàng)目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2022-12-12

