深深精晓vue,JS剖析url查询参数的简易代码

在RN
项目启动之后有一个短暂的白屏,调试阶段白屏的时间较长,大概3-5秒,打正式包后这个白屏时间会大大缩短,大多时候都是一闪而过,所以称之为“闪白”。

$watch中的oldvalue和newValue

废话不多说了,直接给大家贴代码了,具体代码如下所述:

图片 1

大家都知道,在vue.js中给我们提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue.

var path = 'www.u.com/home?id=2&type=0&dtype=-1';
function parseUrl(url){
  var result = [];
  var query = url.split("?")[1];
  var queryArr = query.split("&");
  queryArr.forEach(function(item){
    var obj = {};
    var value = item.split("=")[0];
    var key = item.split("=")[1];
    obj[key] = value;
    result.push(obj);
  });
  return result;
}
console.log(parseUrl(path)); 
//[{id: '2'},{type: '0'},{dtype: '-1'}]

图片 2

顾名思义,这两个对象就是对象发生变化前后的值。

好了,下面看下js获取url参数值的两种方式

其实解决的方案也有很多,这里做一个简单的总结。

但是在使用过程中我发现这两个值并不总是预期的。下面来一起看看详细的介绍:

方法一:正则分析法

白屏的原因

定义data的值

代码如下:

在iOS App 中有
启动图(LaunchImage),启动图结束后才会出现上述的闪白,这个过程是 js
解释的过程,JS
解释完毕之前没有内容,所以才表现出白屏,那么解决的方法就是在启动图结束后,JS
解释完成前做一些简单的处理。

data: {
 arr: [{
  name: '笨笨',
  address: '上海'
 }, {
  name: '笨笨熊',
  address: '北京'
 }],
 obj: {
  name: '呆呆',
  address: '苏州'
 },
 str: '哈哈哈'
 }
function getQueryString(name) { 
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
var r = window.location.search.substr(1).match(reg); 
if (r != null) return unescape(r[2]); return null; 
} 

解决的常见方案:

定义watch

调用方法:

  • 启动图结束后通过原生代码加载一张全屏占位图片,跟启动图一样的图片,混淆视听“欺骗用户”。
  • JS解释完毕后通知原生可以移除占位图
  • 收到 JS 发来的可以移除占位图的通知,移除占位图
watch: {
 arr: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 obj: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 str: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 }
alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2")); 
alert(GetQueryString("参数名3")); 

代码实现

定义事件触发

方法二

新建一个SplashScreen 文件用来接收 JS
发来的”移除占位图”的消息。相关代码如下:

methods: {
 test() {
  this.arr.push({
  name: 9
  })
  this.$set(this.obj, 'i', 0)
  this.str = ''
 },
 test1() {
  this.arr = [{
  name: '000'
  }]
  this.obj = {
  name: 999
  }
  this.str = '123'
 }
 }

代码如下:

SplashScreen.h

测试结果为

<Script language="javascript"> 
function GetRequest() { 
var url = location.search; //获取url中"?"符后的字串 
var theRequest = new Object(); 
if (url.indexOf("?") != -1) { 
var str = url.substr(1); 
strs = str.split("&"); 
for(var i = 0; i < strs.length; i ++) { 
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
} 
} 
return theRequest; 
} 
</Script> 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图