关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

您所在的位置:网站首页 小程序跳转二维码二码合一怎么办 关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

2024-07-11 16:06:08| 来源: 网络整理| 查看: 265

前言:因项目中需要线下 扫描二维码进入到小程序完成 身份绑定,二维码中 要动态传递多个参数,看了官网文档介绍以及官方论坛,整个过程还比较顺利,特把整个过程中遇到的坑点做以总结。

 快速跳转官网文档介绍:扫码打开小程序接入指南

开发前相关配置

首先按照官方文档我们先做好配置工作,配置流程如下:小程序后台配置-开发管理-开发设置-扫普通链接二维码打开小程序,

 

开发过程中配置,举个例子:假如我们二维码的地址是:https://www.xxx.com/xxx?code=xxx,code 是我们要动态传递的参数,那么如何能够动态传递呢?这里我们需要去改变一下我们二维码的地址,二维码地址我们做一下修改:https://www.xxx.com/xxx?name=test&code=xxx。这里很明显我们把code放到放到第二参数去接收,第一个参数 可以随便写,但必须是固定的参数,不能修改。这里我们取添加一个规则:

这里注意  下载效验文件,效验文件要放到 https://www.xxx.com/QUIGNQWuhh.txt下,并确保可以访问,可以访问了才能生成规则,开发版我一直接收不到动态参数,这里我选的体验版,体验版在小程序后台成员管理中要维护相应的 体验成员账号。测试账号可以先传几个 固定的code码进行测试。体验版中一定要注意:没有在测试链接维护的账号生成的二维码是扫不出来的,在这里纠结了很长时间才发现,没有关系我们先维护两个账号完成开发测试。另外记得每次都要在微信开发者工具里进行代码上传到体验版中才能看到效果。(个人感觉这里调试很麻烦,没找到方便途径)

 

 开发调试

 生成好规则,上传完代码,这个时候 用测试链接中的地址生成二维码已经可以跳转到小程序了。这里已经成功了一半。接下来就是拿参数了,因为我们的小程序使用Taro开发的,这里我主要讲在Taro中接收参数,扫码进来后在跳转的页面 通过userRouter接收参数,Taro路由参数接受可以参考我的另一篇博客:Taro中接收路由参数。const router=useRouter() 接收参数如下

{params:{q: https%3A%2F%2Fwww.xxx.com.cn%xxx%name%test%code%123456} }

这里需要解码一下  通过 decodeURIComponent 进行解码后为:https://www.xxx.com/xxx?name=test&code=123456  就是二维码的链接,接下来我们只需要通过字符串解析拿到&后面的参数,这里我封装了一个方法

// 获取url参数 支持中文 export const GetRequest = (params) => { let url = params.substring(params.indexOf("?")); //获取url中"?"符后的字串 let 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]] = unescape(strs[i].split("=")[1]); } } return theRequest; }

const code= GetRequest(decodeURIComponent(route.params.q))   这里code的值输出一下:123456 完美拿到参数。另外提一下在小程序原生框架中我们应该需要 在 onLoad(options) 方法中去获取,options.q也可以拿到对应的参数,处理方法是一致的。

备注提醒

最后也是很重要一点,我提交代码到体验版,发现只有 测试链接中的配置地址才能跳转到小程序,只要改变code的值,就跳转不进去了。在这一块我卡了很久,最后才发现,只有在线上正式版才会生效。也就是说,这块不用管,调试完成后,代码审核发布,审核发布后记得:把规则修改为线上版,然后发布规则就可以了。这个时候我们发现code可以随意传值,都能跳转小程序了。切记,只有代码和规则发布后才能生效。

我也是抱着忐忑的心情发布了代码和规则,最后忐忑的扫了各个码才发现规则是生效的,所以总结下:体验版-只有测试链接中的地址会生效,线上版-规则才会全部生效。



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