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

前言：

看了下博客的更新时间，发现9月份一篇也没有更新。一直想着都要抽时间写一篇的，否则今年的更新记录就会断在了9月份。可是仍是应为各类各样的事情给耽搁了。当心里忽然涌起一股必须写点什么的时候，忽然发现本身把写博客的“套路”都忘了。(●´ω｀●)φ

一直认为本身仍是一个比较热爱思考的人。最近一直在思考两个问题：

1. 本身作技术的初衷；

2. 本身的技术成长之路；

固然这两篇文章本身也在润色之中，相信很快会跟你们见面。

废话很少说。来正菜。

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

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

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

1. IE6-7使用滤镜；

2. opcity；

3. rgba；

可是他们也有些细微的差异总结以下：

示例效果以下（若是能够的话，本身能够写一个简单的demo看下效果）：

第一个是opcity和rgab的区别

第二张是在ie6中的效果：

当咱们在兼容低版本浏览器的时候可能下面的写法能够知足咱们的需求（两个属性都写上，浏览器识别的属性直接覆盖前者的属性）：

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

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

作html5开发的过程当中，咱们可能会有这样的需求：

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

网络上能够很容易的找到这方面的demo ，而且也能够找到在安卓上和ios上是有却别的：

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

可是在实际的开发过程当中却遇到了不少坑。主要缘由是：
除了安卓和IOS系统的写法不一样外，ios不一样系统版本写法也不一样。并且在不一样的app中也有不一样。

上面的缘由是在生产环境遇到的问题。刚开始由于找不到相关能够查阅的文档只能不作兼容。偶然一次在 stackoverflow 发现了问题的缘由。

原文内容以下：

翻译后总结以下：

因此，若是在生产环境中有呼起系统发件箱而且填充号码和内容的请注意以上的区别。

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

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

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

1. 触发input后，页面“闪退”（现象就是，文件选择框出现后又立马关闭）；当初遇到这个问题是在贴吧的客户端中，听贴吧的兄弟说，他们后来作了兼容。

2. 华为手机中能够正常的呼起系统选择文件的窗口，可是没法正常读取系统文件（最后跟客户端的同窗肯定，若是h5在webview中读取系统文件，是须要权限的，也就是说须要客户端支持）；

