首先说下业务场景
我们从pc端的管理平台可以获取到二维码和链接,原生app内部的扫码、微信或浏览器扫码/复制链接都可进入该h5。
开发都是在浏览器上面开发的所以没有发现问题
测试时发现安卓可以直接通过 this.$route.query直接获取,可ios无法获取,所以就取了?后面的参数部分,准备通过split('&')进行分割参数,如图
于是通过querystring.parse()方法进行重新转译,ios会把&符号和包含的中文转码并变成以url为key的对象
测试发现不能只判断是否是安卓手机或者其他,还得通过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('&')分割后如下图
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;
}