技术标签: tv端h5
项目简介
公司最近开发会员体系项目,前端利用H5技术嵌入三端开发页面,TV端原生技术是C++,PC端原生技术是JAVA。
传值问题
Javascript与安卓/IOS进行交互。原生把方法暴露给window。前端只需要下window对象调用方法,进行传值即可。
notice:function(token,uuid){
var pattern = new RegExp('iPhone|iPad', 'ig');
var str = pattern.test(navigator.userAgent);
var data = {
"type":"2",
"session":token+"",
"uuid":uuid+""
}
if (str) {
try{
window.webkit.messageHandlers.onAction.postMessage(JSON.stringify(data));//调用ios上的方法
}catch(e){}
} else {
try{
JavaScriptHandler.onAction(JSON.stringify(data));//调用androd上的方法
}catch(e){}
};
}
Javascript与c++进行交互。原生把方法暴露给window。前端只需要下window对象调用方法,进行传值即可。
notice: function(data) {
try {
window.external.SayString(data);
} catch(e) {};
}
兼容问题(大型公司一般都会有自己的浏览器,有的话请忽略)
TV和PC只兼容到IE9,低于IE9采取提示的方式,提示用户升级浏览器。IE9也会产生一些问题。如下:
(1)跨域问题,core(后端添加允许跨域头)跨域不支持IE9模式,jquery添加xdomainrequest模块兼容。
(2)首先搞清楚ajax两个属性的意思,dataType把返回的数据转化成对应的类型,contentType把传递的数据转化成对应的类型,后端会接收到对应的类型。xdomainrequest模块会串改contentType:'application/json'类型。换成其他方式解决跨域/后端改接收模式
(3)webpack不支持IE9,判断不支持webpack模式的进行轮询。
模拟弹出框问题
同一个页面,在H5上弹出对应的页面,在C++也需要弹出对应的页面。新建一个页面,H5使用layer弹出框嵌入页面的形式模拟弹出框。
function renewClick(){
layer.open({
move: false,
type: 2,
title: common.title("自动续费管理"),//自定义标题
maxmin: true,
shade: 0,
area: ['35rem', '25rem'], //'50rem', '35rem'最大尺寸
scrollbar: true,
content: ['renewManage.html'+'?random='+Math.random()],//renewManage
end: function(){
common.buryPoint(homeUrl,814,632);
}
});
}
父子页面通信
子页面调用父页面的方法传值window.parent.traffic(1),父页面定义方法接收
function traffic(){
layer.closeAll(); //关闭所有弹出框
layer.open({
move: false,
type: 2,
title: common.title("扫码支付"),
maxmin: true,
shade: 0,
scrollbar: true,
area: ['25rem', '22rem'], //'50rem', '35rem'最大尺寸
content: ['wxpay.html'],
})
}
https链接的兼容问题
服务器上所有的接口和图片http=>https(websock通信协议ws=>wss),不然会产生跨域问题,获取不到数据。
addHttps:function(source){
if(window.location.protocol=="https:"){
source = source.replace("http","https");
};
console.log("source123",source);
return source;
}
URL链接参数带中文字符的问题
encodeURI("中文字符")转码:%E4%B8%AD%E6%96%87%E5%AD%97%E7%AC%A6
decodeURI("%E4%B8%AD%E6%96%87%E5%AD%97%E7%AC%A6")解码:中文字符
URL地址遇到中文字符,就会进行encodeURI转码
interceptUrl: () => {
var url = window.location.search; //获取url中"?"符后的字串,包括"?"
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
移动端单页面应用的刷新问题
(1)不能使用状态管理模式来储存数据,可使用链接后面带参数的形式传值,也可以使用localstorage进行本地存储,注意:取到数据即使清除localstorage。
(2)路由的两种方式(history和hash),默认是history=>hash,history路由的方式https://www.jianshu.com/writer/zhu,服务器匹配不到/zhu报错404。hash路由https://www.jianshu.com/writer#zhu,服务器指向的总是根域名。切记存在刷新功能,使用hash进行路由。
微信支付不成功的问题
H5微信支付是在通过公众号配置回调地址,是根据referer地址进行操作。默认情况下referer指向本当前路径。禁止referer导致公众号未能匹配到当前路径,报错。存在第三方需要配置回调地址的时候,切记不要进行如下配置;
(1)如果页面中包含了如下 meta 标签,所有从当前页面中发起的请求将不会携带
(2)如果页面中包含了如下 meta 标签,则从当前页面中发起的 http请求将只携带 origin 部分(注:根据原文中的语境,我理解这里的 origin 是包含了 schema 和 hostname 的部分 url,不包含 path 等后面的其他 url 部分),而不是完整的 URL
image.png
历史纪录的问题
需求分析,扫码登陆后,回退直接到主界面,登陆扫码页面不产生历史纪录。
window.location.replace("myccount.html?login=1"); //跳转链接时,不记录
客户端默认IE7打开网页
添加头部信息,默认指定高版本浏览器打开。
edge浏览器localstorage.setItem()报错,超出存储范围
兼容方法,通过链接后面拼接参数的形式传递参数,getItem未取到值,就去取链接后面的参数。
文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文
文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作 导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释: cwy_init/init_123..._达梦数据库导入导出
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6
文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure
文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf