美文网首页
ios内嵌h5取不到url携带的参数

ios内嵌h5取不到url携带的参数

作者: 小小_128 | 来源:发表于2022-06-29 18:04 被阅读0次

首先说下业务场景

我们从pc端的管理平台可以获取到二维码和链接,原生app内部的扫码、微信或浏览器扫码/复制链接都可进入该h5。
开发都是在浏览器上面开发的所以没有发现问题

image.png

测试时发现安卓可以直接通过 this.$route.query直接获取,可ios无法获取,所以就取了?后面的参数部分,准备通过split('&')进行分割参数,如图

image.png

于是通过querystring.parse()方法进行重新转译,ios会把&符号和包含的中文转码并变成以url为key的对象

image.png

测试发现不能只判断是否是安卓手机或者其他,还得通过Object.entries() / Object.keys() / Object.values() 方法去判断是否是浏览器打开的h5

if (isAndroid()) {
  let query = this.$route.query;
  this.query = query;
} else {
  const vars = window.location.href.split('?');
  const canshu =  querystring.parse(vars[1]);
  if (Object.entries(canshu).length === 1) {
    this.query = this.queryURL(canshu.url);
  } else {
    this.query = canshu;
  }
}

当为ios手机时,继续处理字符串,split('&')分割后如下图

image.png
queryURL(str) {
  var params = str.split('&'); //进行分割成数组
  var obj = {}; //声明对象
  obj.url = params[0]; //单独处理url字段
  //后面分割的字段依次赋值
  for (var i = 1; i < params.length; i++) {
    var param = params[i].split('='); //进行分割成数组
    obj[param[0]] = param[1]; //为对象赋值
  }
  return obj;
}
此图为了记念发版当天上午十点发现的这个ios兼容问题,在真机上联调修改到中午一点半的慌张!!!
image.png

相关文章

网友评论

      本文标题:ios内嵌h5取不到url携带的参数

      本文链接:https://www.haomeiwen.com/subject/iqbncrtx.html