整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次请来的设计师比较带感，有三个特质：
他是第一批H5设计师，资历老、故事多。
他走技术路线，段位高，透露了很多实战干货。
他是“强迫症患者”，采访完怕自己说不清楚，还在微信上发了N条短讯交代细节；我过后特意数了数，除去礼节性回复和链接共有462字——这本该是发语音的节奏啊！
铛铛dáng~欢迎老司机DAV登场：
一、老司机的经典H5实战
▲吉利博越上市邀请函H5（DAV负责交互）
首先必须说清楚，老司机可是玩技术的，他一般不接设计单，而是根据甲方需求来处理素材，构造页面逻辑后完成整个H5的交互。比如上面这个今年5月他为某汽车上市制作的邀请函，每一个画面都值得细细品味，绝对能充当H5进阶教学实例。
▲吉利博越上市邀请函H5的密码验证部分
这个H5整整把文字玩出了4种新鲜的花样：打字机动效（iH5自带）、漂移特效、悬浮特效和转动特效。打开他案例的后台，我有点智商不够用的感觉，竟然没有半个页面！所有动效都是用一个个时间轴控制播放的，一个接一个被触发，都直接放在同一个“舞台”下（H5要求，不必模仿）。
▲H5漂移悬浮文字的编辑界面
一般在H5中加入这么多特效，很容易就把整个案例卡死了，然而这对于老司机而言可不是问题。莫非是因为老司机会代码？他有什么创作秘诀吗？
二、老司机是何方神圣？
▲帝豪4S的H5（DAV负责交互）
DAV，电子工程师，年将满三十，目前就职于一家电子电路公司。说起来，他现在的工作和H5没什么关系，而且他每个月也就接一两个H5单子。
和之前好多妹子求勾搭、工作狂属性爆表的悟脚叔叔不同，DAV业余接单显得随意得多：“如果接平面设计的话，需要反复改稿，而我是比较随性的人……【以下省略300字】所以我负责实现客户（H5实现）的需求就可以了，节省时间。”
▲#关爱芭瞎时尚大奖#（DAV负责交互）
所以他成为一名H5设计师其实是阴差阳错。后来工作变多后，他就开始只接负责H5交互的单子，其中有各种各样的营销小游戏，也有娱乐大众的八卦的评选活动。
比如上面的#关爱芭瞎时尚大奖#，是时尚芭莎、关爱八卦成长协会（自媒体，粉丝超过200万）合作的评选活动，本来想问问他有没有什么八卦小道消息，结果他提到这个H5只淡淡说一句，“哦，那个杂志啊……”（就没有然后了）。
截至2016年6月17日，他在iH5的个人主页长这样：
▲DAV在iH5的个人主页
这么寡淡？好吧，事实是DAV做的H5一般直接挂在企业账号上。本着为人民服务的心态，后面会分享他一整套专业的H5接单流程和案例优化技巧——再懒的人不看也会后悔的！
三、听老司机讲那过去的故事
▲DAV的早期作品（负责设计&交互）
为什么叫DAV老司机？因为他资历的确比较老。
2014年9月前后，他偶然在网上看到iH5（当时还是VXPLO互动大师）与金立手机合作的H5创作大赛，于是报名参加，自学工具的使用、自己做平面设计，耗时大半个月完成H5，拿下二等奖。
因为他在平面设计、前端、后台等领域都有所涉猎，有时会自己在iH5上开发新功能，其中还有一些不为人知的趣事。
▲脸盲大作战（微信排名游戏）（DAV负责交互）
【内幕1】比如，上面这个脸盲大作战的H5，涉及通过微信授权获取用户的ID和分数，是他用iH5现有的微信授权功能实现的。而想当年，他一开始还是自己编写JS代码做的微信游戏排行榜。
【内幕2】又如，之前他自己开发出在H5中“合成照片”的功能，用于拼合不同的图像素材，输出为一张照片。不久，iH5实现同样效果的“打印画布”功能也上线了。
事实是，有时候老司机急着用一些功能，就自己先做上了，并推动了平台上对应功能的上线（真是实打实的骨灰级用户）。采访过程他还回忆起iH5的发家史，从没多少教程的VXPLO，到改版后的各种“阵痛”和“革新”（这个故事就略长了）。
▲DAV加的14个iH5用户群
他说自己是强迫症患者，最明显的证据是他竟然加了14个iH5的用户群！而且还都不屏蔽，说自己不点开看就不舒服——上面这张横跨14个群有他身影的截图便是存证——我不介意你们加爆他QQ。
四、老司机教你接单秘诀
老司机平时自己不去找单，找上门来的单子一般是“回头客”，这从他对客户和工作负责的态度可见一斑。
▲DAV自制的案例说明书
这份H5案例说明书，是老司机专门设计给甲方设计师看的，罗列出H5的建议尺寸、设计素材的建议尺寸、所需素材格式等要求。
他接单的过程大概如下：
①获得策划方案
②评估实现难度
③获取平面设计素材
④处理素材（切图、压图等）
⑤导入iH5重构页面、添加效果
⑥按甲方要求修改H5
▲DAV自制的iH5使用指南
就算是H5做完了，老司机也不会甩手不干，还会认真地和客户进行周全的邮件确认，并附赠一份独家的“武林秘籍”——iH5的使用指南。这份指南用于引导新手客户进行后续操作，包括网站的登录、案例的创建、后台数据的查看等内容。
五、老司机教你案例优化
当然，也不是每次都这么溜的。
比如前面那个《脸盲大作战》H5，一开始甲方说可以直接套模板，价开得比较低。老司机按要求做出来后，企业方又觉得流畅度不够好，结果他只能特意花时间重做了一套设计逻辑（于是这单其实有点亏）。
▲DAV做的脸盲大作战H5测试版
这个游戏要求在众多猫咪中，指认出指定的猫咪，但原模板每个关卡中指定猫咪的位置是一定的。最后，老司机改良的H5成了原来的升级版，每个关卡的指定猫咪会出现在随机位置，大大提高了游戏的难度和趣味性。
是因为动用了代码吗？非也！这样的游戏也是完全通过iH5设计的，只是实现上比较考验逻辑能力。老司机承认，一般会调用JS代码的情况极少，最常见的不过是加第三方平台（如百度统计、站长之家）的页面监测代码，用于入口页面、浏览量等的统计。
同样地，很多人抱怨做出来的H5卡，其实一般是因为素材减负和画面逻辑的设计没做好，拖慢了页面加载速度。那么这一块老司机又有什么经验？
①压缩。
图片素材的尺寸与H5的尺寸对应（太大了就浪费资源），而使用压缩工具也能减少图片的容量，比如Tinypng.com。
②素材重构。
简单地说，就是让“对象树”下的对象越少越好。
举个例子，拿到设计PSD源文件后，如果你发现一些图片按钮并不需要什么动效，请直接把它们设计在背景里，通过透明按钮来添加触发的热区。而且在Photoshop中划分完图片后，还能使用iH5的PSD上传功能直接导入分层素材。
③隐藏。
没用到或用完的对象，考虑用事件把它们隐藏起来。
④错开。
资源加载的时间尽量错开，避免同时加载，导致需要用到的素材无法显示。这里可以先把图片隐藏，利用时间轴的方式让它显示（即加载），从而达到定时加载的效果。
这些料够猛吧？欢迎留言评论，说说你对揭秘老司机哪个H5的技术细节最感兴趣？让我们一起扒扒皮
锋广州HTML5面授学习已经完成了第一阶段的学习，对于我来说时间过得真快，HTML和css的知识内容在一个月内全部学会，这个月的辛苦也是值得的。论到难度的话对于我这零基础的人来说，只有笨鸟先飞的概念，一个月我也养成了非常好的学习习惯，知识点灵活归纳，经典案例举一反三，平时注重笔记的记录。
尤其是对于第一阶段的代码量来说，效率和速度必须是绝对的，这是要靠你一个月来的积攒的熟练度和经验度。这一个月我不仅熟练了网页的书写，我的打字速度也得到了质的飞跃，这对于我无疑来说是最大的收获。在这一阶段只要你肯花时间和精力，再难的问题也可克服下去。
在纠错的情况下，我不会放过任何一个去解决的机会，没有哪个人可以一个不错，所以我就从错误点下手，复习错误的原因，和导致的问题以及造成的影响，让自己做到看到问题可以立马反映到是出了什么类型的问题，再联想到多种解决的方法，让自己纠错的时间压缩在一分钟之内。
只有这样自己的速度才可以提高。学习过程中难免会走一些弯路，所以我要学会分析形势，不能盲目解决，必要的时候需要自己向身边学习好的人，去学习他们优秀的方法和他们分享的优秀内容。马上进入第二阶段的学习，我要继续保持和优化自己的学习方式，让自己最高效率高速度的去完成下个阶段的内容，朝自己的梦想和成功前进。
015 年刚刚开始，微信 JS SDK 发布，惊爆众人，HTML5 产业好事连连。
JS SDK 这个概念，其实微博和淘宝的开放平台很早前就有，包括手机 QQ 前段时间也推出了几个增强 API，但都未产生很大的影响。小巫之后终见大巫，这次微信开放的 SDK，站在了另一个高度，web 到底能有多强？
HTML5的逆袭
其实之前微信也是有一些 JS API 的，比如分享。但这次一股脑开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个 API，这条消息不需宣传，瞬间就占满了 HTML5 从业者的朋友圈。
因为微信给所有做 web 开发的人打开一扇新窗户：使用 js，你也可以调用各种强大的原生能力了！
客观的讲，微信的很多能力组件非常强，比如扫码，很多原生应用的扫码效果都不如微信。现在 HTML5 开发者瞬间成功逆袭，他们原本无法实现扫码，现在却能轻松的开发扫码应用，而且效果比很多原生应用都好（当然前提是你的 web 应用运行在微信的管理之下）。
首先受益的是微信内置的腾讯系 App，比如大众点评、滴滴打车、京东购物等。
以前微信在钱包栏目下以很别扭的方式内嵌了滴滴打车的 HTML5 版本，那个版本的体验比滴滴的原生版本差太多，不能说话只能打字，没有地图看不到司机在哪。在体验为王的移动互联网时代，这个将就能用的版本出现在微信的钱包分类下，其实是微信的败笔。
但如今不同了，滴滴打车的微信版本，将拥有不输于其原生 App 的能力。而且不用下载 App 就可以秒开应用。
大众点评的受益就更大了，不止是其微信内嵌版本的能力将大幅增强。因为使用场景的不同，滴滴在朋友间分享的只能是红包，离打车这个业务场景有点远；而大众点评在朋友间可以分享优惠或推荐商家，直接形成消费，通过关系链导流的效果会非常明显。
HTML5 定稿时，我写过的一篇文章，提到过 HTML5 的一大优势就是打破 App 孤岛，直穿应用子页面。一张大众点评的优惠券，通过朋友分享，就可以通过点击分享内容直接到达这个商户的界面，进而直接购买，这点连大众点评的原生 App 也做不到。
微信给我们展示了一个新的 web 世界：能力和原生一样强，但在应用的获取、流量的转换上进一步领先于原生应用。
很快，我们就会看到各种公众号、微店全面升级支持微信 JS SDK。然后我们就会发现，原来市占率最高的手机浏览器，是这个没有地址栏的微信。
浏览器的传统思维被突破
微信这个巴掌把浏览器厂商拍的不轻。但是浏览器厂商又很难还击，因为这挑战了他们的思维传统。
在 HTML5 规范制定时，很多人都有一种思维：web 是开放的，地址栏和超链接可能带来任意恶意网页，所以我们不能把 HTML5 的能力做到太强，会引发安全问题。
微信给了这些人不同的答案。
首先微信开放的能力没有涉及过于隐私的 API，比如个人敏感信息或好友关系，当然这个估计永远也不会开放。最关键的是，所有使用微信 JS SDK 的网站，都必须实名到微信认证、缴费。它采取了类似 Apple App Store 的策略，由系统运营方来保障用户的安全。
这个由微信构建的新 web 世界，不再开放，由微信所管理，他根本就没有地址栏，所有能使用微信增强能力的网页都是经过认证权限的。
其实 HTML5 强化这个领域已经发展多年，也已经有了行业规范，HTML5Plus.org，微信此次把这些标准都抛在一边，就是一心建设自己的生态系统。
除了管理模式不同，微信的设计体现了他对于用户体验的不同理解。其实我们大多数人都会认可一点，在手机浏览器里输入 url 是一个体验比较糟的事情，但是浏览器厂商却一直墨守成规。
我们来解构下微信的设计。
在微信里，既然没有地址栏，那么如何到达一个 web 应用，它有几个 web 入口？答案是 5 个。
这 5 个入口里，没有传统的地址栏，甚至也没有搜索。
web 初生时，人们获取 web 信息是主动式的，通过地址栏访问网站，网站太多后开始使用搜索引擎。Google 的 page rank 算法告诉网民，被链接的网页越多，这个网页的价值越高。微信的理解里，大多数人们获取 web 信息是被动的，这里没有地址栏、没有搜索、没有 page rank，朋友发给你的、你订阅的公众号发给你的，就是你需要的 web 内容。
如果你真的想要主动获得内容，那也没有地址栏，但是有扫一扫。
可是扫一扫就不在微信的管理之下了吗？当然不会。很多 App 开发者头疼的就是他们的 APK 地址变成二维码后，微信是不能下载安装的，这可是浏览器不会干的事情，用户要下载什么那就允许下，最多给一个可能不安全的提示。但是微信说，APK 只能是来自应用宝的链接才可以下载。你不接受？那就别用扫一扫。
就这样，微信构建了一个独特的 web 生态系统。它有关系链推荐，不需要搜索引擎；它有消息系统，不需要电子邮件；它有增强的浏览器，有支付等业务闭环手段。最终一个完整而又封闭的 web 世界出现在微信里。信息在这里产生、在这里流转、在这里变现。手机上只需一个微信就够了，什么都能干了。
腾讯的战略
微信是仅仅强化了一批能力 API 吗？不是，大家还记得前段时间腾讯发布的 X5 浏览器内核吗？ X5 内核内置于 QQ 浏览器，在安装了 QQ 浏览器后，微信有着不同的表现，它将调起 X5 内核，与 JS SDK 协作实现更好的体验。X5 和 JS SDK，这究竟是一盘什么棋呢？
微信其实很早就能开放这些 JS SDK，甚至一度曾开放几个又收了回去，为何此时如此大力发展 web 生态系统？
我想到了前段时间马化腾的话，微信只是张“站票”，他还给腾讯提出的一个新愿景：连接一切。张小龙也曾仔细研读 KK 的《失控》，提出微信要营造一个森林，而不是造一个宫殿。
其实这些事情是相关联的。有战略需求，才会出现 X5、微信 JS SDK 这些支撑战略的产品。要论站票和卧铺的区别，那就是一个可以躺着挣钱。如何才能躺着挣钱，看看阿里巴巴就知道了。在阿里建立的庞大生态系统里，每天无数人努力赚钱，阿里坐享其成。
腾讯曾经数次努力电商，但怎么也赚不到阿里的钱。它只能走自己的路。就是马化腾所说的，回归本源，连接一切。
电商搞不定，那就不搞了，剥离和注资给京东。搜索搞不定，那就不搞了，剥离和注资给搜狗。不再天天盯着阿里、百度，腾出全部精力，在移动互联网时代，达成连接一切的愿景。
没错，基于微信这张站票，腾讯最终要打造出一个由他掌控的生态系统，而对于一个工具而言，构建生态系统的最佳技术路线就是 web，强化 HTML5 是打造更优质生态系统的必由之路。
而此时能做这事，还恰逢 HTML5 即将崛起的机会。一方面手机硬件的不断提升使得 HTML5 表现更好，另一方面，就是 Apple 对 HTML5 的态度在开放，或者说 Apple 整体都在开放。一方面 iOS 设备的市场份额远低于 Android，另一方面库克确实没有乔布斯强势，所以目前 Apple 的整体态度是开放的。前段时间 iOS8 发布，Apple 给第三方厂商开放了自己的 js 加速引擎 Nitro，以强化 iOS 设备上 HTML5 的表现。此时的微信 JS SDK 上线，不必再像以前那样担心无法通过 Appstore 审核。
而且事实实际上是反过来的，带有微信 JS SDK 的版本其实早已更新到 Appstore 了，只是前几天才给开发者公布了调用接口。
但是不管怎么样，这带有试探 Apple 底线的味道。如果仅仅在中国倒也是区域行为，但微信事实上已经遍布全球，当海外开发者也大量开发微信专属的增强 web 时，Apple 和 Google 会如何看待这个新的跨平台霸主？
开发者的机会
whatever，巨头们的烦恼让他们自己操作吧，我等创业者和开发者还是要抓紧这个机会快速发展自己，快速利用微信 JS SDK 开发出惊艳的 HTML5 应用，抢先占有用户。后面的比较技术，有兴趣开发 JS SDK 的开发者可以继续往下看。微信本次开放的 JS SDK 分类清单如下：
滴滴打车、大众点评这些微信内置应用的增强路线，将基本照着其原生 App 的模样演进。其他的开发者，还是要运营好自己的公众号，目前公众号分为订阅号和服务号。
订阅号的开发者提供的大多是资讯，那么对于资讯而言，可以利用 JS SDK 做的事情什么？
丰富内容形式，即除了图文，新增音频能力。类似电台的订阅号将有机会兴起。但微信暂时还没有开放视频能力，朋友圈里的小视频是原生实现的。在 Android4.0 以上的手机，安装了 QQ 浏览器后，微信网页里的视频播放才能被 X5 引擎优化。而目前使用 HTML5 标准的视频，会在低端手机上遭遇性能问题。所以视频还是缓缓再搞。
不管是做图文还是做音频，都应该利用新提供的设备 API 获取网络状态，WIFI 和 2G 下应该给予用户不同的内容以增强用户体验。
根据地域分发信息。资讯也是有地域性的，类似地方台的订阅号以后也会占有一席之地，而这也非常符合微信打造森林的生态初衷。
服务号就五花八门了，很多大企业有自己的掌上客服 App，这回可以整体搬迁到微信上了，这也给企业服务开发商很多新商机；
对于可线上交易的微店，微信小店和支付这些 API 必不可少。微店的商品，这下可以直接被分享出去，只要东西好，传播更容易、销量也会高升；
对于线下消费的 O2O，地图和卡券很重要。卡券对微信而言是个新东西，之前 iOS 已经有了 passport，大众点评也有自己的会员卡体系，但微信自己做了一套，相信体量会做的更大，以后大家出门不用在钱包里塞那么多卡了，都在微信里了。
微信官方还推荐了几个 App 供开阔思路。
印美图是一个云打印 App，自拍的美图，可以直接提交给这个 App 的后台，运营方打印好照片快递给你。微邮筒是一个语音明信片，在明信片里留下自己的声音，再发给朋友，并且可以长期保存在服务器。
微信官方没有提供开发和调试配套的服务，客观地讲，开发和调试的便利性很不好。推荐一个免费开发工具 HBuilder，可以完美支持微信 JS SDK 的语法提示，大幅提升开发效率。下图中敲 wxc 回车就能生成一段完整的微信 API 初始化的长长代码，还能给予各种参数的值域提示。
接下来会如何
我们都很确信，JS SDK 的这个版本只是一个开始，未来腾讯还为了强化其 web 生态系统建设而不停升级产品。
1. 会颠覆原生 App 吗？
微信 JS SDK 继续升级下去，真的会颠覆原生 App 吗？目前的微信 JS SDK，属于 web 增强，它依然还不能离线使用，还没有解决网页跳转间白屏的体验，也不能在手机桌面创建快捷方式，暂时它并没有向着努力做到和原生一模一样体验而前进。
就腾讯连接一切的愿景而言，它应该没有颠覆原生这个战略目标。但是这个月活 4 亿的平台势必会更大程度占有用户使用手机的时间，自然也会大幅影响原生 App 的流量。对于普通用户而言，每天使用手机的时间是有限的，之前每天看着手机屏幕的总时长里可能 60% 是被微信占去的，那么微信未来可能会占去 80% 的时间。
另外微信虽然没有颠覆原生 App 的愿景，不代表其他人不会做这件事。IT 行业总是在持续创新和突破的，除了微信，还会有其他大型 HTML5 的平台出现，可以预见 HTML5 成为主流已是不可阻挡的趋势。
2. 微信会重构移动搜索吗？
这个概率其实很高。在微信现在的 API 里，有一个智能语义的接口，传入“查一下明天从北京到上海的南航机票”，就会返回结果。很像 siri 是不是？其实微信完全可以现在就在扫一扫下面加一个说一说，但是他目前没有这么做，是因为搜狗还不够强大？还是因为不想过早刺激百度？ 确实相比起来，腾讯在手机上抢夺百度份额的胜算是远高于抢夺阿里的。但是手机端广告市场一直没起来，抢掉搜索份额又如何？
3. 微信会重构移动电商吗？
其实单纯的套 PC 互联网的模式给移动互联网是不对的。腾讯最关心的不是移动电商，它更关心移动支付。所以易迅才会被剥离给京东。腾讯十年总结时曾说，是互联网网民的高速增长红利造就了腾讯的今天。其实类似于雷军风口的理念。
移动支付，是一个大风口，是未来若干年高速增长的产业。
我们可以预见，未来移动支付的用户数会越来越多，交易额会越来越多，直到颠覆现金的地位。但移动支付可不只是在电商网站买东西付款，更多场景在 O2O 范畴里。
移动支付大战里，腾讯一方面通过微信红包发展用户，另一方面通过资本手段控制支付场景，其投资的滴滴打车、大众点评、京东电商，这些合作伙伴的业务都是高频的支付场景，其成功的帮助腾讯发展了移动支付体系。
当然阿里也不甘示弱的支持快的和美团。滴滴和快的的补贴大战、大众点评和美团补贴大战，看似疯狂，其实都是为了移动支付这张船票，为了未来十年的继续高速增长是任何一个巨头都不愿错过的。
在未来人们的衣食住行里，买衣服花钱用阿里和腾讯，吃饭花钱用阿里和腾讯，出门打车结帐用阿里和腾讯，就是买房好像不太好做移动支付。
另外近期在医疗领域，移动支付之争也打响了，那意味着以后看病，也用移动支付。
微信的 JS SDK，其实很大程度上就是为了把这些需要花钱的 App 控制在自己的生态下，微信给这些 App 提供流量、提供更强大的运行环境，大家努力挣钱，然后微信躺着分钱。
4. 不管怎么样，HTML5 会大火特火
腾讯的这条构建 web 生态系统的路，还是有很多高手已经看懂了的。很快各大互联网巨头都会有自己的对策。但不管是什么对策，都是要基于 HTML5 来做了。
对于 HTML5 的开发者和从业者，这都将是一个最好的时代。
本文作者王安，DCloud公司CEO，W3C会员、HTML5中国产业联盟发起人，HTML5开发工具HBuilder设计师，十几年web和手机开发经验，个人邮箱：wangan@dcloud.io。
[本文来自读者的投稿，不代表36氪立场]
*请认真填写需求信息，我们会在24小时内与您取得联系。
