移动端 h5开发相关内容总结

Posted 2020-09-22

之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。

给大家分享一下这半年来的感受吧：

知道和理解之间是有很大距离的。别人谈到一个知识点，能接上嘴并且能发表一下自己的意见，这叫知道。遇到问题能够想到用什么知识点解决问题，这叫理解。

所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎么去用或者说想到去用，有时候会有同事给一下指导说用什么解决问题。关键时候还是多看（看书，看别人的代码）和多用。

1.display:none; 和 visibility:hidden;的区别

display:none 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。（不会显示在文档流中的位置，但是 DOM 节点仍会出现在文档流中） 
visibility:hidden visibility属性让你能够控制一个图形元素的可见性,但是仍会占用显示时候在文档流中的位置。

使用 display:none 的时候虽然元素不会显示，但是DOM 节点仍会出现，所以我们就可以使用选择器对该元素进行操作。如下图中的示例：

2.事件冒泡引发的问题

这个问题是发生在自己上篇文章《h5端呼起摄像头扫描二维码并解析》中的。详细的代码可以看那篇文章。

问题发生的场景

先看一段html 代码：

1 <div class="qr-btn" node-type="qr-btn">扫描二维码1
2             <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
3 </div>

之前我的想法是这个样子的： 
1.我先触发qr-btn的 click 事件，在回调中触发 input 的click 事件click 事件 
2.然后触发input 的 change 事件,获取上传图片的信息。

按照我的思路代码应该是下面的这个样子的

1 //点击父级元素的事件
2     $(‘.qr-btn‘).bind(‘click‘,function(){
3         //触发子元素的事件
4         $(‘[node-type=jsbridge]‘).trigger("click");
5     });
6     $(‘[node-type=jsbridge]‘).bind(‘change‘,function(){
7         //做一些事情
8     });

 

上面的代码，按照正常的思路应该是没有问题的，但是，在实际的运行过程中却发生了问题。浏览器的报错信息如下：

这是因为堆栈溢出的问题。那么为什么会出现这样的问题呢？我把断点打在了以下的位置，然后点击子元素 

发生的情况是：代码无限次的触发$(‘.qr-btn‘).bind(...) ,就出现了上面的报错信息。那么是什么原因导致的呢？ 
思考一下发现：是因为事件冒泡的问题。我单击父元素触发子元素的click 事件，子元素的 click 事件又冒泡到父元素上，触发父元素的 click 事件，然后父元素再次触发了子元素的 click 事件，这就造成了事件的循环。

问题解决办法：

尝试阻止事件的冒泡，看能够解决问题？ 
那我们尝试在触发子元素的click的时候，尝试组织子元素的冒泡，看能否解决我的问题？添加如下的代码：

1       $(‘[node-type=jsbridge]‘).bind(‘click‘,function(e){
2             // console.log(e.type);
3             e.stopPropagation();
4         })

经过我的测试，代码是能够正常的运行的。

那么我们有没有更好的方法来解决上面的问题呢？请看接下来的内容

3.lable标签的 for 属性

先来看 lable 标签的定义:

<label> 标签为input元素定义标注（标记）。 
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 
<label> 标签的for属性应当与相关元素的 id 属性相同。

看想一下 w3school 的示例代码和效果：

1 <form>  
2 <label for="male">Male</label>
3  <input type="radio" name="sex" id="male" />
4  <br />  <label for="female">Female</label>
5  <input type="radio" name="sex" id="female" />
6 </form>

 

效果如下图：

到这里应该之道我们该怎么改进我们的代码了，

1 <lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
2             <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
3 </lable>

 

除了 lable 标签的样式我们自己需要自己定义外，还有两个优点：

• 减少了 javascript 的书写；
• lable 标签和 input 标签没有必要是包含关系

4.“弹层盒”布局和普通盒模型布局的优缺点对比

最近做了一个抽奖的活动，其中就有一个轮盘的旋转的动画效果（注意啦，中间的那个卡顿是 gif 图片又重新开始播放了）。，效果如下图：

关于动画实现在下一篇文章中会继续介绍，这里主要来关注下布局的问题。因为我们页面会在 pc 和移动移动各出一套。所以在 pc 和移动我分别用了两种方案，pc 传统布局实现，h5 “弹性盒”实现。

1.弹性盒实现九宫格

外围的那些灯是使用绝对定位来做的，就不过过多的介绍，主要的是看中间的奖品九宫格的部分。html 代码如下：

 1  <div class="re-middle">
 2                 <div class="row-a" node-type="row-a">
 3                     <div>mac pro</div>
 4                     <div>扫地机器人</div>
 5                     <div>iphone6s</div>
 6                 </div>
 7                 <div class="row-b" node-type="row-b">
 8                     <div>20积分</div>
 9                     <div></div>
