欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

通过微信公众号与小程序的二维码扫描,如何运用动态参数实现实时页面切换与接口调用参数传递

最编程 2024-02-22 08:17:11
...

微信公众号扫码进入

应用场景:扫码直接进入公众号的指定页面,传入指定参数

1、生成链接

根据自己的需求生成链接地址:
#paramone 参数 #paramtwo 参数 https://qqls.com?paramone=1&paramtwo=2

2、页面接收参数

使用方法来实现获取传入的参数
let paramone= str.getQueryString('paramone'); console.log(paramone);//1

由于h5是可以使用localtion获取到当前页面的url的,所以我写了一个获取当前url上的参数方法

/**
 * 获取请求URL参数
 * @param name
 * @returns {string}
 */
str.getQueryString = function (name) {
    let val = '';
    let url = location.href // 获取url中"?"符后的字串
    let index = url.indexOf('?');
    if (index !== -1) {
        let str = url.substr(index + 1)
        let strs = str.split('&')
        for (let i = 0; i < strs.length; i++) {
            let arr = strs[i].split('=');
            if (arr[0] === name) {
                val = decodeURIComponent(arr[1])
            }
        }
    }
    return val
}

这样就可以获取到你想要的参数了!

微信小程序生成普通链接,并且跳转至小程序

应用场景:使用过程中一般会需要进行推广,那么我们直接进行小程序扫码进入,比较常见
我开发的流程
实现基本流程后-》微信公众平台配置-》进行代码上传体验版本-》草料生成二维码-》扫码实现效果

1、微信公众平台配置

由于微信小程序是需要需要进行配置允许普通链接跳转小程序才行的,不然无效
在这里插入图片描述
进入平台后找到-开发管理-开发设置,在比较下方进行添加配置

2、代码设置为体验版本

3、使用草料二维码生成器生成二维码

链接: 草料二维码官网

4、微信小程序的开发代码

1、在配置的首页地址处
onLoad(options){
if (options.hasOwnProperty('q') && options.q) {
  // 通过下面这步解码,可以拿到url的值
  const url = decodeURIComponent(options.q)
  // 对url中携带的参数提取处理
  const obj = str.getWxUrlParam(url);
  //参数
  this.intoPages = obj.intoPages;
  this.CardNO = obj.CardNO;
}
}

/**
 * 解析微信小程序的链接地址
 * @params url
 * @return {string}
 */

str.getWxUrlParam = function(url){
	let req = {};
	if(url.indexOf('#') !== -1){
		const strName = url.split('#')[1];
		const strNames = strName.split('&');
		for(let i = 0 ; i< strNames.length; i++){
			req[strNames[i].split('=')[0]] = decodeURI(strNames[i].split('=')[1]);
		}
	}else if(url.indexOf('?') !== -1){
		const strName = url.split('?')[1];
		const strNames = strName.split('&');
		for(let i = 0 ; i< strNames.length; i++){
			req[strNames[i].split('=')[0]] = decodeURI(strNames[i].split('=')[1]);
		}
	}
	return req;
}

推荐阅读