vue与原生app交互之vue工程主动获取url携带的参数

不管是Android还是iOS都有各自的架构体系,在一定程度上是完全不依靠其他语言或者技术上的支持去完成所需功能,但是不可否认的是html做的图形化界面就是比原生的好看和流畅。比如下面这张图:
在这里插入图片描述
问题:后台url请求需要携带cookie,需要用户的useId,但是我做的这个vue工程只是app里的一个小模块······
需求:在用webview加载该模块时,需要同时传入cookie和useId,vue模块获取参数并保存,用于图形界面的数据请求。
分析:在vue工程的入口,获取参数并保存到本地

正题:
window.location可获取URL的主要信息(以 http://localhost:8181/dist/sleepDay?userNo=11 为例)

  • window.location.href
    整个URl字符串(在浏览器中就是完整的地址栏)
    本例返回值: http://localhost:8181/dist/sleepDay?userNo=11

  • window.location.protocol
    URL 的协议部分
    本例返回值:http:

  • window.location.host
    URL 的主机部分
    本例返回值:localhost

  • window.location.port
    URL 的端口部分
    本例返回值:“8181”

  • window.location.pathname
    URL 的路径部分(就是文件地址)
    本例返回值: /dist/sleepDay?userNo=11

  • window.location.search
    查询(参数)部分
    本例返回值:?userNo=11

好了,刚说的vue工程入口,选择在main.js中调用

import common from './api/common'
common.getUrlData();

其中common.getUrlData();是我common.js里的一个方法:

// 截取url中的数据
getUrlData() {
  /**
  * tempStr 格式是http://域名/路由?key=value&key=value...
  */
  let tempStr = window.location.href
  /**
  * tempArr 是一个字符串数组 格式是["key=value", "key=value", ...]
  */
  let tempArr = tempStr.split('?')[1] ? tempStr.split('?')[1].split('&') : []
  /**
  * returnArr 是要返回出去的数据对象 格式是 { key: value, key: value, ... }
  */
  let returnArr = {}
  tempArr.forEach(element => {
  returnArr[element.split('=')[0]] = element.split('=')[1]
  })
 /*输出日志*/
  console.log(returnArr);
  return returnArr
  },

浏览器控制台结果:
在这里插入图片描述
这时就可以通过setStorage进行数据保存:

//存
setStorage (key, value){
    if(arguments.length === 2){
        var v = value;
        if(typeof v == 'object'){
            v = JSON.stringify(v);
            v = 'obj-'+ v;
        }else{
            v = 'str-'+ v;
        }
        var ls = uzStorage();
        if(ls){
            ls.setItem(key, v);
        }
    }
},
// 取
    getStorage(key){
     var ls = uzStorage();
     if(ls){
        var v = ls.getItem(key);
        if(!v){return;}
        if(v.indexOf('obj-') === 0){
            v = v.slice(4);
            return JSON.parse(v);
        }else if(v.indexOf('str-') === 0){
            return v.slice(4);
        }
    }
}

等修改完善后,会开源本次的模块,下次见分晓

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值