解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用
在ios或android如果直接用webview在打开H5链接例如:
打开:http://localhost:8080/#/answer?id=1509335039582001
会变成 http://localhost:8080/ 造成根本打开不了想要的页面(微信中获取网页授权的时候有#号也会有问题)
解决思路,链接中不写#号 打开后跳转到带#号的路由,把页面路由的代码定义为listType参数 后面的参数都先整个拼接
如这样 http://localhost:8080/?listType=answer&id=1509335039582001
我们在index中获取下页面接受到的参数:
var globalCons = {};
try{
location.search.substr().split('&').forEach( function(item){
var s = item.split('=');
globalCons[s[]]=s[];
});
} catch(e){
throw new Error(JSON.stringify(search));
}
这样页面的参数都会保存在globalCons 对象中
console.log(globalCons) // globalCons = {"listType":"answer","id":1509335039582001 }
在main.JS 判断listType是否有值
if (globalCons.listType) { var code ={}; //路由的参数
code.id = globalCons.id; var r = {} //路由的name
r.name = globalCons.listType;
r.params = code;
$router.push(r); //解析跳转到对应页面 }
这样问题就解决了,
但是还有一个新的问题
路由的params需要手动去写,这样很不爽,我们可以定义一个固定格式传参时直接写好,让js自动追加参数
我们传参的时候统一传 params 这个参数 参数值为一个有规律的字符串
如:http://localhost:8080/?listType=answer¶ms=id.1509335039582001|type.60 params为我们想要追加的值
我们可以先拿到拆分的键和值 params.split("|") // ['id.1509335039582001','type.60'] 在循环数组按.拆分,就拿到最终结果
//跳转到指定页面的方法
var code ={};
if (globalCons.listType) {
if(globalCons.params){
var params = globalCons.params.split("|"); params.forEach(function(data){
code[data.split(".")[]] = parseInt(data.split(".")[]);
});
}
var r = {}
r.name = globalCons.listType;
r.params = code;
$router.push(r); }
http://localhost:8080/#/answer?id=1509335039582001&type=60
解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用的更多相关文章
- 编写ios和android共用的c/c++库时 使用iconv的问题(转)
因为在项目中需要同时维护ios和Android,不同的代码不利于开发的便捷和以后的维护,所以在最近的一个项目中,两种手机应用的通信部分打算使用c/c++库来统一编写,ios调用.a静态库,androi ...
- Android中WebView与H5的交互,Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
- 小程序之web-view打开外部链接
小程序之web-view - 传送门 web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 一:小程序使用web-view打开链接的前 ...
- 解决 VUE 微信 IOS 路由跳转问题
watch: { "$route"(){ if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) { location.hre ...
- 解决Ubuntu 16.04 上Android Studio2.3上面运行APP时提示DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs的问题
本人工作环境:Ubuntu 16.04 LTS + Android Studio 2.3 AVD启动之后,运行APP,报错提示: DELETE_FAILED_INTERNAL_ERROR Error ...
- WebView播放H5课件时,锁屏解锁后,页面重新绘制的问题
难题描述:H5页面播放 ,锁屏,解锁后,重新加载了页面,三星不会出现(onpause onstop ,onresume),但在小米.魅族会调用 onpause onstop ondestroy,onr ...
- Vue项目用于Ios和Android端开发
起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...
- vue中解决时间在ios上显示NAN的问题
最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...
随机推荐
- 小强的HTML5移动开发之路(20)——HTML5 Web SQL Database
来自:http://blog.csdn.net/dawanganban/article/details/18220761 一.Web Database介绍 WebSQL数据库API实际上不是HTML5 ...
- Vi/Vim 替换使用方法
vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询. :s/vivian/sky/ 替换当前行第一个 vivian 为 s ...
- MySQL错误“Specified key was too long; max key length is 1000 bytes”的解决办法
MySQL错误"Specified key was too long; max key length is 1000 bytes"的解决办法 经过查询才知道,是Mysql的字段设置 ...
- 小强的HTML5移动开发之路(1)——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...
- Pixelmetrix :OTT Media Grinder (OTT TV 质量评价设备)
有关OTT TV 质量评价方法方面的研究少之又少.国内貌似还几乎没有相关的研究.不过在国外已经找到相关的产品了,翻译了一下产品手册的部分内容,很有参考价值,尤其是其提出的8个指标. 概述 OTT Me ...
- 《java入门第一季》之面向对象静态内部类和非静态内部类的区别
很感谢在内部类章节,"开心阳"先生给与的建议.使用静态内部类.这里就简单说一下静态内部类的使用. package com.devin; public class MyMain{ p ...
- 使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能
1.概述 TabLayout是在2015年的google大会上,google发布了新的Android Support Design库的新组件之一,以此来全面支持Material Design 设计风格 ...
- android ListView加载不同布局
今天来跟大家讨论下同一个ListView如何加载不同的布局. 老规矩,先来看效果图. 主要步骤如下 1.增加Type. 2.重写getViewTypeCount方法. 3.重写getItemViewT ...
- SpriteBuilder中CCB精灵对象的Sprite frame为什么有时候不能修改
有时候你会发现CCB中的精灵对象(root节点)的Sprite frame是灰色的,不能修改.因为它是根对象,所以不存在被嵌入其他CCB的情况,那到底是什么原因呢? 可以发现此时的Timeline当前 ...