3. 在ios的webview中也会出现问题。若是有兴趣的同窗能够参考这篇苹果的开发者文档(点击访问）

详细的能够参考这篇文章一块儿阅读：《h5端呼起摄像头扫描二维码并解析》

4.传递参数的解决方案

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

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

第一种解决方案：

从a页面到z页面跳转的过程当中，经过 GET 的方式在url中带上这个参数；

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

第二种解决方案：

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

这样解决问题不只减小了很大的工做量，也解决了工做量大会遗漏的问题。

sessionStorage的优势：

由于数据是存储在内存中，当会话结束，页面关闭之后这些数据就会被销毁。

html5移动端存储的一些坑：

固然在移动端浏览器中使用localStorage和sessionStorage是没有任何问题的。可是在安卓webview中却出现了localStorage没法向移动的磁盘写数据的问题。最后经过网络搜索发现。在安卓上webview是默认不开启localStorage想磁盘写文件的权限的。因此若是须要使用localStorage的同窗须要找客户端支持。详细信息以下：

5.pc端js生成二维码

作过一个JavaScript生成二维码的需求。当时调研了两个方案：

1. 使用qrcodejs

2. 使用jquery.qrcide

在使用的过程当中仍是遇到一些坑，总结以下：

因此在前端有需求作生成二维码需求的时候，能够参考以上的两个点，肯定本身选择哪一个开源库更适合本身的项目。

6.本地存储js字符串

当看到题目的时候，可能会“一脸蒙逼”为何要在本地存储js字符串啊。好吧，有时候业务场景的需求确实是比较变态，且看我描述的一个业务场景。

业务场景：
由于历史的缘由，咱们的html5页面是跑在客户端的webview中，可是客户端的titlebar上的那个返回按钮倒是调用了前端js的back方法进行页面返回的。这个时候就会出现一个问题，若是在咱们的h5页面中跳出了咱们本身的页面，到了第三方的页面。第三方页面的js确定是没有咱们客户端返回按钮须要的js返回方法的。

可能有人会说，“卧槽，为何要这么搞，当初谁这么设计的。。。”或者是“让客户端同窗发版，用客户端本身的返回不就解决问题了么”。

好吧，都说了是历史缘由了其它的都不要说，并且找客户端同窗发版也不太现实的状况下只能想其它的解决方案了。

以前已经聊到过html5的客户端存储技术sessionStorage。固然我要作的就是把那段前端的back方法存到sessionStorage中。当加载第三方的页面的时候直接从sessionStorage中读取back方法的字符串，转化为js代码，而且赋值给客户端调用的方法。

其实这里的难点是怎么把js字符串转化为可执行的js代码。

1. 使用eval执行js代码语句，看下面简单的示例：

由上面的代码能够知道，eval能够把简单的js字符串转化为js代码而且执行它。可是当咱们的js字符串比较复杂呢？好比下面这样：

function aaa(){
    console.log(1);
}

那么使用eval函数还行不行呢？看下面的示例：

由上面的执行结果能够知道，无论怎么执行都得不到咱们的预期的结果，可是有没有办法获得咱们预期的结果呢？答案是：有。

1. JavaScript中new 关键字的使用

在JavaScript中一切皆是对象。当咱们建立一个函数的时候除了函数声明和函数表达式外，还能够经过new Function的方式来建立函数（这种方式并不经常使用，可是特殊的场景仍是颇有用的）。

那么使用new Function怎么解决上面的问题呢？请看示例代码：

由上面的示例代码和c的执行结果我想不少人已经知道怎么作了，其实只须要对b的字符串函数作一下简单的修改便可，看代码：

上面的代码执行结果的b()就是咱们我想要的保存的函数体。

7.绝对定位的“坑”

来看一个比较常见的布局

上面的这个布局 由于footer是相对于页面底部绝对定位的，因此当屏幕过小的时候会有一个问题footer区域覆盖了内容区域，以下图：

那咱们怎么解决这个问题呢？我看到在咱们项目的源代码中是经过js给footer和内容区域所在的父容器设置一个最小的高度来解决这个为题的，这样作很差。除了会增长复杂的判断也会形成页面的重绘：

var webViewHeight = window.innerHeight;
var iosCampatibleValue = 64;
if(webViewHeight<500){
    webViewHeight =500;
}
$('#pageWrapper').css('height', webViewHeight);

很明显上面的代码会形成页面的重绘（固然这个对系统性能消耗并非那么容易感知）。可是用css可不能够解决这个问题呢？

固然是能够的，就是为内容容器设置一个padding-bottom它的值就是底部footer的高度,以下图：

当移动端的屏幕比较低的时候就会是下面的这种状况：

padding-bottom和footer重合。可是footer永远不会覆盖内容区域的内容。这时页面会出现滚动条。可能咱们最初的设计是为了用户体验不让用户的屏幕出现滚动条，可是仍是那句话没有十全十美的程序，在一些小众机型上为了保证页面的正常显示保证用户正常浏览咱们只能牺牲一下这样的用户体验了。

8.键盘被呼起模拟滚动

如今大多数的安卓系统和ios系统，当输入框获取焦点呼起系统键盘的时候，系统键盘都会将input输入框给推上键盘的上方，方便用户的输入。可是不外乎例外，特别是在某些app中，这个自己是系统的操做并不生效，这个时候若是须要达到完美的用户体验就须要人为的参与进来。

解决办法：

思路很简单，就是检测输入框的focus事件，当输入框获取焦点的时候，用js去把页面滚动一下。最好维护一个系统没法正常推起输入框的软件列表（能够经过HTTP的UA来获取软件的惟一标识）。若是可使用系统默认的滚动就用系统的，若是不能够再人为的调用js干预。

function inputScroll(dom){
var tplList=['ss','bb'] ;

var tpl = $.fn.getQueryString(tpl);
    if(tplList.indexOf(tpl)){
        dom.focus(function(){
            var clientHeight = $(window).height();
            var contentHeight = clientHeight + clientHeight/2;
            var smsInputTop= $(this).offset().top;

            content.height(contentHeight);
            window.scrollTo(0,smsInputTop-76);
            });
    }
}

---