logo头像

不忘初心 方得始终

微信公众号网页开发

本文于1161天之前发表,文中内容可能已经过时。

引言

最近一直参与公司开发公众号,关于项目实施平台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属性不能用等问题。很多东西只有自己摸索才知道,这次也算是让自己在全栈工程师的道路上又进了一步。

微信打赏

赞赏是不耍流氓的鼓励