uni-app-微信公众号静默授权

news2024/11/18 22:41:23

文章目录

  • 前言
  • 一、onLoad钩子中调用
  • 二、使用步骤
      • 截取url中的code


前言

提示::公司的公众号用户,与后台系统的账号系统做绑定,用以推送消息

公众号自定义菜单直接链接到以下页面,进行静默授权,然后用户输入系统的分配的账号进行与微信的绑定和解绑。

页面如下:
请添加图片描述


  • onLoad:页面加载,在onLoad中发送请求比较合适的,即页面一加载就发送请求获取数据。
  • onShow:页面显示,会触发多次,只要页面隐藏,然后再显示出来都会触发。这里会重复触发,如果你重复发送请求不合适。
  • onReady:页面初次渲染完成了,但是渲染完成了,请求获取数据,就太慢了。

一、onLoad钩子中调用

最大的好处就是授权时,不会出现的页面空白的情况

onLoad() {}

二、使用步骤

代码有注释,如果不太明白多看几遍,if判断执行的时机,根据数据的缓存而执行。如果有openId,onload内的代码块不会执行,否则以下必然会执行以下一种情况。

// wechatAppId公众号的标识,改成自己的
	import {
		wechatAppId,
	} from '@/common/settings'
		onLoad() {
			//看看本地是否有openId
			const openId = uni.getStorageSync("openId")
			//看看本地是否有code,这个是公众号code
			const code = uni.getStorageSync("code")
			// 截取链接的code,具体方法在下面有
			const urlCode = this.getUrlCode().code
			if (!code && !urlCode && !openId) {
				//不存在存储的code 不存在地址参数code 不存在openid
				//存储当前初始页面历史列表数量
				uni.setStorageSync("historyLength", history.length);
				//local 回调地址,换成自己的
				const local =
'https://127.0.0.1:8080/pages/account/BindAndUnbind/BindAndUnbind'
				//encodeURIComponent对链接转码,这一步必须
				const uri = encodeURIComponent(local)
				//调转页面
				document.location.replace(
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatAppId}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
				)
			} else if (urlCode && !openId) {
				//存在地址参数code 不存在openid
				uni.setStorageSync('code', urlCode);
				const historyLength = uni.getStorageSync("historyLength");
				//跳转回初始页面
				history.go(-(history.length - historyLength));
			} else if (code && !openId) {
				//存在存储的code 不存在openid
		
				//请求后端接口获取用户的信息
				uni.$u.post('/api/login/volkswagen-login', {
					'webChatCode': code
				}).then(res => {
					if (res.code === 0) {
						uni.removeStorageSync('code');
						this.$u.toast("授权成功")
						uni.setStorageSync("openId", res.data.openId)
						uni.setStorageSync("openIdData", res.data)
						this.$u.vuex('openId', res.data.openId)
					} else {
						uni.removeStorageSync('code');
						this.$u.toast("code授权失败")
						uni.setStorageSync("openId", res.data.openId)
						uni.setStorageSync("openIdData", res.data)
						this.$u.vuex('openId', res.data.openId)
					}
				}).catch(err => {
					uni.removeStorageSync('code');
					this.$u.toast("catch授权失败")
				})
			}
		},

截取url中的code

			// 截取url中的code
			getUrlCode() {
				// 截取url中的code方法
				const url = location.search
				const theRequest = new Object()
				if (url.indexOf('?') != -1) {
					let str = url.substr(1)
					let strs = str.split('&')
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
					}
				}
				return theRequest
			},

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

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

相关文章

AIGC数据处理与存储解决方案

2023年数智中国AIGC科技周 AI云智上海专场在普陀区召开。活动以“智能涌现”、“算力突围”、“超越现实”三大篇章开启&#xff0c;第一篇章以“智能涌现”开幕、重塑数实融合终极愿景&#xff1b;第二篇章“算力突围”&#xff0c;以AI为引擎&#xff0c;以计算为基石&#x…

