H5开发问题汇总

最近做了一个H5，感觉里面写到的内容比较实用，在此记录一下方便以后翻阅。

1、页面布局（缩放）

采用rem为主+px为辅使用。 设计稿缩放为750x1334或者640x960，注意 保持页面750x1334比例的同时，需要让设计师加上微信头部的那条黑色bar ，一般高度为88

<script>
    var count = 0;

    var baseWidth = 750,
        baseHeiht = 1334,  //1334-128
        baseFontSize = 100,
        newSize = 1,
        sacle = 1;

    var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),
        newSize = parseInt(sacle * 10000 * baseFontSize) / 10000;

    document.documentElement.style.fontSize = newSize + "px";
</script>

2、页面资源加载

    jQuery(document).ready(function($) {
        var ResourceLoader = (function(Config, Util, _, Backbone) {

            var ResourceLoader = function(opts) {
                this.files = opts.files;
                this.loadedCallback = opts.callback;
                this.filesLoaded = 0;
            };

            ResourceLoader.prototype.loadResource = function(url, callback) {
                if (url.indexOf('.png') > 0) {
                    var image = new Image();
                    image.onload = function() {
                        return callback(null, null);
                    };
                    image.src = url;
                    return;
                }

                var request = new XMLHttpRequest();
                request.open('GET', url, true);

                request.addEventListener('load', function() {
                    return callback(null, request.response);
                });
                request.addEventListener('error', function() {
                    var statusCode = request.status;
                    var statusText = request.statusText;
                    var error = new Error(statusText);
                    error.status = statusCode;
                    return callback(error, request.response);
                });
                request.send();
            };

            ResourceLoader.prototype.load = function() {
                var _this = this;
                for (var i = 0; i < _this.files.length; i++) {
                    var url = _this.files[i];
                    _this.loadResource(url, function() {
                        _this.filesLoaded += 1;
                        _this.loadedCallback(false, _this.filesLoaded, url);
                        if (_this.filesLoaded >= _this.files.length) {
                            _this.loadedCallback(true, _this.filesLoaded);
                        }
                    });
                }
            };

            return ResourceLoader;
        })();
        var fileList;

        fileList = [
            'images/loading.gif',
            'images/icon.png',
            'media/music.mp3'
        ];

        var fileLength = fileList.length;
        var loader = new ResourceLoader({
            files: fileList,
            callback: function(isDone, filesLoaded, url) {
                if (isDone) {

                    //成功
                    //do something

                } else {

                }
            }
        });

        loader.load();
    });

3、背景音乐自动播放

<!-- html -->

    <div id="music" class="on">
        <div class="fore1"></div><!-- Start -->
        <div class="fore2"></div><!-- Stop -->
        <audio src="media/music.mp3" autoplay="autoplay" id="audio" loop="loop"></audio> 
    </div>


<!-- js -->

// 音乐
function() {
var music = document.getElementById('music');
var audio = document.getElementById('audio');
audio.play();

music.onclick = function() {
    if (audio.paused) {
        audio.play();
        music.className = 'on';
    } else {
        audio.pause();
        music.className = '';
    }
}

// 音乐播放
function autoPlayMusic() {
    // 自动播放音乐效果，解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
        musicPlay(true);
        document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);

    // 自动播放音乐效果，解决微信自动播放问题
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
    var audio = document.getElementById('audio');
    if (isPlay && audio.paused) {
        audio.play();
    }
    if (!isPlay && !audio.paused) {
        audio.pause();
    }
}
autoPlayMusic();

4、背景音乐渐变

刚播放的时候，声音音量为0.01，然后1s加0.01，直到0.15的时候，就停止，清除计数器，做一个声音渐入的效果；

呵呵呵呵

别想了，乖乖改音频源文件吧！！

《Safari HTML5 Audio and Video Guide》一文说的很清楚

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

4、校验

手机验证

 
        // 手机验证
        function checkMobiles(theForm) {
            return /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(theForm);
        }
        function checkMobile() {
            $(".error_phone").hide();  //错误提示
            var mobile = document.getElementById("check_phone")//错误提示
            if ($.trim(mobile.value) == "") {
                $('.error_phone').show();

            }else if (!checkMobiles($.trim(mobile.value))) {
                $('.error_phone').show();

            } else {
                $('.error_phone').hide();
            }
        }

        $("#check_phone").on('change', function(e) {
            checkMobile();                                   //修改时 实时反馈
        });
        checkMobile();

名字验证

        function checkName() {
            $(".error_name").hide();  //错误提示
            var nameValue = document.getElementById("check_name");  //选择输入框
            var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）;—|{}【】‘；：”“'。，、？]");
            if (pattern.test($.trim($(nameValue).val()))) {
                $('.error_name').show();

            }else if ($.trim(nameValue.value) == "") {
                $('.error_name').show();

            }else if (nameValue.value.length > 10) {
                $('.error_name').show();

            }else if (nameValue.value.length < 2) {
                $('.error_name').show();

            }else {
                $('.error_name').hide();
            }
        }

        $("#check_name").on('change', function(e) {
            checkName();                                    //修改时 实时反馈
        });
        checkName();