tv端h5_H5在三端开发遇到的问题（TV/PC/MOBILE）

项目简介

公司最近开发会员体系项目，前端利用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未取到值，就去取链接后面的参数。