Java——一个简单的使用JPanel和JButton来设计窗口界面

这段代码是一个简单的使用JPanel和JButton来设计窗口界面的例子。 在designFrame方法中&#xff0c;创建了一个JFrame对象作为窗口&#xff0c;然后创建了两个JPanel对象作为面板&#xff0c;分别用于放置按钮。 创建了两个JButton对象作为按钮&#xff0c;并设置按钮的文本内容…

【谷粒商城】环境搭建一:Docker容器部署

Docker容器部署 VMware虚拟机安装 参考&#xff1a;VMware虚拟机安装Linux教程 Docker安装 Linux安装Docker # 1.更新apt包索引 sudo apt-get update# 2.安装以下包以使apt可以通过HTTPS使用存储库&#xff08;repository&#xff09; sudo apt-get install -y apt-transpor…

火狐渗透浏览器免安装版

火狐浏览器免安装版 &#x1f4ce;网安火狐Firefox直接使用无需安装.zip 火狐浏览器设置代理&#xff0c;方便burp抓包 参考&#xff1a;burpsuite简单抓包教程_burpsuite抓包_Xiongcanne的博客-CSDN博客

从程序员进阶到架构师再到CTO,该如何破解焦虑?

引言 我们生活的时代&#xff0c;变化太快&#xff0c;许多人在职业发展的道路上都会面临焦虑与迷茫。这种焦虑源自我们内心的不安&#xff0c;也来自于外部形势的变化。 对于技术从业者来说&#xff0c;焦虑并不会随着职业发展而自动消失&#xff0c;不同职场阶段会面临不同的…

SSL/TLS协议的概念、工作原理、作用以及注意事项

个人主页&#xff1a;insist--个人主页​​​​​​ 本文专栏&#xff1a;网络基础——带你走进网络世界 本专栏会持续更新网络基础知识&#xff0c;希望大家多多支持&#xff0c;让我们一起探索这个神奇而广阔的网络世界。 目录 一、SSL/TLS协议的基本概念 二、SSL/TLS的工作…

VBA_MF系列技术资料1-167

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…

苹果新健康专利:利用 iPhone、Apple Watch 来分析佩戴者的呼吸情况

根据美国商标和专利局&#xff08;USPTO&#xff09;公示的清单&#xff0c;苹果获得了一项健康相关的技术专利&#xff0c;可以利用 iPhone、Apple Watch 来分析佩戴者的呼吸系统。 苹果在专利中概述了一种测量用户呼吸功能的系统&#xff0c;通过 iPhone 上的光学感测单元&am…

前端需要理解的设计模式知识

设计模式的原则&#xff1a;1. 单一职责原则&#xff08;一个对象或方法只做一件事&#xff09; 2. 最少知识原则&#xff08;尽可能少的实体或对象间互相作用&#xff09; 3. 开放封闭原则&#xff08;软件实体具有可扩展且不可修改&#xff09; 设计模式是通过代码设计经验总…

