uniapp小程序生成小程序码

article/2025/3/18 19:52:16

文章目录

  • 前言
  • 一、自测版本
  • 二、线上版本
  • 三、测试
  • 总结


前言

需求:用户通过扫描小程序码,直接跳转到小程序的登陆页,并自动填充推荐码


一、自测版本

用于前端自己测试如何生成小程序码

<!-- 以图片的形式展示 -->
<image :src="maskData"></image>
onLoad(options) {console.log('需要推荐码',options)//打印出来是 {scene: "code%3D2QQ"}const scene = options.scene ? decodeURIComponent(options.scene) : ''console.log('编译出来的scene',scene) //打印出来是 code=3D2QQthis.code = scene.split('=')[1]//打印出来是 3D2QQconsole.log('编译出来的推荐码',this.code)
},
getData(e) {//获取accessTokenlet that = this;const APP_ID = 'xxx'; // 小程序appidconst APP_SECRET = 'xxxxx'; // 小程序app_secretlet access_token = '';uni.request({url: "https://api.weixin.qq.com/cgi-bin/token", //固定链接,不用改data: {grant_type: 'client_credential',appid: APP_ID,secret: APP_SECRET},success: function(res) {console.log('获取accessToken', res)access_token = res.data.access_token;// 接口B:适用于需要的码数量极多的业务场景 生成的是小程序码that.getQrCode(access_token);}})
},
//获取二维码
getQrCode(access_token) {var that = this;uni.request({url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,//固定链接,不用改method: 'POST',responseType: 'arraybuffer', //设置响应类型data: {path: 'pages/public/login?code=' + that.code, // 必须是已经发布的小程序存在的页面(否则报错)width: 298,auto_color: false, // 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调line_color: {"r": "0","g": "0","b": "0"} // auto_color 为 false 时生效,使用 rgb 设置颜色},success: function(res) {console.log('获取二维码', res)that.maskData = "data:image/PNG;BASE64," + uni.arrayBufferToBase64(res.data);//以图片的形式展示}})
}

二、线上版本

原来以为很难的,压力都在前端,等做完了,测试体验版的时候,发现api.weixin.qq.com域名没加进去,结果官方跟我说,不能加这个域名,原因是前端不能直接用上面的方法自己去生成小程序码,必须要通过后台服务器转一下
在这里插入图片描述

// 给了个token,后端自己去实现自测版本中的操作-生成小程序码,返回图片地址,前端直接展示图片就好了,666
getData(e) {this.$api.qrcode({token: this.token}).then(res => {console.log('我的推荐码', res)this.maskData = res}).catch(err => {this.$api.msg(err)});

三、测试

截取生成小程序码的图片,用微信开发者工具的“通过二维码编译”扫码测试能不能拿到参数,并填充
在这里插入图片描述


总结

事情其实很简单,没必要想的太复杂


http://chatgpt.dhexx.cn/article/e0dIQm5c.shtml

相关文章

微信小程序开发实战9_1 生成小程序码

9.1 小程序的入口场景 为了便于商家进行小程序的推广&#xff0c;微信提供了多种小程序入口的方式&#xff0c;用户可以通过常规的方式来使用小程序&#xff1a;例如用户可以通过搜索关键字来搜索并进入小程序&#xff0c;也可以通过附近的小程序来选择并进入小程序。用户还可…

微信小程序生成小程序码和展示

云函数代码&#xff1a; // 云函数入口文件 const cloud require(wx-server-sdk) cloud.init({env: cloud.DYNAMIC_CURRENT_ENV })// 云函数入口函数 exports.main async (event, context) > {try {const result await cloud.openapi.wxacode.getUnlimited({scene:event…

【微信小程序】 java如何生成小程序码,并跳转到指定落地页 demo

前言&#xff1a; 需求场景&#xff0c;用户通过扫描小程序码&#xff0c;到指定的页码&#xff0c;希望能帮到大家&#xff0c;切记&#xff0c;要等到小程序发版测能测试。 1、微信官网 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.…

uni-app跨端开发之生成小程序码和调试scene参数爬坑指南

前段时间&#xff0c;公司的小程序中有一个分享小程序码邀请好友的功能。前前后后也踩过不少坑&#xff0c;然后就有了这篇笔记。如果看官正在因生成微信小程序码或调试scene参数而苦恼&#xff0c;不妨继续往下看看&#xff0c;或许这篇文章能够帮助到您哟。 1、如何生成微信…

微信小程序实现前端自己生成小程序码并且带参数

hxrhwxacode.getUnlimited | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html后端开发希望我们前端自己去生成小程序码并且带上用户信息。于是查到了官网上有相关的文档。开始着手去…

小程序云函数生成小程序码

云函数生成小程序码的Demo # 云函数 config.json配置,云调用wxacode.get API 的权限 {"permissions": {"openapi": ["wxacode.get"]} }index.js const cloud require(wx-server-sdk) cloud.init()exports.main async (event, context) > {t…

微信小程序生成小程序码以及参数的获取

一、小程序码介绍 通过后台接口可以获取小程序任意页面的小程序码&#xff0c;扫描该小程序码可以直接进入小程序对应的页面&#xff0c;所有生成的小程序码永久有效&#xff0c;可放心使用。 目前小程序码有两种形式&#xff0c;推荐生成并使用小程序码&#xff0c;它具有更好…

小程序指定页面生成小程序码(任意页面),所有运营在小程序端就可以自主得到页面链接,再也不用每次去协助看页面链接了~

写在前面&#xff1a; 业主运营经常会咨询&#xff0c;公众号放小程序链接&#xff0c;或者小程序后台使用&#xff0c;分类链接是哪一个&#xff0c;商品具体链接是哪一个&#xff0c;拼团砍价秒杀链接是哪一个。这里是设置好&#xff0c;解决以上所有不定期的咨询。 一、官方…

小程序-云开发-实现生成小程序码

虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09; 如果不知道如何操作 点击这里,标星不迷路 前言 小程序因为传播快,易分…

超强、超详细Redis入门教程

转载自&#xff1a; http://www.h5min.cn/article/56448.htm 这篇文章主要介绍了超强、超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下 【本教程目录】 1.redis是什么 2.redis的作者何许人也 3.谁在使用redis 4.学会安装redis 5.学会启动r…

Redis02:企业架构介绍以及redis介绍

企业架构介绍以及redis介绍 互联网项目架构演进单机Mysql的演进当今企业架构分析 Redis概述 互联网项目架构演进 单机Mysql的演进 1、单机Mysql的年代 90年代一个基本的网站访问量一般不会太大&#xff0c;单个数据库完全足够&#xff01;那个时候更多的去使用静态html&#…

Redis技术

一.基本知识 (1)NoSQL数据库简介 技术的分类: 1、解决功能性的问题&#xff1a;Java、Jsp、RDBMS、Tomcat、HTML、Linux、JDBC、SVN 2、解决扩展性的问题&#xff1a;Struts、Spring、SpringMVC、Hibernate、Mybatis 3、解决性能的问题&#xff1a;NoSQL、Java线程、Hadoop、…

《Redis系列专题》 之 大规模互联网应用Redis架构要点(精华)

建议有一定工作经验者阅读 通常&#xff0c;为了提高网站响应速度&#xff0c;总是把热点数据保存在内存中而不是直接从后端数据库中读取。Redis是一个很好的Cache工具。大型网站应用&#xff0c;热点数据量往往巨大&#xff0c;几十G上百G是很正常的事儿&#xff0c;在这种情况…

大数据互联网架构阶段 Redis(二)

Redis(二) 零 、 目录 将缓存引入电商项目主从复制哨兵模式集群容忍度CAP理论 十、 将缓存引入电商项目 使用Spring框架维护Jedis池对象 引入一个配置文件 application-redis.config <beans xmlns"http://www.springframework.org/schema/beans"xmlns:context&…

大数据下Redis的应用

大数据下Redis的应用 1、Redis客户端区别 1.1 redis常用客户端 目前市面上比较流行的客户端有jedis、lettuce、redisson •jedis jedis客户端连接方式是基于TCP阻塞方式 •lettuce lettuce内部是基于netty的多路复用异步非阻塞方式&#xff08;目前业界解决高并发大数据的问…

redis互联网真实应用场景

Redis 1.数据类型&#xff08;5种&#xff09; String、hash、list、set、zset 2.常用命令 2.1 String 分布式锁 SETNX 当别的进程枷锁后 讲不能获得锁 利用INCR来产生分布式序列号&#xff0c;优化策略&#xff1a;一下拿出多个序列号到服务器本地&#xff0c;之后在服务器…

大规模互联网应用Redis架构要点(转)

通常&#xff0c;为了提高网站响应速度&#xff0c;总是把热点数据保存在内存中而不是直接从后端数据库中读取。Redis是一个很好的Cache工具。大型网站应用&#xff0c;热点数据量往往巨大&#xff0c;几十G上百G是很正常的事儿&#xff0c;在这种情况下&#xff0c;如何正确架…

Redis 为什么在互联网应用中广泛应用?

1. redis 都能干嘛 缓存&#xff0c;毫无疑问这是Redis当今最为人熟知的使用场景。再提升服务器性能方面非常有效&#xff1b;排行榜&#xff0c;在使用传统的关系型数据库&#xff08;mysql oracle 等&#xff09;来做这个事儿&#xff0c;非常的麻烦&#xff0c;而利用Redis…

从 Redis7.0 发布看 Redis 的过去与未来

前言 经历接近一年的开发、三个候选版本&#xff0c;Redis 7.0终于正式发布&#xff0c;这是Redis历史上改变最多的一个大版本&#xff0c;它不仅包含了50多个新命令&#xff0c;还有大量核心新特性与改进&#xff0c;这些不仅能够解决用户使用中的诸多问题&#xff0c;还进一…

Redis简介

​强烈推荐一个大神的人工智能的教程&#xff1a;http://www.captainai.net/zhanghan 【前言】 组长反复提到系统加载的慢性能有待提高&#xff0c;正好这两天任务都提前完成&#xff1b;于是乎开始着手研究Redis&#xff1b;经过两天的研究将Redis应用到了系统中并做了相关的…