微信小程序 手机号授权登录

手机号授权登录

效果展示

 这里面用的是 uni-app 官方的登录 他支持多端发布

https://zh.uniapp.dcloud.io/api/plugins/login.html#loginicon-default.png?t=N7T8https://zh.uniapp.dcloud.io/api/plugins/login.html#login

下面是代码 

<template><!-- 授权按钮 --><button v-if="!headerAvatar || !getName" class="game" open-type="getPhoneNumber" @getphonenumber="fnlogin"><image class="weixinIcon" src="../../../static/login/weixin.png" mode=""></image><text class="buttonTitle">微信用户登录</text></button>
</template>

为了方便手机号的全局使用我们可以在pinia中 把手机号进行一个存储

首先现在 store文件夹下创建一个conter.js文件 里面来存储我们手机号登录的一些相关信息

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useWxStore = defineStore('counter',() => {// 微信 手机号存储const wxMobile = ref('')const saveWxMobile = (encryptedData) => {uni.setStorageSync('mobile', encryptedData)wxMobile.value = encryptedData}return { wxMobile, saveWxMobile }}, {persist: {paths: ['count']}}
)

<script setup>
// 微信----授权登录
// 先导入刚刚-store写好的状态管理
import { useWxStore } from '@/stores/conter.js';
const wxMobile = useWxStore();
// 登录接口
import { wxLogin } from '@/apis/login.js';
const Mobile = ref('');
const Code = ref('');
const fnlogin = (e) => {console.log('手机号', e);Mobile.value = e.detail.encryptedData;Code.value = e.detail.code;if (e.detail.errMsg == 'getPhoneNumber:ok') {wxMobile.saveWxMobile(e.detail.encryptedData);uni.showToast({title: '登录成功',icon: 'success',duration: 2000});} else {uni.showToast({title: '取消登录',icon: 'none',duration: 2000});return;}uni.login({success: async (res) => {console.log('success---res', res);if (res.code) {//发起网络请求--调接口const res = await wxLogin({ code: Code.value });console.log('接口--res', res);uni.request({// url: 'wxLogin',data: {code: res.code},method: 'post',success: (res) => {// console.log('-----success----');// console.log(res);},fail: (err) => {// console.log('---error----', err);}});uni.navigateTo({url: '/pages/index/index'});// 获取用户信息uni.getUserInfo({success: (infoRes) => {console.log('用户信息----', infoRes);avatar.value = infoRes.userInfo.avatarUrl;nickname.value = infoRes.userInfo.nickName;},fail: (error) => {console.log('获取用户信息失败', error);}});} else {console.log('登录失败!' + res.errMsg);}}});
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 推箱子

说明&#xff1a;刚入门的时候面试&#xff0c;有个老师傅说&#xff0c;你们喜欢打游戏&#xff0c;让你们写个简单的推箱子&#xff0c;能写出来就过 我说这多简单 结果说要用枚举类&#xff0c;数组来写 写得一踏糊涂&#xff0c;最后没通过 如今工作两年了&#xff0c;…

面试分享——Elasticsearch面试题

目录 1.Elasticsearch数据建模相关问题 1.1问题描述 1.2问题回答 2.Elasticsearch 查询和分析相关问题 2.1问题描述 2.2问题回答 3.Elasticsearch 集成与开发问题 3.1问题描述 3.2问题回答 4.Elasticsearch DSL 相关应用选型等问题 4.1问题描述 4.2问题回答 4.2.1…

Android OpenMAX(四)OMX Core

假设我们已经写好了所有的OMX组件,有vdec、venc、adec、aenc,接下来问题来了,我们应该如何管理这些组件呢(创建、销毁)?这一篇文章我们向上一层学习OMX Core提供的标准API。 OMX Core代码位于 OMX_Core.h OMX Core在OpenMAX IL架构中的位置位于IL Client与实际的OMX组件之…

Spring+Vue的卓越托管中心管理系统的设计与实现+PPT+论文+讲解+售后

相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低运营人员成本&#xff0c;实现了卓越托管中心管理系统的标准化、制度化、程序化的管理&#xff0c;有效地防止了卓越托管中心管理系统的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能…

Junit单元测试框架

Junit单元测试框架 功能 可以用来对方法进行测试&#xff0c;它是第三方公司开源出来的(很多开发工具已经集成了Junit框架&#xff0c;比如IDEA) 优点 可以灵活的编写测试代码&#xff0c;可以针对某个方法执行测试&#xff0c;也支持一键完成对全部方法的自动化测试&#…

DI-engine强化学习入门(十又二分之一)如何使用RNN——数据处理、隐藏状态、Burn-in

一、数据处理 用于训练 RNN 的 mini-batch 数据不同于通常的数据。 这些数据通常应按时间序列排列。 对于 DI-engine, 这个处理是在 collector 阶段完成的。 用户需要在配置文件中指定 learn_unroll_len 以确保序列数据的长度与算法匹配。 对于大多数情况&#xff0c; learn_un…

神经网络极简入门

神经网络是深度学习的基础&#xff0c;正是深度学习的兴起&#xff0c;让停滞不前的人工智能再一次的取得飞速的发展。 其实神经网络的理论由来已久&#xff0c;灵感来自仿生智能计算&#xff0c;只是以前限于硬件的计算能力&#xff0c;没有突出的表现&#xff0c;直至谷歌的A…

mysql workbench如何导出insert语句?

进行导出设置 导出的sql文件 CREATE DATABASE IF NOT EXISTS jeesite /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci */ /*!80016 DEFAULT ENCRYPTIONN */; USE jeesite; -- MySQL dump 10.13 Distrib 8.0.28, for Win64 (x86_64) -- -- Host: 127.0…

如何使用dockerfile文件将项目打包成镜像

要根据Dockerfile文件来打包一个Docker镜像&#xff0c;你需要遵循以下步骤。这里假设你已经安装了Docker环境。 1. 准备Dockerfile 确保你的Dockerfile文件已经准备就绪&#xff0c;并且位于你希望构建上下文的目录中。Dockerfile是一个文本文件&#xff0c;包含了用户可以调…

顺序表的实现(迈入数据结构的大门)(1)

什么是数据结构 数据结构是由&#xff1a;“数据”与“结构”两部分组成 数据与结构 数据&#xff1a;如我们所看见的广告、图片、视频等&#xff0c;常见的数值&#xff0c;教务系统里的&#xff08;姓名、性别、学号、学历等等&#xff09;&#xff1b; 结构&#xff1a;当…

线性表--数据结构设计与操作

单链表 1.单链表的定义&#xff1a; typedef struct LNode{Elemtype data;struct Lnode *next; }LNode ,*LinkList;//单链表的数据结构&#xff08;手写&#xff09; #include<iostream> #include<vector> #include<algorithm>typedef int TypeElem; //单链表…

OpenAI API搭建的智能家居助手;私密大型语言模型(LLM)聊天机器人;视频和音频文件的自动化识别和翻译工具

✨ 1: GPT Home 基于Raspberry Pi和OpenAI API搭建的智能家居助手 GPT Home是一个基于Raspberry Pi和OpenAI API搭建的智能家居助手&#xff0c;功能上类似于Google Nest Hub或Amazon Alexa。通过详细的设置指南和配件列表&#xff0c;用户可以自行组装和配置这个设备&#x…

Ansible自动运维工具之playbook

一.inventory主机清单 1.定义 Inventory支持对主机进行分组&#xff0c;每个组内可以定义多个主机&#xff0c;每个主机都可以定义在任何一个或多个主机组内。 2.变量 &#xff08;1&#xff09;主机变量 [webservers] 192.168.10.14 ansible_port22 ansible_userroot ans…

使用sqlmodel实现唯一性校验

代码&#xff1a; from sqlmodel import Field, Session, SQLModel, create_engine# 声明模型 class User(SQLModel, tableTrue):id: int | None Field(defaultNone, primary_keyTrue)# 不能为空&#xff0c;必须唯一name: str Field(nullableFalse, uniqueTrue)age: int | …

Flutter弹窗链-顺序弹出对话框

效果 前言 弹窗的顺序执行在App中是一个比较常见的应用场景。比如进入App首页&#xff0c;一系列的弹窗就会弹出。如果不做处理就会导致弹窗堆积的全部弹出&#xff0c;严重影响用户体验。 如果多个弹窗中又有判断逻辑&#xff0c;根据点击后需要弹出另一个弹窗&#xff0c;这…

大数据Scala教程从入门到精通第五篇:Scala环境搭建

一&#xff1a;安装步骤 1&#xff1a;scala安装 1&#xff1a;首先确保 JDK1.8 安装成功: 2&#xff1a;下载对应的 Scala 安装文件 scala-2.12.11.zip 3&#xff1a;解压 scala-2.12.11.zip 4&#xff1a;配置 Scala 的环境变量 在Windows上安装Scala_windows安装scala…

(delphi11最新学习资料) Object Pascal 学习笔记---第11章第1节 (Weak 和 Unsafe 类型接口引用)

11.1.4 Weak 和 Unsafe 类型接口引用 ​ 从 Delphi 10.1 Berlin 开始&#xff0c;Object Pascal 语言对接口引用的管理进行了优化。实际上&#xff0c;Object Pascal 语言提供了不同类型的引用&#xff1a; 常规引用在分配和释放时分别递增和递减对象引用计数&#xff0c;最终…

控制元素隐藏

一、隐藏元素 在CSS中&#xff0c;有几种方法可以隐藏元素&#xff0c;每种方法都有其特定的用例和效果。以下是一些常用的CSS属性和技巧&#xff0c;用于隐藏元素&#xff1a; display: none; 这是最常用的隐藏元素的方法。它会将元素完全从文档流中移除&#xff0c;元素不会…

docker搭建代码审计平台sonarqube

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、sonarqube流程四、快速搭建sonarqube五、sonarqube scanner的安装和使用 一、代码审计关注的质量指标 代码坏味道 代码规范技术债评估 bug和漏洞代码重复度单测与集成 测试用例数量覆盖率…

node报错——解决Error: error:0308010C:digital envelope routines::unsupported——亲测可用

今天在打包vue2项目时&#xff0c;遇到一个报错&#xff1a; 最关键的代码如下&#xff1a; Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:80:19)百度后发现是node版本的问题。 在昨天我确实操作了一下node&…