10                     <div>优惠券</div>
11                 </div>
12                 <div class="row-c" node-type="row-c">
13                     <div>ps4</div>
14                     <div>
15                         <p>猴年限定</p>公仔</div>
16                     <div>祝福红包</div>
17                 </div>
18                 <div node-type="reward-layer"></div>
19             </div>

css代码如下：

 1 .re-middle {
 2     position: absolute;
 3     width: 28.3rem;
 4     height: 16rem;
 5     top: 0;
 6     left: 0;
 7     right: 0;
 8     bottom: 0;
 9     margin: auto;
10     background-color: #f69f75;
11     color: #ffdece;
12     font-size: 1.8rem;
13 }
14 .row-a,
15 .row-b,
16 .row-c {
17     height: 5.3rem;
18     display: -webkit-box;
19     display: -webkit-flex;
20     display: -ms-flexbox;
21     display: flex;
22     -webkit-flex-flow: row nowrap;
23     -ms-flex-flow: row nowrap;
24     flex-flow: row nowrap;
25 }
26 .row-a div,
27 .row-b div,
28 .row-c div {
29     -webkit-box-flex: 1;
30     -webkit-flex: 1;
31     -ms-flex: 1;
32     flex: 1;
33     text-align: center;
34     line-height: 5.3rem;
35     background-color: #f69f75;
36 }
37 由上面的 css 代码可以看出来我仅仅是在水平方向上使用了“弹性盒”,而在竖直的方向上，还是使用了固定高度（因为我是用的 rem 单位，这里的固定也是不准确的，高度会根据 fontsize 值进行计算。）
38 
39 那么可不可以在竖直和水平都是用“弹性盒”呢？ 
40 来看一下下面的css代码：
41 
42 .re-middle {
43     position: absolute;
44     width: 28.3rem;
45     height: 16rem;
46     top: 0;
47     left: 0;
48     right: 0;
49     bottom: 0;
50     margin: auto;
51     background-color: #f69f75;
52     display: -webkit-box;
53     display: -webkit-flex;
54     display: -ms-flexbox;
55     display: flex;
56     -webkit-box-orient: vertical;
57     -webkit-box-direction: normal;
58     -webkit-flex-direction: column;
59     -ms-flex-direction: column;
60     flex-direction: column;
61     color: #ffdece;
62     font-size: 1.8rem;
63 }
64 .row-a,
65 .row-b,
66 .row-c {
67     /*height: 5.3rem;*/
68     -webkit-box-flex: 1;
69     -webkit-flex: 1;
70     -ms-flex: 1;
71     flex: 1;
72     display: -webkit-box;
73     display: -webkit-flex;
74     display: -ms-flexbox;
75     display: flex;
76     -webkit-flex-flow: row nowrap;
77     -ms-flex-flow: row nowrap;
78     flex-flow: row nowrap;
79 }
80 .row-a div,
81 .row-b div,
82 .row-c div {
83     -webkit-box-flex: 1;
84     -webkit-flex: 1;
85     -ms-flex: 1;
86     flex: 1;
87     text-align: center;
88     line-height: 5.3rem;
89     background-color: #f69f75;
90     /*position: relative;*/
91     -webkit-box-align:center;
92     -webkit-align-items:center;
93         -ms-flex-align:center;
94             align-items:center;
95 }

周末的时候关于这个布局自己又翻书看了下“弹性盒”的文档，终于实现了在竖直和垂直方向上都实现内容的水平垂直居中内部元素。其实上面的代码只需要把内容的父级元素再次定义为display:flex再添加两个属性justify-content和align-items就可以了。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。

详细代码如下：

 1 .row-a div,
 2 .row-b div,
 3 .row-c div {
 4     -webkit-box-flex: 1;
 5     -webkit-flex: 1;
 6     -ms-flex: 1;
 7     flex: 1;
 8     border: 1px solid #000;
 9     -webkit-box-align: center;
10     -webkit-align-items: center;
11     -ms-flex-align: center;
12     align-items: center;
13     -webkit-box-pack: center;
14     -webkit-justify-content: center;
15     -ms-flex-pack: center;
16     justify-content: center;
17     display: -webkit-box;
18     display: -webkit-flex;
19     display: -ms-flexbox;
20     display: flex;
21 }

2.传统方式实现

与 h5 端相比，我在 pc 端的实现是传统的浮动方式.我的 HTML 代码如下:

 1 <div class="re-middle">
 2                             <div class="row-a">
 3                                 <div>mac pro</div>
 4                                 <div class="row-a-sec">祝福红包</div>
 5                                 <div class="row-a-last"> iphone 6s</div>
 6                             </div>
 7                             <div class="row-b clearfix">
 8                                 <div>优惠券</div>
 9                                 <div class="row-b-sec"></div>
10                                 <div class="row-b-last">20积分</div>
11                             </div>
12                             <div class="row-c">
13                                 <div>扫地机器人</div>
14                                 <div class="row-c-sec">猴年限定
15                                     <p>公仔</p>
16                                 </div>
17                                 <div class="row-c-last">ps4</div>
18                             </div>
19                             <div class="reward-btn"></div>
20                         </div>

 

css 代码如下：

 1 .re-middle {
 2     background-color: #f89f71;
 3     width: 530px;
 4     height: 320px;
 5     position: absolute;
 6     top: 0;
 7     right: 0;
 8     bottom: 0;
 9     left: 0;
10     margin: auto;
11 }
12 .row-a,
13 .row-b,
14 .row-c {
15     /*height: 106px;*/
16     font-size: 0;
17     overflow: hidden;
18 }
19 .row-a > div,
20 .row-c > div {
21     float: left;
22     width: 176px;
23     height: 106px;
24     text-align: center;
25 }
26 .row-b div {
27     float: left;
28     width: 176px;
29     height: 106px;
30     text-align: center;
31     line-height: 106px;
32     background-color: #f69f75;
33 }

 

由上面的 css 代码对比看我们可以显然看出传统的浮动方式的布局和“弹性盒”布局的一些优缺点：

• float布局代码简洁，但是必须确定的指定盒子的宽度和高度，多屏幕的适配上会差一些（rem动态计算除外）。
• “弹性盒”布局代码使用新的 css3属性，需要添加额外的厂商前缀，增加了代码的复杂度(添加厂商前缀可以使用 sublime 插件，一键完成，推荐我的文章 前端开发工程师的 sublime 配置)
• “弹性盒”为多屏幕的适配提供了便利性。我不用去关心子元素的宽度和高度是多少，或者是屏幕的宽度是多少，都会根据实际请款flex自身会去适配。

遇到的一个小问题，多行文本的处置居中： 
这个九宫格内的文本元素，如果只是单行的话，只要使用 line-height 就可以解决问题，但是如果多行呢？会出什么情况呢，看下图： 

所以这里只能考虑不使用line-height，使用padding 来解决问题 ,尝试padding后的效果。如下图： 

可以看到容器的下面多出了一部分。那也是我们使用的padding的问题，那么怎么解决这个问题呢？这就要用到之前提到过的box-sizing来解决问题。

1 .row-c-sec {
2     color: #ffdece;
3     font-size: 30px;
4     padding-top: 17px;
5     background-color: #f69f75;
6     /*使容器的高=内容高度+padding +border*/
7     box-sizing: border-box;
8 }

 

5.按钮多次提交的解决方案

在做“跑马灯”插件的时候遇到了一个问题，就是用户点击开始抽奖按钮以后在还没有返回结果的时候用户又第二次点击抽奖按钮，那个时候机会出现“奇葩”的问题。比如说：第一次请求和第二次请求重合返回的结果显示哪一个，就算允许用户进行二次抽奖，交互也不友好。而且如果前端页面不做限制的话，显示也会出现奇葩的问题。比如下面这样：

这样是不是很糟糕啊。。。

那么我是怎么解决这个问题呢？ 
答案很简单，我就是在点击按钮之后，使用绝对定位弹起了一个透明的弹层，将按钮给覆盖，等结果返回并显示以后，我在同时去掉弹层。这样就避免了用户的重复提交。详细看一下代码：

 1 <div node-type="cover_layer"></div> 

1 .cover-layer{
2     width:100%;
3     height:100%;
4     top:0;
5     position:absolute;
6     z-index:9999;
7 }

 

这里保证我的这个透明的弹层能够覆盖在抽奖按钮的上面。当然这个class 是我通过JavaScript动态的添加和删除的。

1 $(node).on(‘clcik‘,‘.reward-btn‘,function(){
2     //呼起弹层
3     $(‘[node-type=cover_layer]‘,node).addClass(‘cover-layer‘);
4     .....
5     //返回结果以后去掉弹层
6     $(‘[node-type=cover_layer]‘,node).removeClass(‘cover-layer‘);
7     .....
8 });