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

红太狼 2022-07-16 04:09 203阅读 0赞

# 前言： #

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

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

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

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

废话不多说。来正菜。

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

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

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

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

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

![1460000007102971][]

示例效果如下（如果可以的话，自己可以写一个简单的demo看下效果）：

第一个是opcity和rgab的区别

![1460000007066912_w_690_h_403][]

第二张是在ie6中的效果：

![1460000007066913_w_690_h_319][]

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

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

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

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

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

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

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

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

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

原文内容如下：

![1460000007066914_w_690_h_221][]

翻译后总结如下：

![1460000007066915_w_1461_h_392][]

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

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

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

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

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

详细的可以参考这篇文章一起阅读：[《h5端呼起摄像头扫描二维码并解析》][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`的同学需要找客户端支持。详细信息如下：

![1460000007066916_w_2048_h_778][]

## 5.pc端js生成二维码 ##

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

1.  使用qrcodejs
2.  使用jquery.qrcide

在使用的过程中还是遇到一些坑，总结如下：

![1460000007066917_w_1373_h_354][]

所以在前端有需求做生成二维码需求的时候，可以参考以上的两个点，确定自己选择哪个开源库更适合自己的项目。

## 6.本地存储js字符串 ##

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

业务场景：  
因为历史的原因，我们的html5页面是跑在客户端的webview中，但是客户端的titlebar上的那个返回按钮却是调用了前端js的`back`方法进行页面返回的。这个时候就会出现一个问题，如果在我们的h5页面中跳出了我们自己的页面，到了第三方的页面。第三方页面的js肯定是没有我们客户端返回按钮需要的js返回方法的。

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

好吧，都说了是历史原因了其它的都不要说，而且找客户端同学发版也不太现实的情况下只能想其它的解决方案了。

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

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

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

![1460000007066918_w_966_h_580][]

由上面的代码可以知道，`eval`可以把简单的js字符串转化为js代码并且执行它。但是当我们的js字符串比较复杂呢？比如下面这样：

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

那么使用`eval`函数还行不行呢？看下面的示例：  
![1460000007066919_w_992_h_506][]

由上面的执行结果可以知道，不管怎么执行都得不到我们的预期的结果，但是有没有办法得到我们预期的结果呢？答案是：有。

1.  JavaScript中`new` 关键字的使用

在JavaScript中一切皆是对象。当我们创建一个函数的时候除了函数声明和函数表达式外，还可以通过`new Function`的方式来创建函数（这种方式并不常用，但是特殊的场景还是很有用的）。

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

![1460000007066920_w_950_h_322][]

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

![1460000007066921_w_986_h_290][]

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

## 7.绝对定位的“坑” ##

来看一个比较常见的布局

![1460000007066922_w_660_h_840][]

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

![1460000007066923_w_620_h_678][]

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

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

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

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

![1460000007066924_w_620_h_774][]

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

![1460000007066925_w_614_h_742][]

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

## 8.键盘被呼起模拟滚动 ##

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

解决办法：

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

--------------------

[![1460000005987143][]][1460000005987143 1]

[1460000007102971]: /images/20220716/96a39d71e2c44cf8bcc334948240e5d0.png
[1460000007066912_w_690_h_403]: /images/20220716/272b410fca8b4edbb1e5b0f1c64d49a6.png
[1460000007066913_w_690_h_319]: /images/20220716/cdc616616feb420b9cd8322200a2d337.png
[stackoverflow]: http://stackoverflow.com/
[1460000007066914_w_690_h_221]: /images/20220716/01cf6e85fd934d7e84015487681a8e30.png
[1460000007066915_w_1461_h_392]: /images/20220716/dbe30341347c46088c7b7951267bb4ff.png
[Link 1]: http://blog.csdn.net/hvkcoder/article/details/51365191
[h5]: http://blog.csdn.net/yisuowushinian/article/details/50548742
[1460000007066916_w_2048_h_778]: /images/20220716/6590a8c7c4424e9099b4a1c68077dbaf.png
[1460000007066917_w_1373_h_354]: /images/20220716/3d490b5d1e8f4afb81a03dd67aeacdb5.png
[1460000007066918_w_966_h_580]: /images/20220716/42f147ae533a41c4b8f90959bf289b73.png
[1460000007066919_w_992_h_506]: https://segmentfault.com/img/remote/1460000007066919?w=992&h=506
[1460000007066920_w_950_h_322]: /images/20220716/b05069ddba8b4631b9e8832d99d76422.png
[1460000007066921_w_986_h_290]: /images/20220716/6e79ba1aa6ba4b89a0a841adace30e90.png
[1460000007066922_w_660_h_840]: /images/20220716/35b1310b4ff1498686cc38db4e8458e5.png
[1460000007066923_w_620_h_678]: /images/20220716/913b38d8d1404a25a8cce1ad9fedcc6b.png
[1460000007066924_w_620_h_774]: /images/20220716/5f28a715d7794637a3177b694693a133.png
[1460000007066925_w_614_h_742]: /images/20220716/65f1b9a6c9a34e238d9c5b06e5cb2796.png
[1460000005987143]: /images/20220716/3c80c21711ca400a90e71583c305ab1e.png
[1460000005987143 1]: https://github.com/zhiqiang21/blog/blob/master/README.md