市场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之后。
网友评论