您的位置：首页 > 移动开发

jsonP的实际应用，移动端web，京东手机移动端（开头）

2018-03-19 22:23 393 查看

1.百度地图开放平台jsonP的实际应用 http://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2
找到一个端口，把ak改成自己的密钥
<body>
<input type="button" id="btn" name="获取地区信息" value="获取地区信息">
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script> //引入jquery包
<script type="text/javascript" src="template-native.js"></script> //引入template包
<script type="text/template id="template">
<%for(var i=0;i<routes.length;i++) {%> //routes是来自于看console.log(data)输出的object里面想要的部分
<tr>
<td><%=routes[i].distance%></td> //routes是一个数组，里面装的是对象
<td><%=routes[i].duration%></td>
</tr>
<% } %>
</script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"http://api.map.baidu.com/direction/v2/transit?origin=40.056878,116.30815&destination=31.222965,121.505821&ak=自己的密钥",
dataType:"jsonp",
success:function(data){
console.log(data);
var routesdata = data.result[2]; //routes是object中的result中的第三个元素
var str = template('template',routesdata); //模版引擎
console.log(str);
$("body").append(str);
}
})
})
})

</script>

object可以成功输出，但是
Template Error
<filename>
template
<name>
Render Error
<message>
Template not found
是模版引擎有问题吗？（这个代码就写了1个小时，太慢）
2.移动端web（内核都是webkit）
1）视口属性viewpot（快捷键：mate:vp+tab,装了emmet插件）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width:一般都是设备的宽度，不需要给单位，一般
initial-scale:初始缩放值
minimum-scale/maximum-scale:允许用户的最小/大缩放值

user-scalable:是否允许用户进行缩放，默认no/false
2）快速出测试文字：lorem+tab默认100个，lorem 1000+tab
3)高亮效果：某些浏览器自带

-webkit-tap-highlight-color:transparent(透明的);/*清除点击高亮效果*/

4）盒子模型

-webkit-box-sizing: border-box;/*webkit内核兼容性写法*/    盒子大小不变，内容会变

content-box:内容不变，盒子大小撑开
5）input默认样式清楚：
在移动设备的浏览器中input标签一般会有默认的样式,通过

border=none

outline=none

无法去除,比如立体效果,3d效果等等

-webkit-appearance: none;

6）最小宽度，最大宽度

max-width: 640px;  /*在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

7）结构伪类选择器（没太看懂）
nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,我们可以限定在某一个类型上,语法如下E:first-of-type匹配同类型中的第一个元素E。
E:last-of-type匹配同类型中的最后一个元素E。
E:nth-of-type(n) 匹配同类型中的第n个元素E。
3.京东手机移动端（开头）
base.css 默认样式
*,::before,::after{
padding:0;
margin: 0;
font-size: 14px;
-webkit-tap-highlight-color:transparent;
-webkit-box-sizing:border-box;
}
input{
border: none;
-webkit-appearance:none;
}
a{
text-decoration: : none;
}
ul,ol{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::before,.clearfix::after,{
content: "";
display: block;
line-height: 0;
height: 0;
visibility: hidden;
clear: both;

}
index.html
<!DOCTYPE html>
<html>
<head>
<title>京东移动端</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> //移动端就要写
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css"> //引入css写在head里
</head>
<body>
<div class="jd_contain">
<div class="header">
<a href="javascript:void(0)" class="header_logo"></a>
<input type="searth" name="" class="header_search" placeholder='请输入内容'> //placeholder会让字体颜色灰色
<span class="header_glass"></span>
<a href="javascript:void(0)" class="header_login">登陆</a>
</div>
<div class="banner">
<ul class="banner_image"> //轮播图，第一张前面放最后一张，最后一张后面放第一张
<li><a href="#"><img src="images/l8.jpg"></a></li>
<li><a href="#"><img src="images/l1.jpg"></a></li>
<li><a href="#"><img src="images/l2.jpg"></a></li>
<li><a href="#"><img src="images/l3.jpg"></a></li>
<li><a href="#"><img src="images/l4.jpg"></a></li>
<li><a href="#"><img src="images/l5.jpg"></a></li>
<li><a href="#"><img src="images/l6.jpg"></a></li>
<li><a href="#"><img src="images/l7.jpg"></a></li>
<li><a href="#"><img src="images/l8.jpg"></a></li>
<li><a href="#"><img src="images/l1.jpg"></a></li>
</ul>
<ul class="banner_index">
<li class='current'></li> //current代表当前选中的样式
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

index.html
.jd_contain{
width: 100%;
}
.header{
width: 100%;
height: 40px;
position: relative;
background: rgb(201,21,35);

padding-left: 70px; //logo和login都是定位在header中，而input会随着浏览器的变宽而变宽，因此最好设 padding-right: 60px; 置为100%，这就需要把父盒子header左右两边撑开放logo和login
}
.header .header_logo{
height: 36px;
width: 60px;
background-image: url("../images/sprites.png");
background-position: 0 -103px;
background-repeat: no-repeat;
background-size: 200px 200px; //iphone6是视网膜屏幕，即分辨率：像素比=1:2，因此图片需要缩小
position: absolute; iphone6plus是1:3
top: 2px;
left: 5px;
}
.header_search{
width: 100%;
height: 30px;
border-radius: 15px;
padding-left: 10px;
margin-top: 5px;
}
.header_login{
position: absolute;
right: 10px;
top: 0px;
line-height: 40px;
color: white;
font-size: 17px;
}
.header_glass{ //搜索框中的放大镜用定位定到input中
background-image: url('../images/sprites.png');
background-repeat: no-repeat;
background-position: -60px -109px;
background-size: 200px 200px;
position: absolute;
left: 75px;
top:10px;
}
.banner{ //轮播图中的父盒子，宽度和屏幕一样宽，子盒子ul超出的部分用overflow隐藏
width: 100%;
overflow: hidden;
position: relative;
}
.banner_image{ //一共8张图片，第一张和最后一张前后各一张，一共10张图片，因此宽度是父盒子的十倍
width:1000%;
}
.banner_image li{ //li的父盒子是ul，因此它的宽度只有父盒子的十分之一
float: left;
width: 10%;
}
.banner_image li a{ //a和img都是行内元素，不能设置宽高，要转成块级元素
display: block;
width: 100%;
}
.banner_image li a img{
display: block;
width: 100%;
}
.banner_index{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -44px; //定位的left需要居中，先走50%，再往左走盒子的一半
}
.banner_index li{
float: left;
width: 6px;
height: 6px;
border-radius: 50%;
border:solid 1px white;
margin-left: 5px;
}
.banner_index li.current{
background-color: white;

}
今天总的来说状态还不错，就是敲代码太慢，而且第一个例子废了太多时间，导致最后一个例子都没有好好写。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsonp web移动端京东移动端

相关文章推荐

新的分享

章节导航