微信小程序或js中获取url参数

发布时间 2024-01-12 02:08:45作者: csjoz11

微信小程序扫普通链接获取url参数
ps: 这里的方法跟 打开页面路径中的参数不一样哈.
欢迎各位大神前来指点

文章目录
微信小程序扫普通链接获取`url`参数
方法一:
方法二:
方法三:
使用
微信小程序获取`页面路径`参数
js中获取url参数
方法一:
可获取多个参数

/**
* params1: url
* params2: 要获取参数
*/
const getQueryString = (url, name) => {
    var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
    var r = url.substr(1).match(reg)
    if (r != null) {
        // console.log("r = " + r)
        // console.log("r[2] = " + r[2])
        return r[2]
    }
    return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
方法二:
获取一个参数, url中有多个参数,只会返回第一个参数值

/**
* params1: url
* params2: 要获取参数
*/
getQueryVariable: function (query, variable) {
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair.length == 2) {
            return pair[1];
        }
        if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
方法三:
和方法一差不多, 在js中使用window.location.search获取页面url地址

getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}


//demo
//url地址为:http://www.xxxx.com?mobile=13899997777&nickname=小不点
let mobile = getQueryString('mobile');
1
2
3
4
5
6
7
8
9
10
11
使用
这里以小程序调用为例, 扫普通二维码进入小程序,获取参数

二维码链接内容会以参数q的形式带给页面,在onLoad事件中提取q参数并自行decodeURIComponent一次,即可获取原二维码的完整内容。

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
    that = this;
    //扫码截取参数
    if (options.q !== undefined) {
        let q = decodeURIComponent(options.q);
        // q 是解码后的完整url 【https://js.test.com/index?combo_code=10000006】
        let comboCodeParams = utils.getQueryVariable(q, 'combo_code');
        that.setData({
            comboCode: comboCodeParams
        })
    }
    
    //方法二使用及结果【获取多个参数】:
    var q1 = 'https://js.test.com/index?id=159&type=2&testA=123'
    console.log("params1---->", utils.getQueryString(q1, 'id'));  //159
    console.log("params2---->", utils.getQueryString(q1, 'type')); //2
    console.log("params3---->", utils.getQueryString(q1, 'testA')); //123
    
    
    //方法一结果:【不利于获取多个参数】
     console.log("params1---->", utils.getQueryVariable(q1, 'id'));  //159
    console.log("params2---->", utils.getQueryVariable(q1, 'type')); //159
    console.log("params3---->", utils.getQueryVariable(q1, 'testA')); //159
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
微信小程序获取页面路径参数
页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
// demo
wx.navigateTo({
   url: '../user/user?userId='+ this.data.id,
});

<navigator url="../user/user?userId={{item.id}}">
</navigator>


// 在user页面中获取路径参数
onLoad: function (options) {
    this.setData({
        userId: options.userId
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
js中获取url参数
其中的一种方式demo

function GetQueryString(name) {
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
 
// 调用方法
alert(GetQueryString("id"));
alert(GetQueryString("type"));
alert(GetQueryString("testA"));
1
2
3
4
5
6
7
8
9
10
文章知识点与官方知识档案匹配,可进一步学习相关知识
————————————————
版权声明:本文为CSDN博主「Smile_ping」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Smile_ping/article/details/102480660