unicloud生成微信小程序分享码

news2024/11/28 4:43:36

一,方案

看了官方的文档,获取小程序码有三种,我采用的是第二种:生成数量不受限制的分享码。
对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html
其中又分为https调用和云开发调用。
因为我用的是unicloud云开发,如果采用微信的云开发,还需要引入wx-server-sdk,然后要配置一堆东西,文档又不全,尝试了两次未果,就放弃了这种方案。
最后是采用的https调用的方式。

二,实现思路

【第一步】需要获取ACCESS_TOKEN值。
这种微信的接口,必须服务端调用,不能前端直接https进行调用。虽然在开发阶段能够调用成功,那是因为微信开发者工具-项目信息-本地设置中勾选了不校验合法域名导致的成功。当你发布体验版和正式版时是调用不通的。
所以,获取ACCESS_TOKEN必须在服务端直接调用微信接口获取。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
实现的云对象代码:

// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc语法提示教程:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function () { // 通用预处理器

	},
	
	async addCodeInfo(infoObj){
		//获取access_token
		const APPID='xxx'
		const APPSECRET='xxx'
		const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
		const requestOptions = {
			method: 'GET',
			dataType: 'json'
		}
		const res1 = await uniCloud.httpclient.request(URL,requestOptions)
		const access_token=res1.data.access_token
		return access_token
	}
}

【第二步】需要利用ACCESS_TOKEN再调用微信的生成分享码的接口
这个接口依旧是微信的接口,所以依旧是需要在服务端发起。
于是,在上一步获取到access_token的基础上,继续调用获取分享码的接口:

// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc语法提示教程:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function () { // 通用预处理器

	},
	//数据库中增加wifi信息,增加完毕后返回分享二维码
	async addCodeInfo(infoObj){
		//获取access_token
		const APPID='wxe0bc57edf31dad80'
		const APPSECRET='7e5f676a5fad20d044434792360c28d4'
		const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
		const requestOptions = {
			method: 'GET',
			dataType: 'json'
		}
		const res1 = await uniCloud.httpclient.request(URL,requestOptions)
		const access_token=res1.data.access_token

		//由此id生成分享码
		const codeUrl=`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`
		const codeOptions={
			method:'POST',
			data: JSON.stringify({
				"scene":'id',
				"page":'pages/index/index',
				"check_path":false,
				"width":500,
				"env_version":'trial'//trial:体验版
			}),
		}
		const res3 = await uniCloud.httpclient.request(codeUrl,codeOptions)
		return res3
	}
}

【第三步】获取到的分享码结果类型是buffer的二进制格式,需要转图片
如下图:
在这里插入图片描述
也就是,res.data是个buffer类型的数据,它有两个字段:data字段存储内容,type字段显示类型。
于是需要在服务端转成base64后再传给前端:

const buffer=res3.data
const result=buffer.toString('base64')

三,完整的代码实现

前端

<img :src="shareCode" alt="" >

