解决公众号网页微信免登录重定向地址只能带一个参数问题

Depressiom

已于 2022-10-24 17:49:59 修改

阅读量739

点赞数

分类专栏：工作踩坑日记文章标签：微信 javascript 开发语言 1024程序员节

于 2022-10-19 10:20:21 首次发布

本文链接：https://blog.csdn.net/Depressiom/article/details/127402638

版权

工作踩坑日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

场景描述两个手机交互涉及公司内容就没有截图了

通过二维码扫码进入判断扫码微信还是支付宝界面，判断之后微信免登陆进行重定向带值传递到后台交互界面

1.生成二维码界面

//准备支付-进行扫码识别 微信还是支付宝
           ready_pay_order(order_number,money){
              let url = "https://xxx.xxxx.com/index.php/Template/xxx/center_jump?pay_tl_remark="+pay_tl_remark+"&pay_tl_money="+pay_tl_money;
                   qrcode.makeCode(url);
                   var canvas=$("#app_imgs").find('canvas').get(0);
                   var pay_qr_code_img = canvas.toDataURL('image/jpg');
                   self.img_src=pay_qr_code_img;
                   self.times_o = setInterval(() => {
                       self.times--;
                       if (self.times == 0||self.is_pay==1) {
                           clearInterval(self.times_o);
                       }else{
                           alert("生成错误");
                       }
                   }, 1000);
          },

2. 二维码扫码进入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link href="__PUBLIC__/css/animate.css" rel="stylesheet">
    <link href="__PUBLIC__/css/fyapps.css?v=1.112" rel="stylesheet">
    <script src="__PUBLIC__/js/app_jq_vue.js"></script>
</head>
<script>
    var appid = "owner"; //自己的appid

    const querystring = getQueryString();

    function myrefresh()
    {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.indexOf("micromessenger") > 0) { // 微信
            //var uri = encodeURI("https://xx.xxx.com//index.php/Template/xx/test_pay?tl_data="+tl_data);  //只能传递一个参数  &会与微信自带的参数造成混淆，编译不出
            /*encodeURIComponent  php后台可以通过  urldecode() 进行解码
            	$url="%E9%94%80%E5%94%AE%E5%8D%95%E6%80%BB%E9%A2%9D%EF%BC%9A100";
				  $str = urldecode($url);
				  	echo  $url ;
					echo  $str ;*/
            const uri = encodeURIComponent("https://xx.xx.com/index.php/Template/xx/test_pay?pay_tl_money="+querystring.pay_tl_money+"&pay_tl_remark="+querystring.pay_tl_remark);
            var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri=" + uri+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
            window.location = url;
        }
        if (ua.indexOf("alipayclient") > 0) { //支付宝
            alert("Alipay");
        }
    }
    setTimeout('myrefresh()',1000);

    /**
     * url參數截取
     * @returns {{}}
     */
    function getQueryString(){
        const url = location.search;
        const rs = {}
        if(url.indexOf('?') === 0){
            const querystring = url.substr(1);
            const kvArr = querystring.split('&');
            kvArr.forEach(item => {
                const temp = item.split('=')
                const key = temp[0];
                const val = temp[1];
                rs[key] = val
            })
        }
        return rs;
    }
</script>
<body>

</body>
</html>

多参数传递将 encodeURI 改成 encodeURIComponent 亲测有效

3. test_pay界面接收参数

  //原基础上加上
               const querystring = this.getQueryString();
                let code = querystring.code;
                this.number_qr = querystring.pay_tl_money; // alert()可以弹出传递的值
                this.remark_content = querystring.pay_tl_remark;