2021年12月 C/C++(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:移动路线 桌子上有一个m行n列的方格矩阵,将每个方格用坐标表示,行坐标从下到上依次递增,列坐标从左至右依次递增,左下角方格的坐标为(1,1),则右上角方格的坐标为(m,n)。 小明是个调皮的孩子,一天他捉来一只蚂蚁,不小心把蚂蚁的右脚弄伤了,于是蚂蚁只能向上或向右…

基于PIC单片机温度-脉搏-DS18B20温度-液晶12864显示(proteus仿真+源程序)

一、系统方案 1、上电初始化液晶第一行显示脉搏&#xff0c;第二行显示温度&#xff0c;第三行显示模式&#xff0c;第四行显示强度&#xff1b;按下K1按键可以选择模式&#xff0c;催眼模式或治疗模式。 2、治疗模块下&#xff0c;可以通过K2、K3修改强度。 二、硬件设计 原理…

探索数据湖中的巨兽:Apache Hive分布式SQL计算平台浅度剖析!

文章目录 ◆ Apache Hive 概述1.1 分布式SQL计算1.2 Hive的优势 ◆ 模拟实现Hive功能2.1 元数据管理2.2 解析器2.3 基础架构2.4 Hive架构 ◆ Hive基础架构3.1 Hive架构图3.2 Hive组件3.2.1 元数据存储3.2.2 Driver驱动程序3.2.3 用户接口 ◆ Hive部署4.1 VMware虚拟机部署步骤一…

SSL/CA 证书及其相关证书文件(pem、crt、cer、key、csr)

数字证书是网络世界中的身份证&#xff0c;数字证书为实现双方安全通信提供了电子认证。数字证书中含有密钥对所有者的识别信息&#xff0c;通过验证识别信息的真伪实现对证书持有者身份的认证。数字证书可以在网络世界中为互不见面的用户建立安全可靠的信任关系&#xff0c;这…

互联网医院成品功能你有哪些看法?

随着信息化的飞速发展&#xff0c;医疗领域信息化程度日益加深&#xff0c;医院对于信息化的自身需求越来越高&#xff0c;由此也推动了医院信息化的快速发展。而即时医疗信息服务能够解决普通老百姓医疗信息匮乏、花大钱看小病、就医不及时等基本问题。通过智能手机、平板电脑…

国内Android应用市场上线流程

国内各个Android应用市场的上线流程可能会有所不同&#xff0c;特别是在审核方面。此外&#xff0c;某些应用市场可能有一些特殊的政策和要求&#xff0c;您需要仔细阅读并遵循这些要求&#xff0c;以确保您的应用能够顺利上线并保持在市场上。在整个过程中&#xff0c;与市场的…

重磅丨《欧盟电池和废电池法规》最新发布!

《欧盟新电池法》 8月17日&#xff0c;欧盟官方公示满20天的《欧盟电池和废电池法规》&#xff08;文中简称《新电池法》&#xff09;将正式生效。 根据《新电池法》&#xff0c;自2027年起&#xff0c;动力电池出口到欧洲必须持有符合要求的“电池护照”&#xff0c;记录电池…

Spring与Mybatis集成且Aop整合(放飞双手,迅速完成CRUD及分页)

目录 一、概述 二、集成 ( 1 ) 为什么 ( 2 ) 优点 ( 3 ) 实例 三、整合 3.1 讲述 3.2 整合进行分页 带我们带来的收获 一、概述 集成是指将不同的组件、系统或框架整合在一起&#xff0c;使它们能够协同工作&#xff0c;共同完成某个功能或提供某种服务。在软件开发中&…

M1/M2打开Parallels Desktop提示“由于临界误差,不能启动虚拟机”解决办法

M1/M2安装Parallels Desktop 18.3.2PD虚拟机后&#xff0c;安装win11或者打开原有win系统提示由于临界误差&#xff0c;不能启动虚拟机。 解决方法&#xff1a; 很简单&#xff01; 关闭系统SIP&#xff0c;重新安装PD18虚拟机激活即可。

4G模组EC20 网卡udhcpc获取IP但是没有设置IP

使能网卡&#xff1a; ifconfig usb0 up dhcp获取ip&#xff0c;虽然没有报error&#xff0c;但是很显然没有设置进配置 获取ip命令&#xff1a;udhcpc -i usb0 非正常现象&#xff1a; 正常现象&#xff1a; 解决方法&#xff1a; &#xff08;1&#xff09;rootfs 创建文件夹…

资深网络工程师的网络排障全过程,太强了!【附工具下载】

下午好&#xff0c;我的网工朋友 我们知道&#xff0c;交换机是局域网中一种很重要的网络设备&#xff0c;它的工作状态与客户端系统的上网状态息息相关。 可是&#xff0c;在实际工作过程中&#xff0c;交换机的状态很容易受到外界的干扰&#xff0c;那样一来局域网中就会出…