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

原创 2016年10月03日 16:12:23

前言:

看了下博客的更新时间,发现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移动端存储的一些坑:

当然在移动端浏览器中使用localStoragesessionStorage是没有任何问题的。但是在安卓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);
            });
    }
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

前端开发人员必须了解的七大技能图谱

各核心技术知识图谱大曝光,知识库精华资源强力推荐 HTML5知识库 HTML5知识图谱 知识图谱由前端技术专家、CSDN博客专家侯志强(@yisuowushinian)绘制,...

工作两年小结----勿忘初心不负梦想

前言:转眼又是一年,2016年7月3号是自己正式参加工作两年,入职一家新公司工作两个月的日子。每年到这个时间点,总是想要写点儿什么总结一下。前半年除了学习提高专业技能外,主要读了几本书《余罪》,沉默的...

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

1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的其它相关配置内容如下: width viewport 宽度(数值/device-width) height viewport 高度(数值/de...

关于h5移动端常见问题整理

移动端开发要考虑最多的就是兼容性的问题,android和ios的兼容,css3新增属性的兼容以及h5新增标签等使用问题。下面是一些小问题以及解决方案,仅供参考。         【1】.关于样式的总结...

解决webview加载网页出现白屏的问题

最近在使用WebView进行网页内容显示时,如果网络很慢,例如2G网络,加载网页会需要很长时间,在加载过程中,WebView一直显示白屏,体验不是很好。经过修改可以使用以下几个方案解决WebView加...

移动端h5页面帮助资料干货

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android

根据iPhone6设计稿动态计算rem值

rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值。使用mediaquery 可以解决这个问题,但是每一个文件都引用一...

移动端:active伪类无效的解决方法

:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况,一般主流浏览器下也支持其他元素,如button等。在多按键的鼠标系统中,:active只适用于主按键,目前...

移动端h5开发基础

移动端h5开发基础知识 一.手机端开发页面必须要加一段代码:          注:这段代码的主要意思是:让页面宽度等于设备宽度,缩放比例为1,禁止用户缩放。用于检测视口,主要的效...

关于H5闪退问题--资源优化

《全民霸业》作为一款大型的h5游戏。 资源的处理加载是一个十分紧要的问题。 首先是资源的处理:1.压缩图片,帅选掉不必要的图片,将多张散图打成plist大图,大图尽量靠近2的幂次方,2.更改图片的大小...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)