最近有一个需求，需要在页面中启动本地的app，这里的app指的是移动端的app，如果已经安装，则直接启动，如果没有安装，则跳转到下载页面。

判断本地是否已安装应用

我们需要判断本地是否已经安装了app，然后根据安装情况，我们做不同的处理。判断是否安装过的思路是我们直接用js去启动应用，看是否会有响应。

启动本地应用

启动本地的应用往往有一个启动协议，app的启动不同于网页，但是又比较类似。

我们先看看app的启动协议（例如微信）

1
2

协议://(后面是需要的参数)
weixin://

知道了启动入口以后，启动本地app就方便多了，我们直接使用js跳转到对应路径即可。

1
2
3
4

// 第一种形式：窗口跳转到对应地址
window.location = 'your app url';
// 或者
document.location.href = 'your app url';

第二种形式，窗口打开对应路径

1

window.open('your app url', '_self');

第三种形式，使用iframe操作打开。（这种方式网上很普遍，但是我没试验成功）

1
2
3
4
5
6
7

var ifr = document.createElement('iframe');
ifr.src = config.app_url + window.location.search;
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function(){
  document.body.removeChild(ifr);
},2000)

使用上面三种方式，在本地已经安装app的情况下，都可以正常运行，但是如果没有安装的话，前两种方式会弹窗提示路径无效，对于用户体验不太友好，所以可以考虑使用iframe形式。

跳转到下载地址

当本地没有安装应用时，我们可以考虑跳转到下载地址，让用户下载，android和ios的下载路径一般不同。下载应用相对来说比较容易。

android端下载

1

window.location = 'xxx.apk';

ios端下载通常是跳转到app store对应的目录下

1

window.location = 'https://itunes.apple.com/cn/app/idxxx';

实际场景结合

实际场景中，我们需要先判断是否安装，安装则启动，没有安装则跳转到下载页面。

1
2
3
4
5
6
7

window.location.href = 'your app url';
window.setTimeout(function() {
 var timeOutDateTime = new Date();
 if (timeOutDateTime - loadDateTime < 2000) {
  window.location = 'app download url';
 }
}, 25);

这里会有2s的判断，未启动，那么再2s内会跳转到下载页面。

图片轮播组件

现在很多网站的主页中都会有图片轮播，图片轮播组件主要包含以下几部分：大图，缩略图，大图两侧的左右切换按钮，有可能还会在缩略图两侧有多组切换按钮。我们通常先实现效果，然后再通过js实现切换的交互逻辑。以下是我在实际编写轮播组件时总结的一些心得。

图片水平垂直居中等比例显示

轮播中显示的图片跟图片容器的尺寸比例不一定相同，有可能更‘胖’或者更‘瘦’，为了达到更好的视觉效果，我们保证图片可以在容器中完全显示，也就是始终按照超出比例的边来缩放图片。

要达到这个效果，最佳的方式是通过css来实现。

html代码

1

<div class="img"></div>

css

1
2
3
4
5
6
7
8

.img {
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: contain; // 关键
  background-repeat: no-repeat;
  transition: background-image 0.5s linear;
}

background-size: contain可以保证背景图片始终全部展示到容器中，而background-position: center保证图片可以居中显示。

使用css的这两个属性是实现该效果最简单的方式，如果我们想要使用js来实现类似效果，我们需要首先获取图片的长宽比例，然后手动设置按照哪一边来缩放图片比例。
html

1
2
3

<div>
  <img src="" class="img">
</div>

对应的css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

