H5 page development

Function points:

Function 1. Play background music

html

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

Js controls the play switch

Var audio = document.getelementById ('playAudio');
  audio.addEventListener('ended'.function() {
    audio.load()
    audio.play();
  },false); // The new version of Chrome does not automatically start playback, set two listening events to resolve $('body').one('touchstart'.function() {$('.controlMusic').removeClass("musicpause"The $()'.controlMusic').addClass("musicplay")}); $('body').one('touchend'.function () {
    audio.play();
    $('.controlMusic').removeClass("musicpause"The $()'.controlMusic').addClass("musicplay")}); $('body').one('click'.function () {
    audio.play();
    isMusicPlay = true;
    $('.controlMusic').removeClass("musicpause"The $()'.controlMusic').addClass("musicplay")}); // switch $(".controlMusic").on('click'.function (e) {
    e.stopPropagation()
    if (isMusicPlay) {
      audio.pause();
      $('.controlMusic').removeClass("musicplay"The $()'.controlMusic').addClass("musicpause")}else {
      audio.currentTime = 0;
      audio.play();
      $('.controlMusic').removeClass("musicpause"The $()'.controlMusic').addClass("musicplay")}})Copy the code

Function 2. Click sound

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

Function 3. Image preloading

Current implementation strategy: except the first screen, other page Settings"display: none"// The first scene loads the imagelet base_url = '/pub_statics/seventh/images/1/'
$.imgpreload(ImgList.map(function (item) {
    returnbase_url + item; }) // The remaining images of scene 1 are loaded (usually after the first screen is loaded)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() {})}Copy the code

Function point 4. Animation processing

Problem point 1: First screen animation, end shake, or failure to reach the end on ios. Solution: Use transitions instead of animition

Solution: Add the class name and replace the element state and animation parameters

Problem point 3: Entry and exit effects of special animations: Adding Bezier curves Bezier curves

Function point 4. Data rendering

Use: template string

Samsung mobile phone “Samsung galaxy8” screen adaptation

// Design draft: 750 (2X), maximum width: 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); } ())Copy the code

Function Point 6 Data request

Using 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()
    }
  });
Copy the code

Use http-server local proxy to resolve cross-domain

/ / the server address: http://10.240. * * *. * * * * : 8002 HTTP server - 8080 - p p http://10.240. * * *. * * * * : 8002Copy the code

Function 6 CSS preprocessing

SCSS –watch./ SCSS :./style

Function point 7 JS compilation for IE

Use: Babel Babel

// pageage.json configuration and related commands"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'"
  },
Copy the code

Function Point 8 Scenario switch

Implementation: dynamically add or subtract class names

Function 9 One-click Screenshot saved locally

Implementation method:

First step, save the web page as a Canvas Canvas, with the help of html2Canvas library, html2canvas.hertzen.com/

The second step is to save the canvas generated in the first step as a picture

I lost the codeCopy the code

A link to the

Image resource compression SCSS Usage guide