手机版H5开发--收集大神们的笔记

1、关于单位的选择：（update 20180820）

　　使用rem，以32px为单位；有时候pt展示和设计稿不符合。

-------------------------------------------------弃用-------------------------------------------------------------
    菜鸟教程的解释：http://www.runoob.com/w3cnote/px-pt-em-convert-table.html
    我的想法：
        px(像素)  
        pt(相对于px，不同的分辨率显示的px不同，便于响应式开发)  
        em和rem：UI和实际效果差距太大
    默认字体：小四号    12pt    16px    1em

--------------------------------------------------------------------------------------------------------------------

2、宽高的想法：（update 20180820）

　　html设置，采用响应式设备模式

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

-------------------------------------------------合并-------------------------------------------------------------
    <meta name="viewport" content="width=device-width">    宽度设置为设备的实际宽度
    100%;    
    不用hight，因为高度太固定了不好响应式开发，高度用padding撑开

--------------------------------------------------------------------------------------------------------------------

3、资源调用格式：
   

    <link rel="stylesheet"href="base.css" type="text/css" />   
    <link rel="shortcut icon"href="images/favicon.ico" type="image/x-icon"/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

4、H5页面的下滑触发代码：
    找了很多代码，我用的这个，简单方便
 

  /*下滑触发条件*/
        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight === scrollHeight) {
                getInfo();//这个就是下滑触发要执行的函数
            }
        });

5、浏览器判断：（update 20180820）

 if (/MicroMessenger/i.test(navigator.userAgent)) {
       //微信浏览器
    } else {
       //非微信浏览器
    }

-------------------------------------------------拓展-------------------------------------------------------------
    找了很多代码，但是有的兼容性不够，我用的这个
    /*判断微信页面和浏览器--*/---   /i  正则表达式就是忽略大小写的意思
        $(function(){
                if(/android/i.test(navigator.userAgent)){
                document.write("This is Android'browser.");//这是Android平台下浏览器
            }
            if(/(iPhoneiPadiPodiOS)/i.test(navigator.userAgent)){
                document.write("This is iOS'browser.");//这是iOS平台下浏览器
            }
            if(/Linux/i.test(navigator.userAgent)){
                document.write("This is Linux'browser.");//这是Linux平台下浏览器
            }
            if(/Linux/i.test(navigator.platform)){
                document.write("This is Linux operating system.");//这是Linux操作系统平台
            }
            if(/MicroMessenger/i.test(navigator.userAgent)){
                document.write("This is MicroMessenger'browser.");//这是微信平台下浏览器
            }
        }

--------------------------------------------------------------------------------------------------------------------

6、页面刷新：
    找了一个函数reload();这个可以解决当前页面的刷新
    但是我需要的是苹果手机微信端的“返回”和安卓手机的设备返回的时候的刷新，找了设备监听事件，但是还是没有解决我的问题，后来发现了这个函数：
    完美地解决了我的问题，这个函数站在页面的角度，而不是设备的角度，就不必考虑不可控的因素了
     

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

7、返回按键监听：（感觉不是很好用，有时候只执行一次）

<script>
    //monitor back btn
    pushHistory();
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"    };
        window.history.pushState(state, "title", "#");
    }
    window.onpopstate = function() {
      //触发返回键的时候执行
    };
    //end
</script>

8、页面css和js添加版本号

$("link,script").each(function(){
                var t=Math.random().toFixed(4);
                if($(this).attr("src")){
                    var $src=$(this).attr("src");
                    $(this).attr("src",$src+"?v="+t)
                }else if($(this).attr("href")){
                    var $href=$(this).attr("href");
                    $(this).attr("href",$href+"?v="+t)
                }
            })

9、金额大小写展示

function DX() {
        var n = $("#bigInput").val();
        var bigData;
        if (!/^(0|[1-9]d*)(.d+)?$/.test(n)) {
            bigData = "数据非法";
        } else {
            var unit = "仟佰拾亿仟佰拾万仟佰拾元角分", str = "";
            n += "00";
            var p = n.indexOf('.');
            if (p >= 0)
                n = n.substring(0, p) + n.substr(p + 1, 2);
            unit = unit.substr(unit.length - n.length);
            for (var i = 0; i < n.length; i++)
                str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
            bigData = str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(壹拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
        }
        $("#bigData").text(bigData);
    }

10、随机密码

　　len随机长度

 function randomPWD(len) {
        var str = "",
            arr1 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
            arr2 = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

        for (var i = 0; i < len/2; i++) {
            pos = Math.round(Math.random() * (arr1.length - 1));
            str += arr1[pos];
        }
        for (var i = 0; i < len/2; i++) {
            pos = Math.round(Math.random() * (arr2.length - 1));
            str += arr2[pos];
        }
        return str;
    }