H5屏幕适配，数据请求

市场APP原生与h5混合开发的项目越来越多，对于一个iOS开发者而言，掌握一定的前端开发常识还是有必要的，咱们今天就来说说，H5怎么做各种移动端手机适配，然后又怎么向服务器发起数据请求的。

一、H5屏幕适配

首先你得创建一个js文件，姑且命名为mobile.js。
然后编辑内容：

function resize(){

  //UI设计师图的尺寸宽度
  var dw=750;
  //屏幕宽度
  var cw=document.documentElement.clientWidth;
  console.log("当前屏幕宽度"+cw);
  //一个rem=100px,不同的屏幕会根据屏幕的比例系数来变化
  var rem=cw/dw*100;
  //最小屏幕设置,安卓最小屏幕宽度240px
  if(rem<=32){
      rem=32;
  }
  document.documentElement.style.fontSize=rem+"px";
}
resize();
window.onresize = function(){
  resize();
}

然后在需要适配的HTML中用<script></script>标签引入即可。单位不再用px，统一用rem即可。同时HTML的head标签里还得添加几句代码：

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1 user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" >
<script src="js/mobile.js"></script>

二、JQuery+ajax网络数据请求。

在编写代码之前，先给大家说几个注意事项，一般前端的数据请求都是利用JQuery，因为JQuery是对js的封装框架，数据请求也不用像js那样写那么多代码，所以一般需要下载一个JQuery文件。下载地址：http://www.jq22.com/jquery-info122，可以任选一个版本。

• 先引入JQuery文件，然后在script标签里写以下代码。

 $.ajax({
    //指定请求类型
    type:"get",
    //请求地址
    url:"这儿填写你们服务器的URL",
    //服务器返回值类型
    dataType: 'json',
    //传给服务器的参数
    data: {
        page:1,
        type:0
    },
    //成功回调
    success:function(data){
        console.log(data);
    }
});

• 还有一个注意点：大多数情况下，我们都希望能够利用浏览器调试服务器给我们的接口，我们在本地浏览器请求，这个时候，会遇到一个跨域的问题。

  
  2319256-57ba8dd19ffebf4b.png

那怎么解决呢？请参考：https://www.jianshu.com/p/2db73311fcbe

三、数据请求的封装，以及js的外部调用

• 一般情况下，我们经常会想把很多公共的类放在一个配置文件里，就像iOS中的prefix文件，那么在js中怎么做呢？
  新建一个js文件。编辑以下代码：

  //引入网络数据请求js文件
  document.write("<script language='javascript' src='NetTool/htpp-request.js'></script>");
  //记得引入文件目录时，要记得包含文件夹
  document.write("<script language='javascript' src='JQuery/jquery-3.1.1.min.js'></script>");
  

• 因为js是一门弱语言，所以只要你在同一个HTML中引入了不同的几个js文件，那么这几个js文件的方法就可以互相调用，这一点不像iOS，在某个类调用外部类时，必须导入头文件，js是在onload之前就已经把你在HTML中导入的js文件都编译了一遍，同时因为它是弱语言，执行顺序由上而下，所以引用顺序最好按照顺序来，比如你要用到jQuery，和一个本地HTML，那么假如你要在HTML中用jQuery，引用顺序最好在jQuery之后。