项目简介

公司最近开发会员体系项目，前端利用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 标签，所有从当前页面中发起的请求将不会携带 <meta name="referrer" content="never">
（2）如果页面中包含了如下 meta 标签，则从当前页面中发起的 http请求将只携带 origin 部分（注：根据原文中的语境，我理解这里的 origin 是包含了 schema 和 hostname 的部分 url，不包含 path 等后面的其他 url 部分），而不是完整的 URL <meta name="referrer" content="origin">

image.png

历史纪录的问题

需求分析，扫码登陆后，回退直接到主界面，登陆扫码页面不产生历史纪录。

<meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
window.location.replace("myccount.html?login=1");  //跳转链接时，不记录

客户端默认IE7打开网页

添加头部信息，默认指定高版本浏览器打开。

<meta http-equiv="X-UA-Compatible" content="IE=10">

edge浏览器localstorage.setItem()报错，超出存储范围

兼容方法，通过链接后面拼接参数的形式传递参数，getItem未取到值，就去取链接后面的参数。