移动前端技术快速入门

2016乌镇互联网会议上,李彦宏大大说"移动互联网时代已经结束",小马哥也持有类似观点。不过这都是大牛的事,对于菜菜的俺来说,落后一个时代远比两个时代好的多,称为一个不错的跟随着是现阶段主要的任务。

移动互联的发展方向:移动广告(微信推广);移动搜索(猎豹科技);移动购物(京东,淘宝);移动互联社交(微信);多媒体(斗鱼);移动游戏(阴阳师)。

Chrome, Safari均使用webkit浏览器内核,其支持html5,css3特性

H5的新特性:Canvas提供丰富的Web绘图功能;多媒体Video,Audio弥补需要插件播放flash的缺陷;Web Storage和Web SQL Database提供本地存储;Manifest File提供离线应用的支持;Geolocation提供地理信息。其他H5新标签等信息请见,Html与CSS快速入门01-基础概念

本地存储

sessionStorage的操作和localStorage类似,区别是前者是长期保存,后者是会话保存,此外Storage支持事件监听。

离线应用

其突出功能是在没有网络状态时,Web应用仍然可以正常进行,使用场景比如在线编辑功能,对于智能手机等终端来说,其可以减少流量消耗。其通过manifest文件作为缓存资源文件的配置文件,ApplicationCache记录应用缓存状态,online方法用于检测网络是否在线。

接下来提供一个综合示例,首先需要在web.xml配置文件中添加manifest文件类型

   <mime-mapping>
        <extension>manifest</extension>
        <mime-type>test/cache-manifest</mime-type>
    </mime-mapping>

cache.manifest文件如下所示

CACHE MANIFEST
#缓存的文件
index.html
test.js
#不作缓存
NETWORK
/images/
FALLBACK
offline.html index.html

接下来是综合页面

 1 <!DOCTYPE html>
 2 <html manifest="cashe.manifest">
 3 <meta charset="utf-8">
 4 <meta name="viewport"
 5     content="width=device-width, initial-scale=1,user-scalable=0" />
 6 <script
 7     src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 8 <body>
 9     <h2>Hello World!</h2>
10     <input type="text" placeholder="请输入内容" autofocus required>
11     <input type="search">
12     <input type="email">
13     <input type="number">
14     <input type="range">
15     <input type="tel">
16     <!-- 此外,还有datetime, datetime-local, Time, Date, Week, Month等类型,以及min, max等属性 -->
17 </body>
18 <script>
19     if (window.localStorage) {
20         var userData = {
21             name : "xionger",
22             desc : "handsome"
23         };
24         localStorage.setItem("xionger", JSON.stringify(userData));
25         var newData = JSON.parse(localStorage.getItem("xionger"));
26         localStorage.key(1);
27         localStorage.removeItem("xionger");
28         localStorage.clear();
29     }
30     window.onload = function() {
31         window.addEventListener("storage", function(e) {
32             console.log(e);
33         }, true);
34     }
35     if (!window.navigator.online) {
36         application.Cache.addEventListener('updateready', function() {
37             //资源文件下载中, to do
38         });
39     }
40     window.navigator.geolocation.getCurrentPosition(function(pos) {
41         console.log(pos.coords.latitude + ' , ' + pos.coords.longitude + ' , '
42                 + pos.coords.accuracy);
43     });
44 
45     var watchID = navigator.geolocation.watchPosition(function(pos){
46         navigator.geolocation.clearWatch(watchID);
47     });
48 </script>
49 </html>

Tip:选择器部分内容请见http://www.cnblogs.com/wanliwang01/p/jquery_01.html.

移动前端这部分内容自己接触的比较少,有不少困惑,询问了小伙伴,大体理解了当前的技术发展状况,这部分内容随着深入理解,会继续更新。

当前移动应用主要包括如下几种形式。

方式

诠释

Native

也就是常规的app应用,通过swift,java来编码

Hybrid

应用中内置浏览器,通过H5编码,但需要注意的是,其会把相关的js,css文件打包到安装包中。介于Native和H5之间,开发一个版本即可,比较方便,同时由于文件主要存在本地用户体验比较好

H5

也就是常说的webapp了

内嵌

比如微信小程序

关于H5和native需要提到一个概念,就是js bright,其通过包装原生的方法,达到通过js可以调用终端api的效果,比如过去的phoneGap,ctrip的lizard等,现在比较流行react native。举个例子来说,ctrip的hybird框架,主要包括requirejs(管理js),backbone&underscore(数据绑定),zepto基础库, lizard(js bright)等内容。

对于一般的Online项目,推荐使用vue(听大神哥们的)替代angularjs,饿了么前端主要使用Vue框架。

2017前端可能发展:http://www.iteye.com/news/31988

  1. 唐俊开. HTML5移动Web开发指南[M]. 北京:电子工业出版社, 2012.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot 核心技术

写文章真的是为了报酬吗?

其实我也就是微微一笑,因为写文章去得到报酬从一开始并不是我的目标,也没有想打算通过文章的赞赏来解决生活问题。

1223
来自专栏java思维导图

电商中常见的高并发怎么处理?

在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

4093
来自专栏大数据文摘

一个可以把web表单变成会话形式的开源框架

5365
来自专栏养码场

一周播报| 平淡无奇,但暗藏杀机的一周

养码人B:消息写DB的话,TPS、RT 这些能接受吗?你们用的是什么消息中间件?

571
来自专栏java学习

电商中常见的高并发怎么处理?

在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

2652
来自专栏Youngxj

[seo]新建网站做好SEO优化必看教程

1907
来自专栏北京马哥教育

爬虫技术的门道,这篇文章总结的最全

Web是一个开放的平台,这也奠定了Web从90年代初诞生直至今日将近30年来蓬勃的发展。然而,正所谓成也萧何败也萧何,开放的特型、搜索引擎以及简单易学的HTM...

4027
来自专栏程序员宝库

爬虫抓取的门道——来看这篇

本文首发于我的个人博客,同步发布于SegmentFault专栏,非商业转载请注明出处,商业转载请阅读原文链接里的法律声明。 web是一个开放的平台,这也奠定了w...

4569
来自专栏编程

零基础如何自学Python

程序员在普通人眼里就像魔法师,一个脚本轻松抢几十盒月饼(虽然最后被开除),一个插件解决春运抢票难题,几十行代码搭建一个 Web 网站,用微信自动和妹纸聊天,在程...

4888
来自专栏逍遥剑客的游戏开发

UE4学习笔记(二): IOS游戏部署

2874

扫码关注云+社区

领取腾讯云代金券