微信小程序中生成普通二维码,并根据二维码里的参数跳转对应的页面

news2024/11/17 11:30:55

微信小程序中生成普通二维码,并根据二维码里的参数跳转对应的页面

    • 1.打开[微信公众平台](https://mp.weixin.qq.com/)
    • 使用encodeURIComponent()对参数进行转码
      • 第一步:对要传递的参数进行编码
      • 第二步:生成二维码
      • 第三步:小程序中转页面【 pages/middlePage/middlePage】中获取参数,编写跳转逻辑

1.打开微信公众平台

找到开发目录下面的 》 【开发管理】》【开发设置】找到【扫普通链接二维码打开小程序】模块,
如图:
在这里插入图片描述
点击【添加】
在这里插入图片描述
在这里插入图片描述

使用encodeURIComponent()对参数进行转码

例如:
我的生成二维码的链接地址是
服务器请求地址+需要跳转的参数

第一步:对要传递的参数进行编码

我要跳转到资讯页面,
服务器域名:https://xxxxx.com
资讯页面路径:/pagesA/information/informationDetails,
查询参数:id=12(参数不定)
const params = “path=/pagesA/information/informationDetails?id=12”
const paramsEncode=encodeURIComponent(params);//对拼接跳转参数进行编码:
console.log(paramsEncode);
//编码结果:path%3D%2FpagesA%2Finformation%2FinformationDetails%3Fid%3D12

第二步:生成二维码

生成二维码链接:草料二维码生成网站
https://xxxxx.com?path%3D%2FpagesA%2Finformation%2FinformationDetails%3Fid%3D12

第三步:小程序中转页面【 pages/middlePage/middlePage】中获取参数,编写跳转逻辑

如图:我实际跳转页面参数
在这里插入图片描述

onLoad(options) {
	   console.log("[middle]", options)
	   if (options.hasOwnProperty('q') && options.q) {
	       //对参数进行解码
		    const tempUrl = decodeURIComponent(options.q);
		    //对解码后的参数进行拆分组装,获取要跳转的路径
		    const paramsObject = this.urlParams(tempUrl);
		    uni.redirectTo({
				     url: paramsObject
		    })
	   } else {
		    uni.switchTab({
				     url: "/pages/index/index"
		    })
	   }
},
 methods: {
	   urlParams(url) {
		    let str = decodeURIComponent(url.slice(url.indexOf('?') + 1))
		    let path = str.slice(str.indexOf('=') + 1);
		    return path
	   },
  }

详细内容请详读官方文档

注:
体验版:配置的测试链接需要和二维码生成的链接地址一摸一样,不能生成动态参数
测试:xxx.com?path%3D%2FpagesA%2Finformation%2FinformationDetails%3Fid%3D12

线上版:配置的测试链接只需要填写域名和跳转页面,如:id不需要编码填进测试链接
正式:xxx.com?path%3D%2FpagesA%2Finformation%2FinformationDetails

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

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

相关文章

电子元器件B2B电商平台建设方案:优化企业商流,拓宽B2B交易渠道

随着5G、汽车电子、物联网等新兴产业的发展,促进了相关电子元器件的市场需求快速增长。根据工信部预计,2023年我国电子元器件销售总额将达到2.1万亿元。而在互联网高速发展的今天,电子元器件交易在线化是必然趋势,B2B电子元器件线…

maven学习:引入

你是否早已厌倦了日复一日的手工构建工作?你是否对各个项目风格迥异的构建系统感到恐惧?Maven——Maven 的正确发音是[ˈmevən],而不是“马瘟”以及其他什么瘟。Maven 在美国是一个口语化的词语,代表专家、内行的意思。这一Java社…

自回归滞后模型进行多变量时间序列预测

下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。 假设要预测其中一个变量。比如,sparkling wine。如何建立一个模型来进行预测呢? 一种常见的方法是将该变量其视为单变量时间序列。这样就有很多方法可以…

【从零开始学微服务】04.微服务架构的特点

大家好,欢迎来到万猫学社,跟我一起学,你也能成为微服务专家。 微服务架构被技术大牛们总结出了以下九个特点: 服务组件化围绕业务功能产品而不是项目强终端弱管道去中心化管理去中心化数据管理基础设施自动化容错性设计演进式设计…

Python 快速入门

文章目录Python 快速入门1 环境配置1.1 简介1.2 Python 安装1.3 其余软件1.4 编辑器的使用2 基础语法2.1 特点2.2 代码块2.3 注释3 数据类型3.1 变量类型3.2 数据结构3.3 运算符3.3.1 逻辑运算符3.3.2 比较运算符3.3.3 算术运算符3.3.4 布尔运算符4 流程语句4.1 循环语句4.1.1 …

Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)

需要全部源码或运行有问题请点赞关注收藏后评论区留言~~~ 一、通过okhttp调用HTTP接口 尽管使用HttpURLConnection能够实现大多数的网络访问操作,但是操作过于繁琐,于是Andorid从9.0是使用okhttp这个框架 由于okhttp属于第三方框架 所以使用前要修改模…

