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…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
Netty自定义协议解析
目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...
实现p2p的webrtc-srs版本
1. 基本知识 1.1 webrtc 一、WebRTC的本质:实时通信的“网络协议栈”类比 将WebRTC类比为Linux网络协议栈极具洞察力,二者在架构设计和功能定位上高度相似: 分层协议栈架构 Linux网络协议栈:从底层物理层到应用层(如…...
win11部署suna
参考链接 项目链接 沙盒链接 数据库链接 本文介绍 本文只为项目的辅助,手把手太麻烦 执行步骤 1.下载代码 git clone https://github.com/kortix-ai/suna.git cd suna2.配置环境(在Anaconda Prompt上执行) python setup.py3.运行代码 …...
如何使用 Redis 快速实现布隆过滤器?
以下是使用 Redis 实现布隆过滤器的两种方案,结合原理说明和操作步骤: 方案一:手动实现(基于 Redis Bitmap) 原理 利用 Redis 的 SETBIT 和 GETBIT 操作位数组,结合多个哈希函数计算位置。 步骤 确定参数…...
