整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次請來的設計師比較帶感，有三個特質：
他是第一批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小時內與您取得聯系。
