微信小程序手機號授權一鍵登錄功能實現(xiàn)代碼
更新時間：2024年10月22日 10:24:47 作者：csstmg
在微信小程序中實現(xiàn)手機號一鍵登錄功能,首先需要通過uni.login調用獲取微信的登錄憑證（code）,然后將此code發(fā)送到服務端,本文給大家介紹微信小程序手機號授權一鍵登錄功能,感興趣的朋友跟隨小編一起看看吧
<template>
<view class="container">
<!-- <image class="img"
src="https://jetour-self-prod.oss-cn-hangzhou.aliyuncs.com/public/jetour-mini/images/car.png"
mode="widthFix"></image> -->
<image class="img" :src="backgroundLogo" mode="widthFix"></image>
<image class="img2" :src="logo" mode="widthFix"></image>
<image class="img3" :src="carLogo" mode="widthFix"></image>
<view class="btn-mask">
<view class="btns" @click="clicklogin" v-show="!isAgreed">
<button class="openBtn" >一鍵登錄</button>
</view>
<view class="btns" v-show="isAgreed">
<button class="openBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >一鍵登錄</button>
</view>
<view class="checkbox-container">
<checkbox-group @change="handleCheckboxChange">
<label>
<checkbox value="agree" :checked="isAgreed" class="myCheckbox" />
我已閱讀并同意
<text class="link" @click.stop="navigateToPrivacyPolicy(1)">《用戶服務協(xié)議》</text>
<text class="link" @click.stop="navigateToPrivacyPolicy(2)">《隱私協(xié)議》</text>
</label>
</checkbox-group>
</view>
</view>
</view>
</template>
<script>
import dayJs from 'dayjs'
import {
getWxCode,
getWxUserTel,
getWxUserInfo,
createWxUserClue
} from '../../../api/clue.js'
export default {
onLoad(option) {
this.qrCodeId = option.scene
console.log(this.qrCodeId)
this.getLoginCode()
},
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333'
}
},
backgroundLogo: require('../../static/img/liveStoreCode/backgroundLogo.png'),
carLogo: require('../../static/img/liveStoreCode/carLogo.png'),
logo: require('../../static/img/liveStoreCode/logo.png'),
isAgreed: false,
login_code: null,
sessionKey: null,
openId: null,
rawData: null,
userInfo: {},
signature: null,
userTel: null,
qrCodeId: null,
showWx: false
};
},
methods: {
close() {
this.showWx = false
},
handleCheckboxChange(){
this.isAgreed = !this.isAgreed
},
// 跳轉到隱私協(xié)議頁面
navigateToPrivacyPolicy(type) {
let goUrl = ''
if(type == 1){
goUrl='/pages/protocol/useProtocol'
}
if(type == 2){
goUrl='/pages/protocol/concealProtocol'
}
uni.navigateTo({
url: goUrl
});
},
getLoginCode() {
const that = this
uni.login({
success: function(res) {
console.log(res, 'login')
// 獲取code
that.login_code = res.code;
uni.getUserInfo({
withCredentials: true,
success(data) {
console.log(data,'data');
console.log(JSON.stringify(data));
that.rawData = data.rawData
that.userInfo = data.userInfo
that.signature = data.signature
that.getCurUserWxCode()
}
})
}
});
},
clicklogin(){
console.log(this.isAgreed,'this.isAgreed');
if(!this.isAgreed){
wx.showToast({
title: '請先同意捷途用戶服務協(xié)議',
icon: 'none'
});
return false
}
},
// 獲取用戶手機號
getPhoneNumber(e) {
console.log(e.detail,'e.detail') // 判斷用戶是否允許獲取手機號
const params = {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
sessionKey: this.sessionKey,
openId: this.openid,
signature: this.signature,
rawData: this.rawData
}
if (e.detail.errMsg == "getPhoneNumber:ok") { // 用戶允許或去手機號
getWxUserTel(params).then(res => {
this.userTel = res.data.data.phoneNumber
// 判斷從外面過來的type 然后判斷是進 活碼頁面還是領取優(yōu)惠卷頁面
uni.navigateTo({
url: `/pages/webView/webView?url=` + encodeURIComponent('https://blog.csdn.net/qq_48701993/article/details/134713613')
})
// this.submitClue()
})
// this.getCurUserInfo(params)
}
},
getCurUserInfo(params) {
getWxUserInfo(params)
},
getCurUserWxCode() {
const that = this
const params = {
code: this.login_code
}
getWxCode(params).then((res) => {
const data = res.data.data
that.sessionKey = data.sessionKey
})
},
submitClue() {
const {
nickName,
gender
} = this.userInfo
// 跳h5頁面 并且攜帶參數(shù)
// const params = {
// qrCodeId: this.qrCodeId,
// name: nickName,
// phone: this.userTel,
// sex: gender,
// weChat: '',
// authorizationTime: dayJs().format('YYYY-MM-DD HH:mm:ss')
// }
// console.log('提交表單' + JSON.stringify(params))
// createWxUserClue(params).then(res => {
// this.showWx = true
// })
}
}
}
</script>
<style lang="scss">
.img {
width: 100vw;
height: 100vh;
display: block;
}
.img2{
position: absolute;
width: 80px;
height: 80px;
top: 60px;
margin-left: calc(50vw - 40px);
}
.title{
font-size: 18px;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
top: 150px;
}
.img3{
position: absolute;
width: 350px;
height: 222px;
top: 200px;
margin-left: calc(50vw - 175px);
}
.btn-mask {
// background-color: rgba(0, 0, 0, 0.2);
// background-image: url('https://jetour-self-prod.oss-cn-hangzhou.aliyuncs.com/public/jetour-mini/images/car.png');
// background-size: contain;
// background-repeat: no-repeat;
// background-position: bottom;
position: absolute;
width: 100%;
height: 100%;
z-index: 20;
top: 0;
left: 0;
// .checkbox-container{
// position: absolute;
// bottom: 80rpx;
// }
}
.myCheckbox{
::v-deep .uni-checkbox-input{
width: 16px;
height: 16px;
margin-right: 8px;
}
}
.checkbox-container{
display: flex;
width: 94%;
align-items: center;
justify-content: center;
line-height: 25px;
font-size: 14px;
color: #666;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 12px;
}
.link {
color: #007aff;
// margin: 0 5px;
}
.container {
width: 100vw;
height: 100vh;
}
.btns {
width: 80%;
position: absolute;
left: 10%;
top: 70%;
// margin-left: -15%;
border-radius: 80px;
display: flex;
justify-content: flex-start;
button {
width: 100%;
height: 80rpx;
line-height: 80rpx;
&:after {
display: none;
}
&.openBtn {
// background: #00A198;
background-color: #165DFF;
color: #fff;
// border: 1px solid #fff;
}
}
}
.txt-content {
text-align: center;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
width: 90%;
margin: 70px auto;
text {
color: #3D3D3D;
font-size: 30rpx;
}
image {
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
margin-right: 20rpx;
}
}
.jetour-wx {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
width: 100%;
height: 100%;
z-index: 30;
top: 0;
left: 0;
.jetour-wx-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 400rpx;
height: auto;
background: #fff;
color: #000;
border-radius: 10px;
padding: 20px 0;
display: flex;
flex-direction: column;
image {
width: 360rpx;
height: 360rpx;
margin: 0 auto;
}
.colse {
position: absolute;
right: 10px;
top: 0px;
background: none;
outline: none;
border: none;
font-size: 12px;
padding: 0;
&:after {
border: none;
}
}
}
}
</style>要點getLoginCode uni.login 以后獲取微信code 拿到code 然后走后端接口換信息 具體看代碼
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-login/code2Session.html
小程序自己的組件
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html#%E8%BF%94%E5%9B%9E%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E
<view class="btns" v-show="isAgreed">
<button class="openBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >一鍵登錄</button>
</view>到此這篇關于微信小程序手機號授權一鍵登錄功能的文章就介紹到這了,更多相關微信小程序手機號一鍵登錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用PBFunc在Powerbuilder中支付寶當面付款功能
這篇文章主要介紹了使用PBFunc在Powerbuilder中支付寶當面付款功能的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要為大家提供了用JavaScript編寫的獲取時間的類，以及時間戳轉時間的三種格式，文中的示例代碼講解詳細，感興趣的可以了解一下2022-03-03
這篇文章主要為大家詳細介紹了js簡單實現(xiàn)網頁換膚功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本人水平有限，這么個東東想了好幾天才弄出來個半成品，還有一些問題沒有解決，先放上來存著備忘，也望高手指點一二。2011-01-01
手機端圖片縮放旋轉全屏查看PhotoSwipe.js插件實現(xiàn)
這篇文章主要介紹了手機端圖片縮放旋轉全屏查看PhotoSwipe.js插件實現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript如何讓select選擇框可輸入和可下拉選擇
我們知道一般select下拉框是只能選擇的,而有時我們會遇到下拉框中沒有要選擇的信息項或者下拉選項特別多時,需要允許用戶輸入想要的內容,這篇文章主要給大家介紹了關于JavaScript如何讓select選擇框可輸入和可下拉選擇的相關資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了javascript常用算法,結合實例形式較為詳細的分析總結了JavaScript中常見的各種排序算法以及堆、棧、鏈表等數(shù)據結構的相關實現(xiàn)與使用技巧,需要的朋友可以參考下2015-11-11
JS中setInterval、setTimeout不能傳遞帶參數(shù)的函數(shù)的解決方案
在JS中無論是setTimeout還是setInterval，在使用函數(shù)名作為調用句柄時都不能帶參數(shù)，而在許多場合必須要帶參數(shù)，接下來為大家介紹具體的解決方法2013-04-04
uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
firefox瀏覽器下javascript 拖動層效果與原理分析代碼
這篇文章主要給大家介紹了關于在firefox瀏覽器下如何利用javascript實現(xiàn)拖動層效果，以及其中的原理分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面來一起看看吧2007-12-12