H5 页面开发功能点：功能1.背景音乐播放htmljs控制播放开关功能2.点击音效功能3.图片预加载功能点4.动画处理功

功能点：

功能1.背景音乐播放

html

    <audio autoplay preload="auto" id="playAudio">
      <source src="/pub_statics/seventh/music.mp3?v=1">
    </audio>
    <button class="controlMusic"></button>

js 控制播放开关

  // 监听音乐播放完毕，再重新播放
  var audio = document.getElementById('playAudio');
  audio.addEventListener('ended',function() {
    audio.load()
    audio.play();
  },false);
  // chrome新版本策略导致无法自动开始播放，设置两个监听事件解决
  $('body').one('touchstart', function () {
    $('.controlMusic').removeClass("musicpause")
    $('.controlMusic').addClass("musicplay")
  });
  $('body').one('touchend', function () {
    audio.play();
    $('.controlMusic').removeClass("musicpause")
    $('.controlMusic').addClass("musicplay")
  });
  
   $('body').one('click', function () {
    audio.play();
    isMusicPlay = true;
    $('.controlMusic').removeClass("musicpause")
    $('.controlMusic').addClass("musicplay")
  });
  // 控制开关
  $(".controlMusic").on('click', function (e) {
    e.stopPropagation()
    if (isMusicPlay) {
      audio.pause();
      $('.controlMusic').removeClass("musicplay")
      $('.controlMusic').addClass("musicpause")
    } else {
      audio.currentTime = 0;
      audio.play();
      $('.controlMusic').removeClass("musicpause")
      $('.controlMusic').addClass("musicplay")
    }
  })

功能2.点击音效

function iconAudioPlay() {
  var audio = new Audio(isOnline ? "/pub_statics/seventh/icon.mp3" : './icon.mp3');
  audio.volume = 0.2
  audio.play();
}

功能3.图片预加载

当前实现的策略： 除了首屏，其他页面设置"display: none"
// 第一场景加载图片
let base_url = '/pub_statics/seventh/images/1/'
$.imgpreload(ImgList.map(function (item) {
    return base_url + item;
  })
// 第一场景剩余图片加载（一般在首屏加载完成之后）
function aniImgLoad() {
  let baseUrl = isOnline ? '/pub_statics/seventh/images/animate/' : `./images/animate/`
  let baseUrl_1 = isOnline ? '/pub_statics/seventh/images/list/' : `./images/list/`
  let roundUrl_1 = isOnline ? '/pub_statics/seventh/images/4/' : `./images/4/` 
  let images = ImgListAni.map(function (item) {
    return baseUrl + item;
  }).concat(ImgTeamList.map(function (item) {
    return baseUrl_1 + item;
  })).concat(ImgRound1.map(function (item) {
    return roundUrl_1 + item;
  }))
  $.imgpreload(images, function () {})
}

功能点4.动画处理

问题点1：首屏动画，出现末尾抖动，或者在ios无法正确到达终点。解决方法：使用过渡，代替animition

问题点2：多个动画场景拼接解决方法：添加类名，替换元素的状态和animation参数

问题点3：特殊动画的进出场效果：添加贝塞尔曲线贝塞尔曲线

功能点4.数据渲染

使用：模板字符串

###功能点5 三星手机"三星galaxy8"屏幕适配

// 设计稿： 750 （2X）, 设计要求最大宽度： 414
(function (){
    var setFontSize = function () {
      setTimeout(function () {
        var fontSize = ((document.documentElement.clientWidth > 414 ? 414 : document.documentElement.clientWidth ) / 750) * 40;
        document.documentElement.style.fontSize = fontSize + 'px';
        var realFontSize = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'))
        if (Math.round(fontSize * 10000) !== Math.round(realFontSize * 10000)) {
          document.documentElement.style.fontSize = fontSize * (fontSize / realFontSize) + 'px'
        }
      }, 100)
    }
    setFontSize();
    window.addEventListener('resize', setFontSize);
    window.addEventListener('orientationchange', setFontSize);
  }())

功能点6 数据请求

使用 jquery $.ajax

$.ajax({
    url: '/km_java_api/outer/anniversary/data/2019',
    success: function (res) {
      if (res.status === 4001) {
        window.location.href= '/login'
      }
      if (res.data.person_info) {
        personInfo = res.data.person_info
      }
      rander()
    }
  });

使用http-server 本地代理，解决跨域

// 服务器地址： http://10.240.***.****:8002
http-server -p 8080 -P http://10.240.***.****:8002

功能点6 css预处理

使用scss: scss --watch ./scss:./style

功能点7 js编译适配IE

使用： babel babel

// pageage.json配置和相关命令
 "babel": {
    "presets": [
      ["@babel/preset-env"]
    ],
    "plugins": [  ]
  },
  "devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel 1.js --out-file build-1.js",
    "allbuild": "babel js --out-file build-all.js",
    "dirbuild": "babel js --out-dir lib",
    "dirsomebuild": "babel js --out-dir lib --ignore 'js/**/*2.js'"
  },

功能点8 场景切换

实现方式：动态增减类名

功能点9 一键截图保存本地

实现方式：

第一步，把网页保存为Canvas画布，借助于html2canvas库，html2canvas.hertzen.com/

第二步，把第一步中生成的canvas保存成图片

代码搞没了

H5 页面开发