我们的程序是如何跑起来的?

1.我们写的代码写完并测试以后是如何部署给用户使用的? 1. 准备所需要的服务器 2. 在服务器上安装JDK、mysql、redis、Tomcat、Nginx等环境 3. 进行mysql、redis、nginx的连接配置 4. 项目打包。前端构建打包成功后在根目录dist文件夹中;后端打成jar包&#xff0c…

基于改进海洋捕食者算法求解单目标优化问题附matlab代码(NMPA)

✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法 …

VLAN网络支持ipv6的交换机和虚机配置

VLAN支持ipv6的交换机和虚机配置前言一、创建VLAN网络并配置交换机1.规划并在OpenStack上创建 VLAN网络2.在交换机上配置VLAN二、Ubuntu虚机配置1.创建虚机2.在OpenStack上查看port3.登录虚机配置网卡3.1登录虚机后,发现虚机没获取到openstack上对应port的ipv6地址。…

Qt编写跨平台视频监控系统(64通道占用7%CPU/支持win_linux_mac等)

一、前言 视频监控组件经历过数十年的迭代,从最初的只简单播放个rtsp视频流,到现在支持各种音频视频文件格式(mp3、wav、mp4、asf、rm、rmvb、mkv等)、支持各种视频流格式(rtp、rtsp、rtmp、http等)、支持…

10个JavaScript常见高级知识点

今天,给大家分享的是一篇干货知识《10个JavaScript常见高级知识点》,主要针对初级前端和想要面试找工作的同学,想要学好前端,除了要掌握JavaScript的基础知识外,还需要掌握一些高级的知识点。 学会了下面这些常见的高…

鼠标经过图片在边框内放大动效

鼠标没有经过: 鼠标经过的时候,看图,应该可以看出变化吧!图有放大的效果。 样式:图片由一个盒子包着,盒子加上overflow:hidden的样式,即可以保证图片在边框内放大。 然后给图片加上动画效果就可…

JavaWeb开发之——数据库设计(20)

一 概述 数据库设计-简介数据库设计-多表关系实现数据库设计-案例 二 数据库设计-简介 2.1 软件的研发步骤 2.2 数据库设计概念 数据库设计就是根据业务系统的具体需求,结合我们所选用的DBMS(Database Management System-数据库管理系统),为这个业务系…

运动哪种耳机好用,推荐五款适合运动的耳机分享

​经常佩戴耳机的小伙伴都知晓传统的蓝牙耳机相对于有线耳机来说比较方便,但也存在着耳道一直堵塞导致细菌的滋生等因素的存在,但在近些年火热的骨传导耳机却能够将这些问题一一化解,基本可以说是百利而无一害,所以今天我就给小伙…

第一章 计算机系统体系结构

1.1 什么是计算机体系结构 本章的第一个概念是计算机系统(computer system)。 计算机系统包括读取并执行程序的 中央处理单元(CPU, 保存程序和数据的存储器以及将芯片转换为实用系统的 其他子系统。 这些子系统会使CPU与显示器、打印机、Internet等外部设备之间的…

【优化求解】整数规划求解机票超售优化赔付问题【含Matlab源码 2182期】

⛄一、问题 A航空公司每天有6班航班从上海到北京,从上午10点到晚上8点,每两小时发一班航班。某天获知,前三班机每班可以容纳100名旅客,后三班机每班可以容纳150名旅客。如果某次航班超售,A航空公司可以把某预定了该次…

【JSP/Servlet】基于WEB的通讯录系统

巩固JSP/Servlet系统开发描述步骤系统功能描述一、创建一个登录页面二、模拟数据(用数据库模拟用户名和密码还有用户的通讯录)三、创建一个JDBC工具类四、判断在登录页面输入的用户名和密码是否正确五、利用cookie实现保存六、以表格形式显示出我的通讯录…

2022最新MySQL面试题-有详细完整的答案解析

MySQL专题面试题 MySQL中有哪些存储引擎? InnoDB存储引擎 InnoDB是MySQL的默认事务型引擎,也是最重要、使用最广泛的存储引擎。它被设计用来处理大量的短期(short-lived)事务,应该优先考虑InnoDB引擎。 MylSAM存储引擎 在MySQL 5.1及之前的…

操作简单的BI数据分析软件有哪些?实际体验如何?

使用者没有IT基础,不懂代码,又需要对大量复杂的数据进行深度分析;分析效率要高;报表要直观易理解;最好能让每个浏览者都自己动手做分析。现在市面上,能够满足这些要求的BI数据分析软件有哪些?实…

一文速通MybatisPlus

目录 Mybatis-plus简介 MP特性 框架的结构 MP快速入门 配置日志输出 主键生成策略 自动填充 方式一:数据库级别 方式二:代码控制级别(常用) 乐观锁和悲观锁 测试乐观锁单线程成功的例子 乐观锁多线程失败案例 查询操作 分页查询 删除操作 删除…