div {
  width: 100px;
  height: 100px;
  position: relative;
}
// 图片相对比较宽的情况
img.fat {
  width: 100%;
}
img.thin {
  height: 100%;
}
// 接下来保证图片垂直水平居中
img {
  position: absolute;
  left: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

我们使用transform让图片进行平移自身的50%，对于未知宽高的元素建议采用这种方式，对于已知宽高的情况，我们可以采用margin的形式。

1
2
3
4
5
6
7

img {
  position: absolute;
  left: 50%;
  width: 100px;
  heigth: 50px;
  margin: -25px 0 0 -50px;
}

图片切换动画

轮播中图片在切换时会有一些特效，常见的有平移，淡入淡出等。

平移

平移我们可以使用元素的left,margin属性。最理想的方式是我们使用js来控制属性的值，通过transition来确定过渡效果。

1
2
3
4
5
6

div {
  position: absolute;
  left: 0;
  top: 0;
  transition: left 1s linear;
}

当使用js修改了相应属性后，会执行相应的过渡动画效果。除了使用css来控制动画外，也可以全部使用css来实现。这里推荐使用requestanimateframe，使用这个方法，可以保证流畅的执行动画。

1
2

需要注意的是，为了保证元素的平移效果，首先需要保证各元素水平排列，可以使用两种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 行内块元素
.father {
  // 保证不换行
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap; 
}
div {
  display: inline-block;
}
// 浮动元素
div {
  float: left;
  width: 1000000px; // 足够大，保证不折行
}

这里涉及到常见的水平垂直居中的一些技巧问题。我们做一个总结。

元素水平居中的方式

行内元素设置text-align

1

text-align: center;

块级元素的水平居中

1

margin: 0 auto;

定位元素居中

1
2
3
4
5
6
7
8
9

// 已知宽度
width: 100px; 
position: absolute;
left: 50%;
margin-left: -50px;
// 未知宽度情况下居中
position: absolute;
left: 50%;
transform: translate(-50%, 0);

元素垂直居中的方式

行高方式

1
2

height: 100px;
line-height: 100px;

行内元素

1
2

display: inline;
vertical-align: middle;

借助表格属性

1
2

dispaly: table-cell;
vertical-align: middle;

定位元素

1
2
3
4
5
6
7
8
9

// 已知高度
height: 100px; 
position: absolute;
top: 50%;
margin-top: -50px;
// 未知高度情况下居中
position: absolute;
top: 50%;
transform: translate(0, -50%);

video标签简介

html5中的video的标签，使得页面中使用视频变得简单了很多，与引入图片的方式类似，我们使用video标签指定src属性即可引入视频。

video用法

1

<video src="test.mp4"></video>

video常见属性

video标签有一些常见的属性。

属性的兼容性和值的选择

poster属性

按照html5的标准，支持video标签的浏览器，如果poster没有设定任何值，那么会默认将视频的第一帧作为poster封面，但是大多数浏览器并没有取第一帧作为poster封面(ios下可以)。最好给poster设置一个默认值或者可以通过后端截取第一帧的形式传递给前端作为poster。使用poster属性设置封面可能会造成封面图片按照播放器的大小拉伸等情况，这时候我们需要指定对应的css属性。

1
2
3

video {
  object-fit: cover;
}

使用这种方式，也可以保证视频不至于按照播放器的尺寸进行拉伸等。

设置视频的默认封面，除了指定poster值以外，也可以通过css的background属性来设置，使用css设置的好处在于不会出现封面图片的比例失调等情况。

1
2
3
4
5
6
7
8
9
10

video {
  background-image: url('test.jpg');
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}

如果确实想使用视频的第一帧作为视频的封面，还有一种不太完美的方案。视频默认没有进入到第一帧画面，我们可以考虑手动播放再停止，这样对于很多android端的浏览器可以看到效果，这里有一个重要的前提，浏览器只有在用户至少有一次交互后，play()、pause()等方法才可以生效。因此还是需要给document绑定事件。

1
2
3
4
5

let video = document.getElementById('xxx');
document.addEventlistener('touchstart', function() {
  video.play();
  video.pause();
});

autoplay属性

autoplay属性用来告知浏览器自动播放视频，但是各手机端的浏览器出于安全等的考虑，并不会在页面加载完成后开始自动播放。同时，我们试图通过js来控制播放play()也是失效的。浏览器必须确定用户已经和页面发生交互以后，play()方法才可以生效。

1
2
3
4

let video = document.getElementById('xxx');
document.addEventlistener('touchstart', function() {
  video.play();
});

preload属性

preload有这么几个值，空值、none、metadata、auto，对于控制，会默认赋值auto，会尽可能的加载整个视频，none则不会加载任何数据，metadata会加载必备的视频数据，例如视频的实际宽高，时长等。我们可以根据需要选择合适的值。

视频的宽高值

我们在css中或者直接指定的height和width实际为video标签也就是视频播放器的高宽，而视频的实际宽高是通过video的videoHeight和videoWidth获取。

1
2
3

var video = document.getElementById('xxx');
var videoHeight = video.videoHeight;
var videoWidth = video.videoWidth;

看起来是不是挺简单，但是实际上却有很多浏览器获取不到这个值，测试了下，在UC、IOS下是可以访问到的，而在好多android浏览器下无法获取，读取到的值为undefined。假如我们像让视频100%宽度，高度自适应，我们直接设置css属性即可。

1
2
3
4

video {
  width: 100%;
  height: auto;
}

如果我们不想通过css来控制，通过js来让视频100%显示，那么我们就需要获取videoWidth和videoHeight来获取，理论上，我们在loadedmetadata事件执行回调中可以拿到这个值，等比缩放就可以了，如果获取不到，我们使用css控制视频居中显示。

1
2
3
4
5
6
7
8
9

var video = document.getElementById('xxx');
video.addEventlistener('loadedmetadata', function(event){
	var videoHeight = event.target.videoHeight;
	if (videoHeight) {
		// 调整播放器的宽高，以保证和视频实际宽高一致。
	} else {
		// 设置object-fit属性值为cover
	}
});

使用video标签的时候，videoWidth和videoHeight获取有兼容问题，我们可以通过css来兼容处理，保证最好的视觉显示，可以通过100%来自动比例缩放，而如果播放器固定大小时，我们通过object-fit控制视频居中显示。

android端video播放后层级提高

移动端使用video引入视频后，当播放时，video会默认将层级调整至最高，从而覆盖别的高层级。
这个问题暂时还没有很好的解决方案。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment