当前位置: 美高梅棋牌 > 软件资讯 > 正文

挪动端 h5开拓有关内容总结(三卡塔尔(قطر‎

时间:2019-12-04 02:40来源:软件资讯
移动端h5开发相关内容总结(四) 2017/02/06 · HTML5 · 1评论 ·移动端 本文作者: 伯乐在线 -zhiqiang21。未经作者许可,禁止转载! 欢迎加入伯乐在线 专栏作者。 移动端 h5开发相关内容总

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

2017/02/06 · HTML5 · 1 评论 · 移动端

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

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

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

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

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

前言:

看了下博客的更新时间,发现9月份一篇也没有更新。一直想着都要抽时间写一篇的,不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候,突然发现自己把写博客的“套路”都忘了。(●´ω`●)φ

一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题:

  1. 自己做技术的初衷;
  2. 自己的技术成长之路;

当然这两篇文章自己也在润色之中,相信很快会跟大家见面。

废话不多说。来正菜。

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

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

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

图片 1

1.背景色与透明度相关知识

好吧。至从自己到了新的工作环境以后,开发环境又从只需要兼容 IE8 以上回到了必须兼容 IE6 浏览器上来。所以在第一次做项目的时候,还是遇到一些兼容低版本IE浏览器的问题。

首先来看一个背景透明的问题,背景透明有三种解决方案:

  1. IE6-7使用滤镜;
  2. opcity;
  3. rgba;

但是他们也有些细微的差别总结如下:

图片 2

示例效果如下(如果可以的话,自己可以写一个简单的demo看下效果):

第一个是opcity和rgab的区别

图片 3

第二张是在ie6中的效果:

图片 4

当我们在兼容低版本浏览器的时候可能下面的写法可以满足我们的需求(两个属性都写上,浏览器识别的属性直接覆盖前者的属性):

CSS

.item1{ opacity:0.1;//IE8以上浏览器识别 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);//滤镜低版本IE7-8支持 }

1
2
3
4
.item1{
    opacity:0.1;//IE8以上浏览器识别
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);//滤镜低版本IE7-8支持
}

2.事件冒泡引发的问题

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

2. html5标签呼起系统发件箱

做html5开发的过程中,我们可能会有这样的需求:

点击按钮,呼起系统的发送短信的窗口,并且自动填充发送到的号码和内容;

网络上可以很容易的找到这方面的demo ,并且也可以找到在安卓上和ios上是有却别的:

XHTML

<!-- ios--> <a href="sms:10086&body=发送的内容">点击我发送短信</a> <!-- android--> <a href="sms:10086?body=发送的内容">点击我发送短信</a>

1
2
3
4
<!-- ios-->
<a href="sms:10086&body=发送的内容">点击我发送短信</a>
<!-- android-->
<a href="sms:10086?body=发送的内容">点击我发送短信</a>

但是在实际的开发过程中却遇到了很多坑。主要原因是:
除了安卓和IOS系统的写法不同外,ios不同系统版本写法也不同。而且在不同的app中也有不同。

上面的原因是在生产环境遇到的问题。刚开始因为找不到相关可以查阅的文档只能不做兼容。偶然一次在 stackoverflow 发现了问题的原因。

原文内容如下:

图片 5

翻译后总结如下:

图片 6

所以,如果在生产环境中有呼起系统发件箱并且填充号码和内容的请注意以上的区别。

问题发生的场景

先看一段html 代码:

  1. 扫描二维码1
  2. ``
  3.  

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

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

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

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

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

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

3.input标签选择系统文件的问题

在html5中 input标签提供给了开发者访问系统文件的能力。说实话如果仅仅在移动端的系统浏览器中使用input控件真的没有发现什么问题。但是在app的**webview**中却处处是坑。以下是总结出的一些经验。

<input type="file">在webview中访问系统文件遇到的一些问题:

  1. 触发input后,页面“闪退”(现象就是,文件选择框出现后又立马关闭);当初遇到这个问题是在贴吧的客户端中,听贴吧的兄弟说,他们后来做了兼容。
  2. 华为手机中可以正常的呼起系统选择文件的窗口,但是无法正常读取系统文件(最后跟客户端的同学确定,如果h5在webview中读取系统文件,是需要权限的,也就是说需要客户端支持);
  3. 在ios的webview中也会出现问题。如果有兴趣的同学可以参考这篇苹果的开发者文档(点击访问)

详细的可以参考这篇文章一起阅读:《h5端呼起摄像头扫描二维码并解析》

问题解决办法:

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

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

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

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

4.传递参数的解决方案

在开发过程曾经遇到过这样的问题:

很多个页面,比如说a-z。当我在a页面的时候,浏览器中的url会带有某些参数,当我在做完一系列的操作到达z页面。
某天有个需求,用户在页面a的时候会带上一个参数,决定用户在z页面做完操作后页面最终跳向哪里。那么这个参数该怎么传递到z页面呢?

第一种解决方案:

a页面到z页面跳转的过程中,通过 GET 的方式在url中带上这个参数;

这种方案是比较常规,也是比较不错的解决方案。但是需要在页面中的逻辑跳都加上需要的参数。这样工作量比较大,而且容易出现遗漏。不建议使用。

第二种解决方案:

使用html5新特性sessionStorage来解决问题。在a页面的时候,把新添加的需要传给z页面的参数放在sessionStorage中。在z页面直接从sessionStorage中取需要获取的参数值,然后决定页面最终的跳转。

这样解决问题不仅减少了很大的工作量,也解决了工作量大会遗漏的问题。

sessionStorage的优点:

因为数据是存储在内存中,当会话结束,页面关闭以后这些数据就会被销毁。

html5移动端存储的一些坑:

当然在移动端浏览器中使用localStoragesessionStorage是没有任何问题的。但是在安卓webview中却出现了localStorage无法向移动的磁盘写数据的问题。最后通过网络搜索发现。在安卓上webview是默认不开启localStorage想磁盘写文件的权限的。所以如果需要使用localStorage的同学需要找客户端支持。详细信息如下:

图片 9

3.lable标签的 for 属性

先来看lable标签的定义:

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

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

效果如下图:

图片 10

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

扫描二维码1

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

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

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

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

    图片 11

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

    #### 1.弹性盒实现九宫格

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

mac pro

扫地机器人

iphone6s

20积分

 

优惠券

ps4

猴年限定

公仔

祝福红包

 

css代码如下:

    .re-middle {
        position: absolute;
        width: 28.3rem;
        height: 16rem;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: #f69f75;
        color: #ffdece;
        font-size: 1.8rem;
    }
    .row-a,
    .row-b,
    .row-c {
        height: 5.3rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    }
    .row-a div,
    .row-b div,
    .row-c div {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        line-height: 5.3rem;
        background-color: #f69f75;
    }

**由上面的 css
代码可以看出来我仅仅是在水平方向上使用了“弹性盒”,而在竖直的方向上,还是使用了固定高度(因为我是用的
rem 单位,这里的固定也是不准确的,高度会根据 fontsize
值进行计算。)**

那么可不可以在竖直和水平都是用“弹性盒”呢?  
来看一下下面的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. `display: -webkit-box;`
12. `display: -webkit-flex;`
13. `display: -ms-flexbox;`
14. `display: flex;`
15. `-webkit-box-orient: vertical;`
16. `-webkit-box-direction: normal;`
17. `-webkit-flex-direction: column;`
18. `-ms-flex-direction: column;`
19. `flex-direction: column;`
20. `color: #ffdece;`
21. `font-size: 1.8rem;`
22. `}`
23.  
24. `.row-a,`
25. `.row-b,`
26. `.row-c {`
27. `/*height: 5.3rem;*/`
28. `-webkit-box-flex: 1;`
29. `-webkit-flex: 1;`
30. `-ms-flex: 1;`
31. `flex: 1;`
32. `display: -webkit-box;`
33. `display: -webkit-flex;`
34. `display: -ms-flexbox;`
35. `display: flex;`
36. `-webkit-flex-flow: row nowrap;`
37. `-ms-flex-flow: row nowrap;`
38. `flex-flow: row nowrap;`
39. `}`
40.  
41. `.row-a div,`
42. `.row-b div,`
43. `.row-c div {`
44. `-webkit-box-flex: 1;`
45. `-webkit-flex: 1;`
46. `-ms-flex: 1;`
47. `flex: 1;`
48. `text-align: center;`
49. `line-height: 5.3rem;`
50. `background-color: #f69f75;`
51. `/*position: relative;*/`
52. `-webkit-box-align:center;`
53. `-webkit-align-items:center;`
54. `-ms-flex-align:center;`
55. `align-items:center;`
56. `}`

周末的时候关于这个布局自己又翻书看了下“弹性盒”的文档,终于实现了在竖直和垂直方向上都实现内容的水平垂直居中内部元素。**其实上面的代码只需要把内容的父级元素再次定义为`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.   
2.   
3.   
4.  `mac pro`

5.  `祝福红包`
6.  `iphone 6s`
7.   
8.   
9.  `优惠券`

10.  
11. `20积分`
12.  
13.  
14. `扫地机器人`

15. `猴年限定`
16. `公仔`

17.  
18. `ps4`
19.  
20.  
21.  

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.  
13. `.row-a,`
14. `.row-b,`
15. `.row-c {`
16. `/*height: 106px;*/`
17. `font-size: 0;`
18. `overflow: hidden;`
19. `}`
20.  
21. `.row-a > div,`
22. `.row-c > div {`
23. `float: left;`
24. `width: 176px;`
25. `height: 106px;`
26. `text-align: center;`
27. `}`
28.  
29. `.row-b div {`
30. `float: left;`
31. `width: 176px;`
32. `height: 106px;`
33. `text-align: center;`
34. `line-height: 106px;`
35. `background-color: #f69f75;`
36. `}`

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

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

    **遇到的一个小问题,多行文本的处置居中:**  
    这个九宫格内的文本元素,如果只是单行的话,只要使用`line-height`就可以解决问题,但是如果多行呢?会出什么情况呢,看下图:  
    ![](http://img.blog.csdn.net/20160201101429898?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

    所以这里只能考虑不使用`line-height`,使用`padding`来解决问题
    ,尝试`padding`后的效果。如下图:  
    ![](http://img.blog.csdn.net/20160201101442178?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

    可以看到容器的下面多出了一部分。那也是我们使用的`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.按钮多次提交的解决方案

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

    ![](http://img.blog.csdn.net/20160201101458585?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

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

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

    1.   

    <!-- -->

    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.  `//返回结果以后去掉弹层`
    7.  `$('[node-type=cover_layer]',node).removeClass('cover-layer');`
    8.  `.....`
    9.  `});`

    这次的分享就到这里,下一次会分享“轮盘”抽奖效果的 JavaScript
    开发过程。  
     

        $(node).on('clcik','.reward-btn',function(){
            //呼起弹层
            $('[node-type=cover_layer]',node).addClass('cover-layer');
            .....
            //返回结果以后去掉弹层
            $('[node-type=cover_layer]',node).removeClass('cover-layer');
            .....
        })

     

h5开发相关内容总结(三) 之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很...

编辑:软件资讯 本文来源:挪动端 h5开拓有关内容总结(三卡塔尔(قطر‎

关键词: