1. 需求背景
微信小程序跳转到webview页、需要获取到该跳转url中是否携带有参数status以及其值, 故梳理此文章。
2. 获取方式
若尽可能精简地描述、假设跳转url为: const tmp = https://xxxxxx/xxxxx.php?B=2&C=3&status=true
2.1 正则表达式
getUrlParams (url = '', name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
// 判定URL是否符合正则表达式
let r = url.match(reg)
if (r !== null) {
return r[2]
}
return null
},
console.log('url参数截取', getUrlParams(tmp, 'status'))
需要注意的是: 要留意该url是否有encodeURIComponent()、若有则需要先decodeURIComponent()一下.
缺陷: 若需要获取的参数名放在第一个参数那就没法识别了、不信你往下看。
let tmp1 = 'https://xxxxxx/xxxxx.php?B=2&C=3&status=true'
// 打印: url参数截取-非第一个参数 true
console.log('url参数截取-非第一个参数', getUrlParams(tmp1, 'status'))
let tmp2 = 'https://xxxxxx/xxxxx.php?status=true&B=2&C=3'
// 打印: url参数截取-第一个参数 null
console.log('url参数截取-第一个参数', getUrlParams(tmp2, 'status'))
关于这个问题、会在另外一篇讲正则表达式的时候说明其优化方案。
2.2 split拆分法(容易理解)
const url = 'https://xxxxxx/xxxxx.php?B=2&C=3&status=true'
function getUrlParams (url = '') {
let obj = new Object()
if(url && url.indexOf('?') !== -1){ // 判断是否带有?参数
let params = url.split('?') || []
if(params.length === 2) {
params = params[1].split('&')
// 获取所有的参数并组装成对象
for(let i = 0; i< params.length; i++){
let tmp = params[i].split('=')
obj[tmp[0]] = tmp[1]
}
}
}
return obj
}
const obj = getUrlParams(url)
// typeof obj.status: string(字符串类型)
console.log('status值', obj.status, typeof obj.status)
应用场景:
- 获取URL中是否含有指定参数、获取该参数值;
- 获取URL中所有的参数名、并组装成参数对象;
3. 写在最后
在实际开发中、页面跳转中获取页面携带的URL参数是非常常见的、比如H5、微信小程序、ReactNative等技术栈、实现思路类似、根据遇到的具体问题进行解决即可。
若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!