整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
源：眾成翻譯 譯者：betsey
游戲的靈感
在使用過一段時間的SVG動畫之后，我相當(dāng)清楚如何利用它來制作動畫片段或者網(wǎng)頁布局。一些動畫庫平臺，例如Greensock，和原生的CSS動畫簡直是絕配。于是我便打算深入地研究一下，看看我能否用這些來制作一款簡單的游戲。就像一個精美的工藝品一樣，好的游戲擁有許多細致的動畫細節(jié)。有一天夜里，我的腦海中突然閃現(xiàn)了一個游戲的靈感，我馬上起來，畫了一些草圖，之后給我的哥哥看--他是一個專業(yè)的網(wǎng)頁設(shè)計師。我們立即開始著手設(shè)計，討論了所有的細節(jié)動畫后（試著畫出來并且配以音效），我便開始進行游戲開發(fā)。
如何玩: 來回彈跳的球是可以改變顏色的。你必須隨時觀察球當(dāng)前的顏色，并且在球和柱子相接觸的一瞬間，確保兩者的顏色是一樣的。點擊柱子可以改變它的顏色，單擊變紅，雙擊變黃，三擊則變?yōu)樽仙?/p>
這里是游戲的完整版: http://codepen.io/gregh/full/yVLOyO
創(chuàng)作的過程
在開發(fā)這款游戲的過程中，我不斷地遇到問題并重構(gòu)代碼。其中的一個最主要的問題就是，如何能讓游戲在所有的設(shè)備和所有尺寸的顯示器上都看起來不錯。我使用我的Macbook Pro 開發(fā)，游戲的畫面很棒。但是當(dāng)?shù)搅?27" iMac screen 上時，整個畫面就看起來特別小，當(dāng)然在iPhone又會顯得特別大。我真心地希望可以有一把適配所有設(shè)備的“萬能鑰匙”。經(jīng)過了許多次的嘗試之后，我清楚地意識到，傳統(tǒng)的使用媒體查詢的技術(shù)來做響應(yīng)式設(shè)計是行不通的。
這篇文章并不是一個教程，因此我將不會逐行的解釋我的代碼。但是，我會展示給你一些十分酷的東西，你可以通過在CodePen上或者是在瀏覽器的調(diào)試工具里面修改參數(shù)進行測試。同樣，我也會在相應(yīng)的地方寫出一些參考資料。在CodePen上，我盡可能多的寫出代碼注釋，趕快去看看代碼吧！
十分強大的GSAP讓我理所當(dāng)然地選擇了它，而我選擇在CodePen上面寫碼的原因是它內(nèi)置了一個Babel編譯器，這樣我就可以在上面書寫ES6的語法，你不知道Class和箭頭函數(shù)有多好用！ 關(guān)于ES6的特性介紹，你可以點擊這里: https://github.com/DrkSephy/es6-cheatsheet
使用GreenSock制作動畫
我下面假設(shè)你熟悉GSAP用法,但如果你不熟悉的話，你可以看下這個“討厭番茄”的人的關(guān)于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/
背景動畫
幾乎所有你能在背景上看到的東西都是用SVG制作的。每個波浪是一個獨立的<div>,每一層的山峰也是一個<div>,甚至云也是<div>。當(dāng)你在制作一個復(fù)雜的動畫時，有一點是需要注意的。你完全可以使用一整個SVG當(dāng)做背景，然后為這個SVG的子元素和路徑來制作動畫。Greensock允許我們這樣做，你需要做的僅僅是為這些SVG的元素（比如說path，group等等）分配一些ID，然后用過ID選擇到他們。但這樣做的問題在于，在移動設(shè)備上，這些動畫跑不動。所以你最好是把這些背景元素放在獨立的<div>里面，然后為這些<div>添加動畫，我實際上就是使用這些SVG的作為背景。
通過類似于上面的代碼，我們就得到了一些簡單的補間動畫。這些動畫可以將背景水平地移動54個像素（也就是背景的寬度），在這里我們想要背景勻速地移動，所以我們不需要緩動動畫。當(dāng)我們?yōu)槊總€背景設(shè)置不同的移動速度的時候，他們就有表現(xiàn)出了視覺差的效果，看上去很酷吧！
看到畫面上漂浮著一些白色的小圓點了沒？我創(chuàng)造了這些圓點并為他們設(shè)置了隨機的位置和尺寸，接著我讓他們做圓周運動。
這樣他們就緩慢地進行圓周運動，但看上去卻像隨機運動一樣。
柱子動畫
每一個柱子里都有一些會動的小元素，這些小元素僅僅是由HTML和CSS制作出來的。使用SASS可以節(jié)省很多時間和代碼量（通常情況下是這樣的）。我通過創(chuàng)建形狀的mixins來為這些柱子里面的小東西添加效果。如果我們看下bublble這個效果的代碼，我們就會發(fā)現(xiàn)每個圓圈都使用了絕對定位并使用到了這個mixin。在CSS中創(chuàng)造三角形需要很多的代碼，所以mixin就派上了大用場。
讓我們看看紅色的柱子，柱子里面包含著很多的氣泡：
所以現(xiàn)在，如果想要在柱子里面創(chuàng)造一些氣泡的話，我只需要調(diào)用這些mixin，設(shè)置氣泡的大小，然后讓把他們放在柱子的特定的位置上就好了：
當(dāng)你需要通過邊框來制作一些小的三角形的時候，你需要用大概20行的css代碼來生成，所以使用mixin實在是太有必要了。
氣泡的動畫
我使用交錯動畫來做這個效果。這個動畫可以操控柱子里面所有的氣泡元素，并且可以讓每個氣泡有一個小小的延時，讓他們不會同時開始運動。點擊這個鏈接，你可以了解更多的關(guān)于交錯動畫的知識:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/
三角形的動畫
在黃色的柱子里面，我使用到了旋轉(zhuǎn)的效果。但是你可能注意到，有些旋轉(zhuǎn)是圍繞著X軸的，有些是圍繞著Y軸進行運動的。我們在這里使用到了 cycle屬性。
方塊的動畫
在制作方塊的動畫的時候，我們也使用到了相同的技術(shù)。因此，有一半的方塊是從左向右移動的，而另外一般則做反方向的運動。
分數(shù)的動畫
讓我們點擊重新開始，再看下這個動畫吧.
我想要分數(shù)的動畫有一種“Q彈”的感覺，于是我就寫了幾行代碼來形成這個效果。
為了做出這種“觸電”（或者說是“Q彈”）的效果，我們需要制作正確的緩動動畫。如果你想要看看你可以使用什么樣的緩動方程，看下 Greensock 緩動觀察器:http://greensock.com/ease-visualizer 選擇 Elastic 并調(diào)整配置參數(shù)，你就可以實時地看運動效果。
彈性盒子
這款游戲的第一個創(chuàng)新性就是使用了“彈性盒子”，如果要是不了解彈性盒子的話，你可以閱讀下這篇優(yōu)秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相關(guān)系列。一旦你開始使用了彈性盒子，你就再也離不開它。下面我們看下我的的主菜單界面和游戲界面吧。
開始游戲的容器CSS樣式如下：
“flex-direction: column”表示在容器內(nèi)部彈性元素的排列方向。 設(shè)置為Column，則元素從上到下依次排列。而默認的（row）則將元素從左到右排列。彈性盒子可以這只空白區(qū)域，我們可以設(shè)定我們是在元素的前面、后面或者周圍放置這些空白區(qū)域。動手試下，感受下彈性盒子是多么好玩吧！因為我們設(shè)置成了“space-between”，所以 Top 被放在了頂部， How to Play被放在了底部，而Logo Holder則放在了中間，空白區(qū)域被填充在了這些元素之間。 Align-items: center, 定于交叉軸（這個游戲中代表水平軸）上元素的對齊方式，center表示居中對齊。其中 How to Play也是一個彈性盒子，它的代碼如下:
它也是一個flex元素，我們?nèi)绻ピO(shè)定他的flex-direction, 它將使用默認值（row），將其中的三個彈性元素水平的排列。第一個和第三個元素的“flex”參數(shù)為1，因此他們將占據(jù)所有的空白空間，flex是一個相當(dāng)高端的特性。同樣的，你也可以通過在How to Play上設(shè)置 justify-content: space-around來達到同樣的目的.我使用flex: 1 的原因是，我想讓中間的一列排在屏幕的最中央。
下面我們看下游戲界面。這個界面也是一個彈性布局。界面有一個柱子容器和一個球的容器。我不想讓球是絕對定位的，因為我通過css讓球剛好坐在柱子上，這樣即使我改變柱子的高度，我也不需要改動其他代碼就可以讓球恰好落到柱子上。因此我將容器的flex-direction設(shè)置為 column,正如我所愿，球容器剛好緊挨著柱子的頂部。justify-content: space-between讓球的容器永遠靠著屏幕的頂部，而柱子容器永遠靠著屏幕的底部。 現(xiàn)在我們給球的容器如下的樣式:
球的容器也是彈性布局，我們將flex方向設(shè)為column（這樣Y軸成為了主軸，元素從上到下排列）。之后我們通過 justify-content: flex-end將球推到了容器的底部，因此，我們便得到了兩個緊密排列的容器，并且第一個容器的內(nèi)部元素被推到了該容器的最下面，這樣我們便做到了讓球坐在了柱子上的效果。
試想下，如果我們不使用彈性布局會怎么做？我們也許會使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox讓整個界面變得如此整潔有條理，寫碼簡直爽翻了.
讓游戲界面可縮放
做這個游戲，最重要的事情是讓畫面變得可縮放。看下這款游戲在不同尺寸的屏幕上達到了完美的效果！如同我說的，我僅僅是使用了 CSS transform， 這樣做具有它獨特的挑戰(zhàn)性。假如游戲的默認大小是 1200x800px.嗎，如果你的屏幕大小和這個不一樣的話，你需要通過調(diào)節(jié)系數(shù)讓游戲的容器變得大一些或者小一些，也就是做個計算"screenHeight/800\".當(dāng)然，如果設(shè)備的高度大于寬度的時候（當(dāng)我們的平板或者手機處于垂直模式的時候）我們也需要相應(yīng)地縮放我們的屏幕，下面是計算縮放比例的代碼 :
顯然僅僅是這樣做不能讓視覺體驗變得完美，所以我們需要在縮小我們的游戲界面的同時讓它垂直水平居中。
因此，我們需要讓整個游戲的容器以相同的尺寸放大，這樣當(dāng)縮放界面的時候，容器可以100%的占據(jù)屏幕的尺寸。如果我們將界面縮小到原始尺寸的一半的時候，我們需要讓它的容器放大到原來的兩倍大小，這樣容器便可以充滿整個屏幕。相反如果屏幕很大的時候，我們需要將界面變?yōu)樵瓉淼?.2倍，那么容器將相應(yīng)的從原始尺寸縮小到 screenSize/1.2
后記
我希望你能喜歡這個游戲和我寫的這篇文章，我也希望通過這篇文章，你可以收獲一些新的東西并作出十分精彩的作品
我將持續(xù)不斷地完善我的游戲，并相應(yīng)地更新文章，增加新的玩法或者嘗試些新的技術(shù)哦！
本文由眾成翻譯（zcfy.cc）的譯者翻譯完成，搶先閱讀更多優(yōu)質(zhì)英文技術(shù)文章，歡迎訪問眾成翻譯。
機現(xiàn)在是互聯(lián)網(wǎng)的最大入口。根據(jù)《中國互聯(lián)網(wǎng)報告》[1]，手機網(wǎng)民已經(jīng)超過8億，人均每天上網(wǎng)三個多小時。
毫不奇怪，手機應(yīng)用軟件（mobile application，簡稱 mobile App）的開發(fā)工程師供不應(yīng)求，一直是 IT 招聘的熱門。
如果你開始學(xué)習(xí)手機 App 開發(fā)，就一定會聽到 H5 這個詞。它是目前的主流開發(fā)技術(shù)之一，容易上手，開發(fā)周期短、成本低、兼容傳統(tǒng) Web 開發(fā)。但是，很少有文章詳細介紹，H5 到底是什么技術(shù)，有什么原理，跟其他技術(shù)的差異在哪里。
本文就是 H5 的入門教程，今天是第一篇，介紹基本概念。內(nèi)容盡量通俗，不過本來也沒有太復(fù)雜的東西。我希望這篇文章可以幫助新手入門，也可以供熟練開發(fā)者回顧和整理知識點。
感謝國內(nèi)最大的在線教育平臺之一“騰訊課堂”[2]贊助這個系列教程。他們現(xiàn)在啟動了“騰訊課堂101計劃”[3]，推廣優(yōu)質(zhì)課程資源。希望提高前端技術(shù)水平的朋友，可以留意一下本文結(jié)尾的課程“一元錢”課程信息。
表面上看，手機 App 都是同樣的東西，就是手機上的應(yīng)用程序，點擊圖標就能運行，但是它們的底層技術(shù)不一樣。按照開發(fā)技術(shù)，App 可以分成三大類。
?原生應(yīng)用（native application，簡稱 native App）?Web 應(yīng)用（web application，簡稱 Web App）?混合應(yīng)用（hybrid application，簡稱 hybrid App）
這三類 App 的技術(shù)模型都不一樣，各有優(yōu)缺點。企業(yè)一般會選擇其中一種作為主要技術(shù)棧，構(gòu)建自己的手機 App。
H5 這個詞，可以理解成就是混合 App 模型，只不過它特指混合 App 的前端部分。因為混合 App 的前端就是 HTML5 網(wǎng)頁，所以簡稱 H5。這個詞是國內(nèi)獨有的，基本上都是前端程序員在用，國外不用這個詞，就直接叫混合 App。
真正理解 H5 開發(fā)，需要先搞清楚什么是原生 App、什么是 Web App，因為混合 App 是在它們的基礎(chǔ)上誕生的。
原生 App 是專門為特定手機平臺開發(fā)的應(yīng)用程序，無法在其他平臺運行。一個手機軟件如果要同時支持蘋果手機和安卓手機，就需要為它們各寫一個原生 App。
歷史上，原生 App 最早出現(xiàn)，跟智能手機系統(tǒng)一起誕生。2007年6月 iPhone 誕生，2008年9月安卓誕生，就同時發(fā)布了自家平臺的原生 App 開發(fā)方法。
原生 App 使用與手機操作系統(tǒng)相同的語言。iOS 的原生 App 使用 Objective-C 語言或 Swift 語言，安卓使用 Java 語言或 Kotlin 語言。由于跟底層系統(tǒng)的語言和技術(shù)模型一致，所以原生 App 的性能和用戶體驗都很好。
原生 App 的優(yōu)點主要是兩個：（1）較好的性能和體驗；（2）可以使用系統(tǒng)的所有硬件和軟件 API，比如 GPS、攝像頭、麥克風(fēng)、加速計、通知推送等等，能充分發(fā)揮系統(tǒng)的潛力。
原生 App 的缺點主要是成本，每個手機平臺都要建立一個獨立的開發(fā)團隊，大公司一般都有 iOS 和安卓兩個開發(fā)團隊。如果出現(xiàn)第三個平臺（以前的 Windows Phone，也許將來的華為鴻蒙 OS），就要組建第三個團隊，成本就更高。
第二個缺點是，原生 App 使用底層操作系統(tǒng)的語言，都是很重的編譯型語言，開發(fā)和調(diào)試成本相對較高，時間周期長。
第三個缺點是，原生 App 必須下載安裝才能使用，只要升級版本，就必須重新下載安裝。用戶往往不愿意更新版本，廠商被迫不得不長期支持很久以前的舊版本。
Web App 是使用網(wǎng)頁做的應(yīng)用程序，必須在瀏覽器中使用。比如，你在瀏覽器中收發(fā)郵件，就是在使用 Web App。
Web App 主要使用網(wǎng)頁技術(shù)，即 HTML、JavaScript 和 CSS。2008年，w3c 組織發(fā)布了 HTML 第5版，簡稱 HTML 5，該版本大大增強了網(wǎng)頁的功能，使得網(wǎng)頁可以當(dāng)作應(yīng)用程序使用，而不僅僅是展示文字和圖片，這就是 Web App 的由來。
Web App 的優(yōu)點是：（1）不需要下載安裝，打開瀏覽器就能使用，而且總是使用最新版本；（2）對于開發(fā)者來說，Web App 寫起來比較快，調(diào)試容易，不需要應(yīng)用商店的批準就能發(fā)布。
Web App 的主要缺點有兩個。首先，瀏覽器提供的 API（即 Web API）很有限（目前只有相機、GPS、電池等少數(shù)幾個），大部分系統(tǒng)硬件都不能通過網(wǎng)頁訪問，也無法直接讀取硬盤文件，所以 Web App 無法充分利用平臺的硬件。
第二個缺點是，網(wǎng)頁通過瀏覽器渲染，性能不如原生 App，不適合做性能要求較高的頁面。
Web App 需要打開瀏覽器才能使用，這意味著，用戶必須記住如何導(dǎo)航到它，要么直接輸入網(wǎng)址，要么翻找書簽。這使得進入 Web App，遠不如原生 App 方便。這點很致命，事實表明，用戶偏好原生 App。
谷歌曾經(jīng)調(diào)查了原生 App 和 Web App 各一千個，發(fā)現(xiàn) Web App 可以覆蓋更多的用戶（1100萬 vs 400萬），但是原生 App 的用戶使用時間（188分鐘）遠超 Web App（9分鐘）。
另一項調(diào)查發(fā)現(xiàn)，用戶87％的時間用在原生 App，13％的時間用在 Web App。由于這個原因，企業(yè)很少開發(fā) Web App，都把原生 App 當(dāng)作首選。
但是，Web App 也不是毫無競爭力。根據(jù)調(diào)查，普通用戶每月平均使用27個原生 App，但訪問了100多個手機網(wǎng)站。這意味著，用戶的 App 使用時間都被頭部 App 占據(jù)了，小公司的 App 使用頻率非常低，獲客成本極高，最終變成僵尸 App。因此，小公司開發(fā) Web App 更劃算，不僅成本低，而且可以服務(wù)更多的用戶，以及更好地宣傳自己（可以被搜索引擎收入）。
為了推廣 Web App，谷歌公司的 Chrome 瀏覽器團隊做了很多努力。他們認為，Web App 足以滿足大多數(shù) App 的需求，但是三大缺陷阻礙它的推廣。
1.不能從手機的首屏直接進入。2.缺乏手機狀態(tài)欄和鎖屏?xí)r的通知推送能力。3.不支持脫機訪問（即斷網(wǎng)也能使用）。
為了解決這些問題，Chrome 團隊開發(fā)了新技術(shù)“漸進式 Web App”（Progressive Web App，縮寫 PWA）。它可以把網(wǎng)站緩存在手機里面，供離線時使用，還能在手機首屏生成圖標，直接點擊進入，并且有通知推送能力，也不帶有瀏覽器的地址欄和狀態(tài)欄，跟原生 App 的使用體驗非常接近。
但是，PWA 需要瀏覽器訪問一次網(wǎng)站，才能在首屏生成圖標，并且目前 iOS 系統(tǒng)的支持還不夠理想，所以還只是一項探索性質(zhì)的技術(shù)，迄今為止缺乏足夠的成功案例。
混合 App （hybrid App）顧名思義就是原生 App 與 Web App 的結(jié)合。它的殼是原生 App，但是里面放的是網(wǎng)頁。可以理解成，混合 App 里面隱藏了一個瀏覽器，用戶看到的實際上是這個隱藏瀏覽器渲染出來的網(wǎng)頁。
混合 App 的原生外殼稱為“容器”，內(nèi)部隱藏的瀏覽器，通常使用系統(tǒng)提供的網(wǎng)頁渲染控件（即 WebView 控件），也可以自己內(nèi)置一個瀏覽器內(nèi)核。結(jié)構(gòu)上，混合 App 從上到下分成三層：HTML5 網(wǎng)頁層、網(wǎng)頁引擎層（本質(zhì)上是一個隔離的瀏覽器實例）、容器層。
混合 App 里面的網(wǎng)頁不同于普通網(wǎng)頁，可以調(diào)用底層系統(tǒng)所有的 API。奧秘就在于外層容器提供了 API Bridge，充當(dāng)?shù)讓?API 的中介，允許內(nèi)部的網(wǎng)頁調(diào)用底層。
所謂 API Bridge 就是容器在底層接口和網(wǎng)頁之間，建立一座橋梁，讓雙方通信。容器一旦接到網(wǎng)頁的請求，就根據(jù)請求去調(diào)用底層系統(tǒng)的 API，然后再返回結(jié)果給網(wǎng)頁。API Bridge 往往以 JavaScript 語言提供，方便網(wǎng)頁調(diào)用，這時又稱為 JSbridge。
不同容器的 API Bridge 是不一樣的。為某個容器寫的網(wǎng)頁，不能放在另一個容器使用，也無法在瀏覽器使用，除非網(wǎng)頁腳本做了兼容處理。
容器提供的 API Bridge 必須跟著平臺更新。比如，iOS 發(fā)了新版本，有了新的硬件 API，容器也必須跟著推出新版的 API Bridge。如果容器沒有跟上，開發(fā)者為了使用新的硬件，就只能想辦法自己來寫缺失的 API Bridge。
混合 App 同時具有原生 App 和 Web App的優(yōu)點，又可以避免它們的一些缺點。具體來說，可以總結(jié)為三點。
（1）跨平臺
Web 技術(shù)是跨平臺的，開發(fā)者只寫一次頁面，就能支持多個平臺。也就是說，混合 App 只需要一個團隊就夠了，開發(fā)成本較低。
（2）靈活性
混合 App 的靈活性大，很容易集成多種功能。一方面，混合 App 很容易加載外部的 H5 頁面，實現(xiàn) App 的插件結(jié)構(gòu)；另一方面，Web 頁面可以方便地調(diào)用外部的 Web 服務(wù)。
（3）開發(fā)方便
Web 頁面的調(diào)試和構(gòu)建，遠比原生控件簡單省時。頁面的更新也容易，只要在服務(wù)器上發(fā)布新版本，觸發(fā)容器內(nèi)更新就可以了。另外，Web 開發(fā)人員也比較容易招聘，傳統(tǒng)的前端程序員可以承擔(dān)開發(fā)任務(wù)。
混合 App 的主要缺點是，由于存在網(wǎng)頁引擎的中間層，所以性能比較欠缺，不僅不如原生 App，而且由于 WebView 不是全功能瀏覽器，可能比 Web App 都要慢一些。
另一個缺點是，由于頁面跨平臺，就無法使用只有特定平臺提供的功能，導(dǎo)致體驗不如純的原生 App。舉例來說，早期的時候，安卓有物理的后退按鈕，iPhone 沒有，頁面設(shè)計不得不考慮這一點。
上圖是 iOS 頁面。
上面是安卓頁面，左上角的后退按鈕，跟系統(tǒng)的后退按鈕重復(fù)了。
最后，再來談?wù)勎⑿判〕绦颉?/p>
所謂小程序，可以看作是針對特定容器的 H5 開發(fā)。微信本身是一個容器，開放自己的接口（JSbridge），外部開發(fā)者使用規(guī)定的語法，編寫頁面，容器可以動態(tài)加載這些頁面。
小程序?qū)τ谖⑿殴俜降暮锰幨牵瑪U展了功能和應(yīng)用場景，吸引外部開發(fā)者加入，繁榮了生態(tài)。對于外部開發(fā)者的好處是，有了流量入口，可以直接調(diào)用微信的各種功能（比如支付）。
今天對于 H5 相關(guān)概念的介紹，就到這里為止，下一篇文章將介紹 H5 相關(guān)開發(fā)工具和框架。
（正文完）
當(dāng)今時代，IT 教育蓬勃發(fā)展，各種課程層出不窮，知識唾手可得。你可能經(jīng)常領(lǐng)取到海量的前端開發(fā)資料包，往往收藏起來就再也沒看過。
Vue.js 就是這種情況，作為前端的主流框架之一，國內(nèi)有著廣泛應(yīng)用，市場招聘需求大。前端培訓(xùn)機構(gòu)幾乎一定有它的課程，而且都是重點推廣，每個學(xué)員都會拿到一大堆學(xué)習(xí)資料。
怎樣才能做出有特色的 Vue.js 教程呢？北京的京程一燈現(xiàn)在就推出了一個專項課程 《你不知道的Vue.js 性能優(yōu)化》。他們是騰訊課堂前端培訓(xùn) TOP 機構(gòu)之一，專注培養(yǎng)年薪40萬的高級前端工程師，目前和騰訊課堂聯(lián)合運營，畢業(yè)生平均薪水可以達到25.5K。
為了與市場上其他課程區(qū)隔，保證輸出優(yōu)質(zhì)內(nèi)容，讓學(xué)員真正有收獲，本次專題課深度講解 Vue.js 性能優(yōu)化，以及 Vue3.0 那些值得關(guān)注的新特性。高級前端崗位面試中，性能優(yōu)化是一個必問的知識點，本課程通過對 Vue 面試核心知識點的拆解，帶你解鎖 Vue.js 性能優(yōu)化，目標是幫助學(xué)員拿到大廠 offer。下面是課程部分內(nèi)容。
1.Vue首屏優(yōu)化實踐。2.核心優(yōu)化方案和工程化剖析3.面試常問的 Vue 雙向數(shù)據(jù)深度解析4.深度對比 Vue2 & 3 的雙向數(shù)據(jù)綁定
購課之后，還將贈送價值196元的《Webpack 從入門到精通》全系列教程。
[1]《中國互聯(lián)網(wǎng)報告》:https://www.ifanr.com/1254954
[2]“騰訊課堂”:https://ke.qq.com/
[3]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm
兩年來HTML5在移動互聯(lián)網(wǎng)領(lǐng)域頗為風(fēng)生水起，更有“年年都是HTML5元年”的戲謔話語。不可否認，HTML5帶來了顛覆性的變革，已成應(yīng)用開發(fā)的必然趨勢，但其前景究竟如何？何時才是真正爆發(fā)點？在日前舉行的HTML5游戲生態(tài)大會上，專注于HTML5游戲開發(fā)的共同探討HTML5游戲開發(fā)者們最關(guān)心的問題。
2015年HTML5市場現(xiàn)狀：如何解決付費痛點？
從游戲、應(yīng)用到廣告，HTML5用戶越來越廣泛，甚至很多都取代了原生的解決方案。即連即玩、病毒傳播、高用戶黏性，HTML5游戲在保證品質(zhì)、玩法和表現(xiàn)力不輸超級App和原生游戲的同時，能夠極大地增加用戶駐留時間，加強應(yīng)用商店的用戶黏性。
數(shù)據(jù)顯示，截至目前，HTML5游戲已有1.2億左右的用戶規(guī)模，而今年還將突破1.71億。原生游戲和HTML5游戲比是5:3，兩種游戲之間的重疊度達到60%，HTML5游戲在從輕度向中重度發(fā)展，RPG游戲比重在不斷升高。
另外，盡管HTML5游戲有著易傳播的優(yōu)勢，但是付費率卻一直是痛點。對此，《圍住神經(jīng)貓》制作人秦川從技術(shù)角度總結(jié)了HTML5的三個變現(xiàn)方向：企業(yè)定制、品牌推廣、品牌宣傳；以HTML5為交接點，打通線上線下O2O；道具、內(nèi)容付費。
HTML5游戲開發(fā)的那些坑
即使開發(fā)HTML5游戲，也面臨著各種機型適配的難題。秦川表示，目前手機性能參差不齊，重度游戲只能在少數(shù)機器上正常運行，而HTML5在原生基礎(chǔ)上性能又再差一層，適配到Android手機上便會出現(xiàn)各種各樣的問題。而開發(fā)《愚公移山》的比悅科技CEO 陳陳則講道：“對于一個開發(fā)者，首先需要思考的是怎么做才能進入這個市場，第二錢在哪兒？第三，怎么把錢賺過來。其實開發(fā)游戲和做游戲時兩個層面，開發(fā)是研發(fā)本身應(yīng)該做的事情，但做游戲，必須要了解整個游戲行業(yè)多年積累下來的東西，如何讓用戶喜歡游戲。”
而讓開發(fā)者頭疼的問題還有用戶留存，冗長的入口是用戶留存的關(guān)鍵點，每一步都會流失大量用戶。如果將入口從三級提升到二級再提升到一級，HTML5游戲用戶留存率會有很大的提高。除此之外，支付流程也給了用戶留存致命一擊，主要表現(xiàn)在支付流程不順暢與安全問題。
HTML5游戲內(nèi)容還是渠道為王？
與App手游相比，HTML5游戲更加依賴渠道，但卻難以尋找到新的出路。從朋友圈的分享、工具類App的游戲頻道到瀏覽器的推薦，已經(jīng)形成規(guī)范運營和實際收入的渠道依然還是少數(shù)。
談到內(nèi)容與渠道問題，白鷺引擎聯(lián)合創(chuàng)始人張翔表示，整個HTML5生態(tài)還是以內(nèi)容為王，無論是端還是引擎，都只是提供基礎(chǔ)工具，只有產(chǎn)生好的內(nèi)容，整個產(chǎn)業(yè)才能跑起來。愛貝云計費王闖則表示，現(xiàn)在用戶了解游戲的來源大多來自渠道，很多CP更愿意從渠道獲取資源。但內(nèi)容同樣重要，如果產(chǎn)品本身有問題，不吸引人，渠道肯定不會給資源，所以，對于開發(fā)者而言，踏實做好產(chǎn)品才是重中之重。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
