记H5活动遇到的坑

从项目转型到H5兼项目，期间做了一些H5，此处记录下做H5遇到的一些坑。

一 微信返回上一页，IOS系统不能刷新，导致屏蔽分享无效

解决方法

IOS下

1
2
3
4
5
6
7
8
9
10

var isPageHide = false;
window.addEventListener('pageshow', function () {
    if (isPageHide) {
        window.location.reload();
    }
});
window.addEventListener('pagehide', function () {
    isPageHide = true;
});

Android：

1
2
3
4
5
6
7
8
9
10
11

//需要被刷新的页面放上以下代码
$(function () {
    var needRefresh = sessionStorage.getItem("need-refresh");
    if(needRefresh){
        sessionStorage.removeItem("need-refresh");
        location.reload();
    }
});
//跳转的页面放上以下代码
sessionStorage.setItem("need-refresh", true);

二 视频音频类

1 IOS下，视频音频使用“preload”属性，无法自动触发预加载

  • 解决方法：
    1
    2
    3
    4
    document.addEventListener('WeixinJSBridgeReady', function () {
        //加载
        document.querySelector('#video-1').$firstVideo.load();
    }, false);

2 如何在播放之前预加载整个html5视频

可以查看 http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/，
第四个方法不错。

3 如果视频尺寸不友好，导致视频在不同的h5被横向拉伸或者纵向拉伸

  • 解决方法：
    • 方法一：最好是让视频制作方重新修改尺寸，接近移动端的尺寸，例如 667 * 1280 （减去微信顶部栏）
    • 方法二：为了保证视频等比例，只能舍弃一点视觉效果了，该方法可能导致视频左右两边黑边或者下方黑色。按照视频的比例去处理。如果 【当前视野窗口的宽度/当前视野窗口的高度】 大于 【视频原尺寸的宽度/高度】，则以高度为参考值缩放， 否则以宽度为参考值缩放
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      var radio                        = 1080/1920 //视频原尺寸的宽度/高度
      var deviceRadio                  = winWidth/winHeight //前视野窗口的宽度/当前视野窗口的高度

      if (deviceRadio > radio) {
          //以高度为参考值缩放
          document.documentElement.style.fontSize = (winHeight * radio) / 750 * 100 + 'px'; //重新计算REM
          $videoNode.style.width                  = winHeight*radio + 'px'; //重新计算宽度
          $videoNode.style.height                 = winHeight + 'px'; //重新计算高度
      } else {
          //以宽度为参考值缩放
          $videoNode.style.width = winWidth + 'px';
          $videoNode.style.height = winWidth/radio + 'px';
      }

4 关于全屏幕，IOS下无法全屏，安卓可以通过设置全屏

1
2
3
4
5
6
7
8
9
10
<video
    preload="auto"
    x5-video-player-type="h5"
    x5-video-orientation="portraint"
    playsinline="true"
    x5-playsinline="true"
    webkit-playsinline="true"
    x5-video-player-fullscreen="true"
    fullscreen="true"
    ></video>

三 微信摇一摇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var SHAKE_THRESHOLD = 800;
    var last_update = 0;
    var x= 0;
    var y= 0;
    var z= 0;
    var last_x= 0;
    var last_y= 0;
    var last_z= 0;
    var time = 0;

    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
    alert('本设备不支持devicemotion事件');
    }

    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();

        if ((curTime - last_update) > 150) {
            var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

            xDom.innerHTML = x;
            yDom.innerHTML = y;
            zDom.innerHTML = z;
            if (speed > SHAKE_THRESHOLD && (x * last_x < 0 || y * last_y < 0 || z * last_z < 0)) {
                ++time;
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }