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…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
