一、介绍
随时整理记录自己在开发微信HTML5应用时经验教训
二、调试环境搭建
- 下载官方微信开发工具
- 本地搭建Apache 环境
- 配置Chrome 浏览器，如果是chrome49+，需要如下配置属性
1
C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --args --disable-web-security --user-data-dir=D:\workspace\devChrome
三、预备知识
- nodejs
- gulpjs
- requirejs
- backbonejs
- zeptojs
- git
四、应用结构
五、最佳实践
- rem 来适配屏幕布局
- 前端切图宽为640px，基本字体大小为24px
- javascript 设置rem
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;(function(win){
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if(width > 540){ // 最大宽度
width = 540
}
var rem = width / 10; // 将屏幕宽度分成10 份，1 份为1rem
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function(){
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e){
if(e.persisted){
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window) - 在Chrome 浏览器上开发时可以设置宽度为640px，对视力友好，但是如果想要看到手机上的效果最好是设置为320px
- 浏览器上的模拟效果不等同于手机微信上的实际效果，因此需要在手机上实际运行一下
- 设置border 宽度时，在开发时通常为2px 像素，例如以rem 为单位则是
1
2
3.container {
border: 2px solid red;
}如果设置为1px 像素，在Chrome 浏览器上可以看到，但是在手机微信上看不到1
2
3.container {
border: 0.0833rem solid red;
}
__注意__：实际上可以不需要将所有的单位px 都转换成rem ，还是可以保留px 的，例如如果border 宽度为1px，就不需要在转为rem 了1
2
3.container {
border: 1px solid red;
} - 对img 标签应该设置width 和height
- 移动端的meta
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<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, email=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<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="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<metaname="x5-page-mode"content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->