引言

最近一直参与公司开发公众号，关于项目实施平台PC端简化为微信公众号，主要架构为前台H5，使用时的微信的WeUI的SDK，后台就是现在流行的SpringMVC+Mybaties，参与了全程开发，开发过程中也遇到了不少的问题，现在记录下来，希望以后能够用得到。

HTML页面之间传值

JSP之间传值已经很熟悉，HTML之间传值是通过解析URL获取所需参数。

1
2
//URL传值
URL + "?logId=" + logId;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//获取所需参数
var hrefInfo = getUrlVars(window.location.href);
	if (hrefInfo.logId && hrefInfo.logId != "undefined") {
		fillData(hrefInfo.logId);
		logId = hrefInfo.logId;
	} else {

}

// 得到url中的参数
function getUrlVars(hrf) {

	var vars = [], hash;
	var locationHref = !hrf ? window.location.href : hrf;
	locationHref = locationHref.replace(/#/g, "");

	if (locationHref.indexOf('%') > 0) {
		locationHref = unescape(locationHref);
	}
	
	var hashes = locationHref.slice(locationHref.indexOf('?') + 1).split('&');
	for ( var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

JS、JQuery获取各种屏幕的高度和宽度

在移动端经常会用到获取屏幕的高度和宽度，在这里总结一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
Javascript:
document.body.clientWidth				//网页可见区域宽
document.body.clientHeight				//网页可见区域高
document.body.offsetWidth (包括边线的宽)	//网页可见区域宽
document.body.offsetHeight (包括边线的高)	//网页可见区域高
document.body.scrollWidth				//网页正文全文宽
document.body.scrollHeight				//网页正文全文高
document.body.scrollTop					//网页被卷去的高
document.body.scrollLeft				//网页被卷去的左
window.screenTop					    //网页正文部分上
window.screen.width						//屏幕分辨率的宽
window.screen.availHeight				//屏幕可用工作区高度
window.screen.availWidth				//屏幕可用工作区宽度
1
2
3
4
5
6
7
8
9
10
11
12
JQuery:
$(document).ready(function(){
alert($(window).height());				 //浏览器当前窗口可视区域高度
alert($(document).height()); 			 //浏览器当前窗口文档的高度
alert($(document.body).height());		 //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); 				//浏览器当前窗口可视区域宽度
alert($(document).width());				//浏览器当前窗口文档对象宽度
alert($(document.body).width());		//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

微信浏览器缓存清理

微信浏览器缓存一直都是相当恶心的存在，只要页面加载，那么静态页面就会被缓存，通过Google和百度找到了以下两种方法：

设置HTTP头部

通过这只HTTP头部禁止浏览器缓存，效果没有达到要求，不建议使用

Android下可在微信中打开http://debugx5.qq.com清除微信缓存。

1
2
3
4
5
6
7
8
9
10
11
<html manifest="IGNORE.manifest">

  
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="shortcut icon" href="../../view/images/favicon.ico"
	type="image/x-icon" />

更新版本号

HTTP头部禁止缓存不能用，就只能每次都更新版本号(加随机数)来达到自己的要求了。

使用SeaJs拦截所有.js和.css并在尾部加上随机数。

引入SeaJs

1
<script src="../../util/sea.js"></script>

配置seajs_config.js

需要配置seajs_config.js全局变量，每一个HTML页面都要引入，关于更多SeaJs配置http://yslove.net/seajs/

1
2
3
4
5
6
7
8
9
10
11
var time = new Date().getTime();
var sea_config = {
	"base":"/",				//web发布路径
	"debug":"true",				//2:每次从后台获取新的js,true:console出bug,false:默认
	"charset":"utf-8",								//字符集
	preload: ["util/jquery-1.8.0.min.js"],	//预加载jquery
	map: [                                           //配置映射，用来版本更新强制浏览器刷新
        ['.js','.js?version=' + time],
        ['.css','.css?version=' + time]
	]
};
1
2
3
4
5
//HTML页面引入
<script src="../../config/seaConfig/seajs_config.js"></script>
<script>
	seajs.config(sea_config);
</script>

Ajax请求缓存

在编码期间，因为有个角色是查看所有项目且数据量也比较大，所以把Ajax请求方式从POST改为了GET，结果就发现Ajax请求被缓存，只有第一次查询有效，其后全部是从缓存中取，查询资料后才发现是POST改为GET引起的

解决方法一

1
2
3
4
5
6
7
8
9
10
//ajax get请求时比较简单 只需将cache设置为false就好
	$.ajax({  
           type: 'get',//get请求时  
           url: '........',  
           cache: false,//不缓存  
           data: { },  
           success: function (result) {  
                   
            }  
	 });

解决方法二

1
2
3
4
访问就在URL后面加上[总之就是使每次访问的URL字符串不一样的]
URL?+new Date();
设计WEB页面的时候 也应该遵守这个原则
因为请求同一个地址会直接读取缓存，所以可以在参数中加一个随机数数 让每次参数不一样就好

IOS下Iframe滚动问题

移动端在IOS下的问题居多，后来测试组测出的bug多数属于在IOS下属性不兼容问题，其中就有IOS下Iframe里面页面无法滚动，解决方法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>IOS frame 滚动条 demo</title>
</head>
<body>
<style>
#wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}
</style>
<div class="container">
   	 我是一堆很长。很长，很高，很高的内容。
</div>
<script src="../jquery.js"></script>
<script>
    var UA = navigator.userAgent;
    var forIOS = function(){
        if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){
          return;
        }
        if($('#wrapper').length){return;}
        $('body').children().not('script').wrapAll('<div id="wrapper"></div>');
    }();
</script>
</body>
</html>

总结

这次是我第一次开发微信端，从前端的不熟悉到熟练，自己成长了许多。同时遇到了很多问题，尤其是在IOS下的兼容问题，比如还有像IOS下fixed属性不能用等问题。很多东西只有自己摸索才知道，这次也算是让自己在全栈工程师的道路上又进了一步。