手机版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"> 宽度设置为设备的实际宽度
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; }
