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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/151008.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年【安全员-C证】考试题库及安全员-C证考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-C证考试题库根据新安全员-C证考试大纲要求&#xff0c;安全生产模拟考试一点通将安全员-C证模拟考试试题进行汇编&#xff0c;组成一套安全员-C证全真模拟考试试题&#xff0c;学员可通过安全员-C证考试总结全…

Pytorch数据集读出到transform全过程

最近写代码又遇见了这个问题&#xff0c;又忘记了&#xff0c;于是写一篇博客记录一下。 一般我们使用pytorch获取CIFAR10数据集&#xff0c;一般这样写&#xff1a; mean [0.4914, 0.4822, 0.4465] std [0.2023, 0.1994, 0.2010] transform transforms.Compose([transform…

传统游戏难产 育碧瞄向Web3

出品过《刺客信条》的游戏大厂育碧&#xff08;Ubisoft&#xff09;又在Web3游戏领域有了新动作。 首次试水NFT无功而返后&#xff0c;育碧&#xff08;Ubisoft&#xff09;战略创新实验室与Web3游戏网络Immutable达成合作&#xff0c;将利用Immutable 开发游戏的经验和及生态…

春秋云境靶场CVE-2022-25578漏洞复现(利用htaccess文件进行任意文件上传)

文章目录 前言一、CVE-2022-25578靶场概述二、CVE-2022-25578复现需要知道的知识点1、什么是htaccess文件2、上传htaccess文件的条件是什么&#xff1f;3、htaccess文件的作用是什么&#xff1f; 三、CVE-2022-32991漏洞复现1、信息收集2、找上传点3、上传后蚁剑连接getshell 总…

基于模拟退火算法的TSP问题建模求解(Python)

基于模拟退火算法的TSP问题建模求解&#xff08;Python&#xff09; 一、模拟退火算法&#xff08;Simulated Annealing Algorithm&#xff0c;SAA&#xff09;工程背景模拟退火算法用于优化问题求解原理 二、旅行商问题&#xff08;Travelling salesman problem&#xff0c;TS…

计算机毕业设计选题推荐-二手交易跳蚤市场微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

EMNLP 2023 | DeepMind提出大模型In-Context Learning的可解释理论框架

论文题目&#xff1a;In-Context Learning Creates Task Vectors 论文链接&#xff1a;https://arxiv.org/abs/2310.15916 01. 引言 此外&#xff0c;作者也提到本文的方法与软提示&#xff08;soft-prompt&#xff09;[1]方法类似&#xff0c;soft-prompt也是通过调整大模型内…

Nginx配置开启HTTPS

获取证书文件 Nginx 开启SSL server {listen 443 default ssl;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;proxy_set_header Host $host;ssl_certificate /usr/local/nginx/cert/server.pem;ssl_certificate_key /usr/local/ngin…

java时间类

一、java时间类为什么这么复杂? java的时间类非常复杂&#xff0c;这是由于jdk1.0到jdk1.1的时间类设计存在缺陷&#xff0c;导致使用不方便&#xff0c;线程不安全等问题&#xff0c;所以在jdk1.8&#xff0c;java又重新加入了一些时间类替换之前的时间类&#xff0c;但是jd…

ExoPlayer架构详解与源码分析(8)——Loader

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

DNS服务器典型配置

文章目录 安装主程序bind和安全插件bind-root修改主配置文件/etc/named.conf正向解析 安装主程序bind和安全插件bind-root yum install bind-chroot修改主配置文件/etc/named.conf vim /etc/named.conf将listen-on和allow-query的ip或域名换成any 表示为服务器所有的IP地址启…

多svn仓库一键更新脚本分享

之前分享过多git仓库一键更新脚本&#xff0c;本期就分享下svn仓库的一键更新脚本 1、首先需要设置svn为可执行命令行 打开SVN安装程序&#xff0c;选择modify&#xff0c;然后点击 command client tools&#xff0c;安装命令行工具 2、update脚本 echo 开始更新SVN目录&…

【Android 标题文字居中 快速实现】

背景&#xff1a; Android App系统默认setTitle左起展示(图左)&#xff0c;IOS App默认居中展示(图右)。现在美工设计 在Android中标题同样居中显示。 解决&#xff1a; 方案一&#xff1a;(传统方式,比较繁琐) 设置ToolBar样式&#xff0c;内嵌TextView来展示&#xff0c;具…

网络安全准入技术之MAC VLAN

网络准入控制作为主要保障企业网络基础设施的安全的措施&#xff0c;特别是对于中大型企业来说&#xff0c;终端类型多样数量激增、终端管理任务重难度大、成本高。 在这样的一个大背景下&#xff0c;拥有更灵活的动态识别、认证、访问控制等成为了企业网络安全的最核心诉求之…

保姆级教程——pytest【入门篇】

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

【libGDX】初识libGDX

1 前言 libGDX 是一个开源且跨平台的 Java 游戏开发框架&#xff0c;于 2010 年 3 月 11 日推出 0.1 版本&#xff0c;它通过 OpenGL ES 2.0/3.0 渲染图像&#xff0c;支持 Windows、Linux、macOS、Android、iOS、Web 等平台&#xff0c;提供了统一的 API&#xff0c;用户只需要…

数据结构—LinkedList与链表

目录 一、链表 1. 链表的概念及结构 1. 单向或者双向 2. 带头或者不带头 3. 循环或者非循环 二.LinkedList的使用 1.LinkedList概念及结构 2. LinkedList的构造 3. LinkedList的方法 三. ArrayList和LinkedList的区别 一、链表 1. 链表的概念及结构 链表是一种 物理…

开启创造力之门:掌握Vue中Slot插槽的使用技巧与灵感

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、s…

【Ubuntu】设置永不息屏与安装 dconf-editor

方式一、GUI界面进行设置 No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 20.04.6 LTS Release: 20.04 Codename: focal打开 Ubuntu 桌面环境的设置菜单。你可以通过点击屏幕右上角的系统菜单&#xff0c;然后选择设置。在设置菜单中&#xff0c;…

弱类型和强类型自定义UDAF函数

目录 使用自带的avg函数弱类型自定义UDAF函数(AVG)强类型自定义UDAF函数(AVG) 弱类型&#xff1a;3.x过期 2.x有 强类型&#xff1a;3.x 2.x没有 使用自带的avg函数 import org.apache.spark.rdd.RDD import org.apache.spark.sql.{DataFrame, SparkSession}object UserDefine…