菜单

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

2019年9月24日 - 银河官方网站
移动端h5开发相关内容总结

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

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

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

一:JavaScript是一种描述性语言,它是一种基于对象(Object)和事件驱动(Event
Drivent)的,并且具有安全性能的脚本语言。
特点:

前言:

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

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

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

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

废话不多说。来正菜。

>JavaScript主要用来向HTML页面中添加交互行为。

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

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

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

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

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

银河官方网站 1

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

第一个是opcity和rgab的区别

银河官方网站 2

第二张是在ie6中的效果:

银河官方网站 3

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

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支持
}

>JavaScript是一种脚本语言,语法和Java类似

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 发现了问题的原因。

原文内容如下:

银河官方网站 4

翻译后总结如下:

银河官方网站 5

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

>JavaScript一般用来编写客户端的脚本

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

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

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

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

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

>JavaScript是一种解释性语言,边执行边解释

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的同学需要找客户端支持。详细信息如下:

银河官方网站 6

二:JavaScript
由三部分组成

5.pc端js生成二维码

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

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

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

银河官方网站 7

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

ECMAScript标准(它是一个描述,规定了脚本语言的所有属性,方法和对象的标准)
浏览器对象模型(Browser Object Model ,
BOM)
文档对象模型(Document Object Model
,DOM)

6.本地存储js字符串

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

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

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

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

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

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

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

银河官方网站 8

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

JavaScript

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

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

那么使用eval函数还行不行呢?看下面的示例:
银河官方网站 9

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

  1. JavaScript中new 关键字的使用

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

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

银河官方网站 10

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

银河官方网站 11

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

三:JavaScript的执行原理

7.绝对定位的“坑”

来看一个比较常见的布局

银河官方网站 12

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

银河官方网站 13

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

JavaScript

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

1
2
3
4
5
6
var webViewHeight = window.innerHeight;
var iosCampatibleValue = 64;
if(webViewHeight<500){
    webViewHeight =500;
}
$(‘#pageWrapper’).css(‘height’, webViewHeight);

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

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

银河官方网站 14

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

银河官方网站 15

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

1.浏览器客户端向服务器端发送请求:即客户要访问的页面

8.键盘被呼起模拟滚动

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

解决办法:

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

JavaScript

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); }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
            });
    }
}

银河官方网站 16

打赏支持我写出更多好文章,谢谢!

打赏作者

2.数据处理:服务器端将某个包含JavaScript的页面进行处理

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

银河官方网站 17
银河官方网站 18

2 赞 13 收藏 1
评论

3.发送响应:服务器端将含有JavaScript的HTML脚本文件处理页面发送到客户端,

关于作者:zhiqiang21

银河官方网站 19

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情!

个人主页 ·
我的文章 ·
11 ·
     

银河官方网站 20

后由浏览器客户端从上往下依次解析HTML标签和JavaScript,并将页面效果呈现给客户

使用客户端脚本的好处:

包含JavaScript的页面只需要下载一次即可,这样能减少不必要的网络通信

JavaScript程序由浏览器客户端执行,而不是由服务器端执行,能减少服务器端的压力

—————————————-变量的声明和使用———————————————-
一:JavaScript是一种弱类型语言
,没有明确的数据类型,但是并不代表没有数据类型!也就是说咋声明变量时
不需要指定变量的类型
在JavaScript中变量的声明都是用var统一声明的
注意!!区分大小写 而且不能是js中的关键字
eg:
var width=20;
var x,y,z=10;
这样声明变量在js中也是合法的,并不会报语法错误
eg:
var num;
var number=
var str=String(“12”);

二:JavaScript中的六大数据类型:

undefined(未定义类型)
null(空类型)
number(数值类型)
String(字符串类型)
boolean(布尔类型)
Object(数组,函数对象类型)

※只有 0 “” undefind null
NaN false 是默认为false其他的都默认为true!

三:String对象的常用方法
toString():返回字符串

toLowerCase():将字符串转换成小写

toUpperCase():将字符串转换成大写

charAt(index):返回指定位置的字符

indexOf(str,index):查找某个指定的字符串在字符串中首次出现的位置

substring(index1,index2):返回指定索引index1到index2中的字符串 (前闭后开原则)

split(str):将字符串根据指定的str分割为字符串数组

四:在JavaScript中 ‘==’和‘===’是不同的意思
‘==’比较的是值 ‘===’比较的是值和数据类型

五:typeof()运算符
typeof()是运算符而并不是函数

typeof()的作用是获取一种变量究竟是那种数据类型

六:数组
创建数组的方法
var 数组名=new Array(size);
在js中创建数据并赋值有多种方式
eg:
1.var array=new Array();
2.var array=new
Array(“1″,”2″,”3”);
3.var array=new Array(2);
array[0]=1;
array[1]=2;
array[5]=6; 注意,在js中是没有数组下标越界这一说法的,其余没有赋值的部分会自动用undefind来填充!
4.var array=[“1″,”2″,”3”];

七:数组中常用的属性和方法
银河官方网站, 属性: length
设置或返回数组中的元素的数目
方法: join()
把数组的所有元素放入一个字符串,通过一个分隔符来进行分割连接
sort() 对数组进行排序
push()
向数组末尾添加一个或更多的元素,并返回新的长度

八:常用的输入输出(在js中字符串最好使用”
在HTML中字符串最好使用””)
警告弹框(只有一个确定按钮)

alert(‘弹出的内容’);
提示弹框(可以接受文本)

prompt(‘提示信息”,”输入框的默认信息’) 注:要默认输入框没有内容可将第二个参数设置为””,在IE浏览器中如果没有设置第二个属性则输入框中显示undefind其他浏览器则不显示内容
确认取消框(返回true 或false)

confirm(‘显示的文本’)

九:JavaScript中常用的语法–函数
常用的系统函数:
isNaN()
:用来判断一个变量是否是非数值类型 若是非数值类型则返回true
若不是非数值类型则返回flase
eg:
var flag1=isNaN(“12.5”); //返回值是
false
var flag2=isNaN(“12.5s”); //返回值是
true
var flag3=isNaN(“45.8”); //返回值是
false
var flag4=isNaN(.45); //返回值是 false
会自动补全为0.45
var flag5=isNaN(5/0);
//返回值是Infinity 表示无限大小的数据

parseInt()
:可解析一个字符串返回一个整数
eg:
parseInt(‘78.89’); //返回78
parseInt(‘4567adsh’);//返回4567
parseInt(‘this36’); //返回NaN(not a
number)

parseFloat():可解析一个字符串返回一个浮点数
eg:
parseFloat(‘4567sdas’);
//返回值为4567

parseFloat(‘45.58’);//返回值为45.58

parseFloat(‘cloas785’);//返回为NaN
parseFloat(‘.45’);
//返回值为0.45

自定义函数

自定义函数用关键字function
eg:
funtion
函数名(参数1,参数2,参数3){
[return 返回值]
}
匿名函数
function(){
//是没有名字的,一般用变量接收 掉用时直接调用变量名就成
….
}

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图