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.codelet params = {code: code,iv: datas.detail.iv,encryptedData: datas.detail.encryptedData}//请求后台,获取手机号和codewxGetPhoneNumber(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 实现微信小程序手机号一键登录
app 和 h5 手机号一键登录,参考文档:uni-app官网 以下是uniapp 实现微信小程序手机号一键登录 1、布局 <template><view class"mainContent"><image class"closeImg" click"onCloseClick"src"quic…...
基于 Java 解释一下硬编码和非硬编码?
基于 Java 解释一下硬编码和非硬编码? 文章目录 基于 Java 解释一下硬编码和非硬编码?一、基本说明二、硬编码(Hardcoding)三、非硬编码 一、基本说明 硬编码和非硬编码是指软件开发中配置数据和变量处理方式的概念。 二、硬编码…...
【机器学习7】优化算法
1 有监督学习的损失函数 1.1 分类问题 对二分类问题, Y{1,−1}, 我们希望sign f(xi,θ)yi, 最自然的损失函数是0-1损失, 函数定义特点0-1损失函数非凸、非光滑,很难直接对该函数进行优化Hinge损失函数当fy≥1时&…...
常见的近似算法
前言 最近有个项目要用到近似算法,就到处摸了下,整理了一个小结。 近似算法统计 在Java中,你可以使用各种近似算法来解决不精确但接近于最优解的问题。以下是几种常见的近似算法的实现方法: 贪心算法(Greedy Algori…...
【完整详细】IntelliJ IDEA中使用Docker插件一键部署前后端分离项目
前言:在使用Docker部署我们的前后端分离项目的时候,会涉及到一堆且重复的Docker命令,久而久之就会被这些重复性的操作感到繁琐,本篇博客教学大家如何通过IDEA自带的一款插件就可以实现一键部署前后端分离项目的操作,从头到尾我写的非常详细,大家逐步阅读即可。 博主的其他…...
ubuntu20.04 安装TensorRT,解决依赖问题
1.下载Tensor RT对应的deb包 先要确保cuda和cudnn安装好,https://blog.csdn.net/qq_41246375/article/details/115597025 下载tensor RT,注意版本对应关系 https://developer.nvidia.com/nvidia-tensorrt-8x-download 2.安装 按照官方步骤 https://d…...
你知道如何科学的学习吗?-关于个人成长的思考
背景 最近在翻看自己工作后的笔记,从有道云笔记到印象笔记,到本地笔记,到自己使用github搭建的博客,到语雀笔记,使用了不同的平台工具;零零总总记录了许多学习笔记、个人成长笔记、职业规划等内容。现在看…...
Java学习之路 —— 多线程
文章目录 1. 线程创建方式1.1 继承Thread1.2 声明一个实现Runnable接口的类1.3 利用Callable接口、FutureTask类来实现 2. 线程同步2.1 同步代码块2.2 同步方法2.3 Lock锁 3. 线程同步4. 线程池 1. 线程创建方式 1.1 继承Thread 定义子类,继承Thread,创…...
【云原生-Kurbernetes篇】K8s的存储卷/数据卷+PV与PVC
这是一个目录标题 一、Kurbernetes中的存储卷1.1 为什么需要存储卷?1.2 存储卷概述1.2.1 简介1.2.2 volume字段 1.3 常用的存储卷类型1.3.1 emptyDir(临时存储卷)1.3.2 hostPath(节点存储卷)1.3.3 nfs1.3.4 cephfs 二、…...
二层、三层交换机之间到底有什么区别?
简单地说 二层交换机,没有充当三层网关角色的能力(Capability)。三层交换机,首先也是二层交换机。但是,它有一个额外的能力(Capability),软件配置一下,可以充当三层网关…...
【论文阅读】2736. 最大和查询-2023.11.17
题目: 2736. 最大和查询 给你两个长度为 n 、下标从 0 开始的整数数组 nums1 和 nums2 ,另给你一个下标从 1 开始的二维数组 queries ,其中 queries[i] [xi, yi] 。 对于第 i 个查询,在所有满足 nums1[j] > xi 且 nums2[j]…...
2. zk集群部署
简介 上一篇文章我们已经把环境准备好了,jdk也配置好了,下面我们开始把zk部署起来 hadoop环境准备 创建zk用户 useradd zk -d /home/zk echo "1q1w1e1r" | passwd --stdin zk上传zk包 拷贝zk包到/home/zk目录,这里的zk版本为 3.6.3 scp…...
抖音快手判断性别、年龄自动关注脚本,按键精灵开源代码!
这个是支持抖音和快手两个平台的,可以进入对方主页然后判断对方年龄和性别,符合条件的关注,不符合条件的跳过下一个ID,所以比较精准,当然你可以二次开发加入更多的平台,小红书之类的,仅供学习&a…...
IDEA软件使用步骤
1.IDEA概述 IDEA全称InelliJ IDEA,是用于java语言开发的集成环境,它是业界公认的目前用于Java程序开发最好的工具。 集成环境:把代码编写,编译,执行,调试扽过多种功能综合到一起的开发工具。 下载:https…...
设计模式-11-模板模式
经典的设计模式有23种,但是常用的设计模式一般情况下不会到一半,我们就针对一些常用的设计模式进行一些详细的讲解和分析,方便大家更加容易理解和使用设计模式。 1-什么是模板模式 模板模式,全称是模板方法设计模式,英…...
【技术分享】EIGRP stub实验
【赠送】IT技术视频教程,白拿不谢!思科、华为、红帽、数据库、云计算等等https://xmws-it.blog.csdn.net/article/details/117297837?spm1001.2014.3001.5502【微/信/公/众/号:厦门微思网络】 拓扑图: R1配置: route…...
Python 爬虫 AES DES加密反爬
当你遇到需要处理 AES 或 DES 加密的反爬虫机制时,Python 可以通过使用相应的库来解决这类问题。首先,我们需要理解 AES 和 DES 加密是什么: AES (Advanced Encryption Standard):一种广泛使用的对称加密算法,它使用相…...
(论文阅读30/100)Convolutional Pose Machines
30.文献阅读笔记CPMs 简介 题目 Convolutional Pose Machines 作者 Shih-En Wei, Varun Ramakrishna, Takeo Kanade, and Yaser Sheikh, CVPR, 2016. 原文链接 https://arxiv.org/pdf/1602.00134.pdf 关键词 Convolutional Pose Machines(CPMs)…...
vue3实现数据大屏内数据向上滚动,鼠标进入停止滚动 vue3+Vue3SeamlessScroll
1.效果图 2.npm下载依赖及main.js文件配置 npm install vue3-seamless-scroll --saveimport vue3SeamlessScroll from vue3-seamless-scroll;app.use(vue3SeamlessScroll) 3.html代码 <!-- scrollFlag为true时再渲染,vue3只要涉及到传值子页面需要加flag判断,否…...
WPF显示3D图形
C# 中的 WPF (Windows Presentation Foundation) 支持显示3D图形。WPF 使用 DirectX 作为底层图形引擎,这意味着它可以处理包括3D图形在内的复杂渲染任务。 在 WPF 中,你可以使用一些内置的类和控件来创建和显示3D对象。这包括 Viewport3D, Camera, Mod…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
