uniapp 实现微信小程序手机号一键登录-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 实现微信小程序手机号一键登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

app 和 h5 手机号一键登录，参考文档：uni-app官网

以下是uniapp 实现微信小程序手机号一键登录

1、布局

<template>
    <view class="mainContent">
        <image class="closeImg" @click="onCloseClick"
               src="quicklogin_close.png"></image>
        <view class="centerLayout">
            <image class="logoImg" src="quicklogin_logo.png"
                   mode="scaleToFill"/>
            <view class="phoneTxt">188****8888</view>
            <view class="serviceTxt">天翼账号提供认证服务</view>
            <button class="btnLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                本机号码一键登录
            </button>
            <view class="other" @click="onOtherLoginClick">其他登录方式</view>
        </view>
        <view class="agreementLayout">
            <u-checkbox-group v-model="checked" placement="column" @change="onCheckboxChange">
                <u-checkbox size="30rpx" activeColor="#ff1b1b" :name="true">
                </u-checkbox>
            </u-checkbox-group>
            <view class="agreementTxt">
                我已阅读并同意外卖狮
                <text style="color: #F72124;font-weight: bold"
                      @click="NavTo('/packageB/pages/Agreement/userAgreement')">用户协议
                </text>
                和
                <text style="color: #F72124;font-weight: bold"
                      @click="NavTo('/packageB/pages/Agreement/concealAgreement')">隐私政策
                </text>
                并使用本机号码登录
            </view>
        </view>
    </view>
</template>

<script setup>
import {Back, NavTo, SwcTo} from "@/utlis/uni_api";
import {getCurrentInstance, ref} from "vue";
import {wxGetPhoneNumber, wxPhoneNumberLogin} from "@/utlis/innerface/userLogin";

const checked = ref("")
let code = ""
let {proxy} = getCurrentInstance();

//微信获取手机号信息
const getPhoneNumber = (datas) => {
    console.log(datas)//微信小程序返回的相关数据
    uniLogin(datas)
}

const uniLogin = (datas) => {
    uni.login({
        provider: 'weixin',
        success: res => {
            console.log(res)
            code = res.code

            let params = {
                code: code,
                iv: datas.detail.iv,
                encryptedData: datas.detail.encryptedData
            }

            //请求后台,获取手机号和code
            wxGetPhoneNumber(params, proxy).then(res => {
                userLogin(res.code,res.phoneNumber)
            }).catch((err) => {
                console.log("wxGetPhoneNumber err = ", err)
            })
        }
    });
}

//关闭
const onCloseClick = () => {
    Back()
}

//一键号码登录
const userLogin = (sCode,phoneNumber) => {
    let params = {
        code: sCode,
        phoneNumber: phoneNumber
    }

    //后台登录
    wxPhoneNumberLogin(params, proxy).then(res => {
        uni.setStorageSync('token', res.data.accessToken)
        uni.setStorageSync('activityShowType', true)
        setTimeout(() => {
            SwcTo('/pages/Home/home')
        }, 200)
    }).catch((err) => {
        console.log("wxPhoneNumberLogin err = ", err)
    })
}

//其他号码登录
const onOtherLoginClick = () => {
    NavTo('/packageB/pages/Login/Login')
}

//复选框选中监听
const onCheckboxChange = (e) => {
    console.log(e)
}
</script>

<style lang="scss">
page {
    background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.mainContent {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.closeImg {
    width: 50rpx;
    height: 50rpx;
    margin: 80rpx 0 0 40rpx;
}

.centerLayout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 200rpx;
}

.logoImg {
    width: 130rpx;
    height: 130rpx;
    border-radius: 30rpx;
}

.phoneTxt {
    font-weight: bold;
    font-size: 34rpx;
    letter-spacing: 1rpx;
    color: #464646;
    margin-top: 14rpx;
}

.serviceTxt {
    font-size: 24rpx;
    letter-spacing: 1rpx;
    color: #D5D5D5;
    margin-top: 5rpx;
}

.btnLogin {
    width: 75%;
    background-color: #FF1A1D;
    color: #FFFCF7;
    font-size: 28rpx;
    text-align: center;
    border-radius: 40rpx;
    padding: 5rpx 0;
    letter-spacing: 1rpx;
    margin-top: 60rpx;
}

.other {
    font-size: 28rpx;
    font-weight: bold;
    color: #787878;
    letter-spacing: 1rpx;
    margin-top: 50rpx;
}

.agreementLayout {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    color: #767676;
    font-size: 26rpx;
    display: flex;
    letter-spacing: 1rpx;
}

.agreementTxt {
    padding-top: 7rpx;
}
</style>

小程序一键登陆,uniapp,微信小程序,uni-app,微信小程序,notepad++ 文章来源地址https://www.toymoban.com/news/detail-776492.html