<script>
	export default {
		data() {
			return {
				shareCode:'',
			}
		},
		onLoad(options) {
			this.getWeixinCode()
		},
		methods: {
			//调用后端接口,生成小程序分享码
			async getWeixinCode() { // 注意异步
				const _this=this
				const wifiCode = uniCloud.importObject('wifiCode') // 导入云对象
				try {
					const params={}
					const res=await wifiCode.addCodeInfo(params)
					console.log("++++",res)
					this.shareCode="data:image/png;base64," + res
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

后端:
主要就是wifiCode这个云对象:

// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc语法提示教程:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function () { // 通用预处理器

	},
	//数据库中增加wifi信息,增加完毕后返回分享二维码
	async addCodeInfo(infoObj){
		//获取access_token
		const APPID='xxx'
		const APPSECRET='xxx'
		const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
		const requestOptions = {
			method: 'GET',
			dataType: 'json'
		}
		const res1 = await uniCloud.httpclient.request(URL,requestOptions)
		const access_token=res1.data.access_token
		
		//由此id生成分享码
		const codeUrl=`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`
		const codeOptions={
			method:'POST',
			data: JSON.stringify({
				"scene":"23",
				"page":'pages/index/index',
				"check_path":false,
				"width":500,
				"env_version":'trial'//trial:体验版
			}),
		}
		const res3 = await uniCloud.httpclient.request(codeUrl,codeOptions)
		const buffer=res3.data
		console.log("---响应--",buffer)
		// const buf = new Buffer (buffer)
		console.log("buffer转化",buffer.toString('base64'))
		const result=buffer.toString('base64')
		return result
	}
}

四,坑点

1,微信的接口需要服务端调用
2,获取分享码的接口的post接口参数需要JSON.stringify处理一次
3,scenez只支持32位,一些特殊字符还不支持。
4,获取分享码的接口的access_token参数,必须放在url上,也就是和我代码中一样的写法。
5,本地开发完成后,云对象啥的需要上传部署后,体验版和真机调试才能用。并且,需要配置小程序的接口白名单。https://tcb-api.tencentcloudapi.com和
https://tcb-wbk382fznzzwna3-8chuc14d8e99.service.tcloudbase.com
6,获取分享码的接口,返回的是buffer二进制流,所以获取二维码的接口,我没有配置datatype这个参数,而是让它采用默认的值。获取到结果后还需要转化成base64才可以渲染在页面上。
在这里插入图片描述
总而言之,比较坑,但是我没哭。
呐,就这样吧~
希望对后续看到的小伙伴有所帮助~

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

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

相关文章

MySQL 锁

在之前的文章有多次提到&#xff0c;MySQL在数据更新和性能优化上会用到锁机制。我们在实际的应用中也经常会遇到锁相关的问题&#xff0c;即使很多时候我们并没有人为的为数据库添加锁&#xff0c;但还是会出现死锁的问题&#xff0c;这是因为在我们操作数据时MySQL隐式的帮我…

java UDP通信程序DatagramSocket数据发送

首先 我们先来了解一下 UDP 首先 他是一种不可靠的网络协议 他在通信的两端 各建立一个 Socke对象 但是他们只是 发送和接收数据的对象 发送端只管发送 不会顾及接收端是否接到 接收到只负责接收数据 而不会给出发送端反馈 因此对于UDP通信的双方而言 是有没什么 客户端和服务…

架构师进阶,微服务设计与治理的 16 条常用原则

今天将从存储的上一层「服务维度」学习架构师的第二项常用能力 —— 微服务设计与治理。 如何设计合理的微服务架构&#xff1f; 如何保持微服务健康运行&#xff1f; 这是我们对微服务进行架构设计过程中非常关注的两个问题。 本文对微服务的生命周期定义了七个阶段&#xf…

正大国际期货:为什么外盘期货顺势交易这么难

要回答“为什么趋势交易这么难&#xff1f;”需要先回答&#xff1a;“为什么交易&#xff1f;”。 你应该为了抓住赚取期望利润的机会而交易&#xff0c;为了长期持续赚钱的目的而交易&#xff0c;而不是为了赚得短期利润的喜悦而交易&#xff0c;也不是为了证明你的市场分析…

音频转文字怎么转?这些方法值得一试

在日常生活中我们经常会遇到要把音频转换成文字的情况&#xff0c;很多小伙伴还在使用传统的方法&#xff0c;一边播放一边记录。虽然这样能解决问题&#xff0c;但是需要花费很多时间&#xff0c;效率特别低。我们不妨尝试使用一些转换软件&#xff0c;这样就能节省很多时间了…

界面组件Kendo UI for Angular——让应用数据显示更直观!(二)

Kendo UI致力于新的开发&#xff0c;来满足不断变化的需求&#xff0c;通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件&#xff0c;telerik致力于提供纯粹的高性能Angular UI组件&#xff0c…

Word处理控件Aspose.Words功能演示:在 Java 中将 Word DOCX 转换为 Markdown

如今&#xff0c;Markdown ( MD ) 格式被广泛用于编写在线文章、博客和文档。但是&#xff0c;在大型文档的情况下&#xff0c;它的语法变得难以记忆和书写。为方便起见&#xff0c;您可以在 MS Word 中编写内容&#xff0c;然后将DOCX文件转换为 Markdown。为了以编程方式执行…

nacos--基础--5.2.2--集成--SpringCloud--服务注册,发现,负载均衡

nacos–基础–5.2.2–集成–SpringCloud–服务注册&#xff0c;发现&#xff0c;负载均衡 代码位置 https://gitee.com/DanShenGuiZu/learnDemo/tree/master/nacos-learn1、介绍 服务发现客户端 从服务发现中心获取服务列表服务消费 通过负载均衡获取服务地址 2、添加依赖 …

jdk安装配置教程2022年12月最新版

这两天配了好几遍jdk&#xff0c;删了又下下了又删&#xff0c;总结一下&#xff0c;也算有点收获 1. 下载&#xff1a;官网Java Downloads | Oracle jdk1.8在下面&#xff0c;上面是最新的jdk17和jdk19 2.下载完成后&#xff0c;一路安装解压&#xff08;我撞在了C盘&#…

IfcOpenShell简明教程【BIM】

IFC 是用于存储 BIM 数据的 ISO 标准格式。 IfcOpenShell 是一个包含 Python 库的项目&#xff0c;可以用来解析 IFC 文件。 1、下载安装IfcOpenShell 首先&#xff0c;我们需要下载并安装 IfcOpenShell python。 目前没有 IfcOpenShell 的 API 文档&#xff0c;但考虑到它主…

Vector源码解析

Vector源码解析 简介 Vector 是一个古老的 线程安全(内部的核心方法都加了synchronized) 的容器&#xff0c;在 JDK1.0 时就已经存在&#xff0c;到如今已经很少使用。 基本结构与 ArrayList 类似&#xff0c;可以认为是线程安全版本的 ArrayList&#xff0c;但因为 Vector …

BCN-PEG-FITC 环丙烷环辛炔聚乙二醇荧光素 BCN-PEG-荧光素

双环[6,1,0]壬炔 (BCN) &#xff08;环丙烷环辛炔&#xff09;可以通过无铜的点击化学与叠氮化物标记的分子或生物分子反应生成稳定的三氮唑连接。 产品名称 BCN-PEG-FITC 环丙烷环辛炔聚乙二醇荧光素 中文名称 环丙烷环辛炔聚乙二醇荧光素 英文名称 BCN-PEG-FITC 分子…

基于Android的二维码识别系统的研究 与实现

XXXX 本科生毕业设计(论文) 学院(系)&#xff1a; XX 专 业&#xff1a; XX 学 生&#xff1a; XX 指导教师&#xff1a; XX XX 完成日期 年 月 XXX本科生毕业设计&#xff08;论文&#xff09; 基于Android的二维码识别系统的研究 与实现 Research and Implementati…

防重放、防篡改攻击的实现(Java版)

文章目录一、问题描述1、什么是重放攻击、篡改攻击&#xff1f;2、如何模拟重放攻击、篡改攻击&#xff1f;2.1、重放攻击模拟方式2.2、篡改攻击模拟方式二、解决方案三、在项目中使用1、项目简介2、项目实践一、问题描述 1、什么是重放攻击、篡改攻击&#xff1f; 1、重放攻击…

【SSM框架】为集合类型属性赋值

&#x1f353;个人主页&#xff1a;个人主页 &#x1f352;系列专栏&#xff1a;SSM框架 目录 1.为集合类型属性赋值 ①为List集合类型属性赋值 ②为Map集合类型属性赋值 2.p命名空间 3.引入外部属性文件 1.为集合类型属性赋值 ①为List集合类型属性赋值 在Clazz类中添加…

中国三大主流开源Linux操作系统社区及其产品生态

作者&#xff1a;IT圈黎俊杰 操作系统是基础软件的核心&#xff0c;是科技研发必备的底层支撑产品&#xff0c;它的核心技术至今仍然由美国为代表的西方国家所掌控着。由于以前国产操作系统产业长期处于“多、小、散”的状态&#xff0c;未能建立起完善的生态、未能研发出真正好…

python笔记(一)

文章目录字节对象与字符转换动态爬虫实施辅助工具python 部分内置方法示例&#xff1a;python虚拟环境的创建与激活执行多个.py程序获取当前系统默认浏览器名称反编译小程序PC端小程序&#xff08;wxapkg&#xff09;解密&#xff1a;反编译字节对象与字符转换 data1 babc # …

计算机系统实验-BombLab

一.实验题目及目的 1.实验题目 程序运行在linux环境中。程序运行中有6个关卡&#xff08;6个phase&#xff09;&#xff0c;每个phase需要用户在终端上输入特定的字符或者数字才能通关&#xff0c;否则将会引爆炸弹。需要通过分析汇编代码&#xff0c;使用gdb调试等方式找到正…

oracle入门-19c 安装详细教程

我们知道学习一门技术&#xff0c;第一件事情就是搭建对应的环境。本教程将详细教大家如何安装oracle。 目录一、虚拟机创建二、挂载镜像、安装及系统配置三、 软件包传输四、数据库安装五、 图形化向导建库一、虚拟机创建 处理器数量根据自己的机器配置进行调整&#xff08;4 …

Android IPC机制

本文首发于个人博客 “胖蔡叨叨叨”&#xff0c;更多相关信息可点击查看《Android IPC机制》​​​​​​​ IPC IPC(Inter Process Communication) 进程间通信&#xff0c;是指系统中运行的不同进程间的信息交互过程。Android IPC通常用于应用间、或同应用不同进程间的数据通…