整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
紹一個可運行的微信小程序登錄+支付的demo。接觸了小程序簡易教程的，想必都知道我們必然有自己的后臺應用服務器，來處理我們自己的業務邏輯、請求微信服務完成一定的功能。在此，我們的后臺采用java環境，本文將首先介紹環境搭建的過程，隨后介紹登錄+支付的流程及代碼。
一、后臺web服務環境搭建
1. 安裝jdk、tomcat，ICP備案的域名準備。
Linux安裝jdk：https://blog.csdn.net/zhang918784312/article/details/79751283
Linux 安裝tomcat：https://www.cnblogs.com/EasonJim/p/7202844.html
經過icp備案的域名，請自行準備。
2.配置https，由于小程序請求url必須是https，故而必須配置支持https請求。本人采用的是在阿里云購買的域名，故而采用的證書也是阿里云生成的ssl證書，可參考如下兩篇博文進行配置。當然，你也可以通過別的方式生成證書，更或者通過nginx作反向代理到你的服務器。
https://blog.csdn.net/qq_28189091/article/details/75078164
https://blog.csdn.net/z_xuewen/article/details/78176509
同時，務必將您的小程序域名綁定在小程序后端。登入小程序后臺，【設置】-【開發設置】-【服務器域名】
如上兩步完成后，請務必確認通過你的域名(https://...)可以展示tomcat的默認頁之后，開始部署我們的web服務。在此，就簡單粗暴的在webapps下建立小程序的根目錄，我命名為wechatserver，在此目錄下，創建WEB-INFO，下面的目錄結構如下：
classes存放自己寫的類的classes文件，lib存放我們項目依賴的jar包，logs用于存放我們的日志輸出，web.xml是我們這個項目的配置。demo中，我們只有一個servlet接收小程序前端請求，web.xml中增加配置如下：
4. log4j 應用在開發調試中，我們免不了需要通過打印日志進行調試，因此在此增加了日志的使用。web.xml中增加配置：
在classes增加文件，log4j.properties，內容如下：
log4j 在java中的引用、使用：public static Logger logger=Logger.getLogger(WechatServlet.class);logger.info(“打印信息”);
基于微信小程序工具生成的默認hello world程序，pages下先建立目錄order，隨后在order目錄生成一個新的page，命名為order，結構如下圖：
image
在index中增加按鈕，進入order。index.wxml
order.xml中描述商品信息，增加支付按鈕，order.js 支付事件處理。
2. 登錄+支付 code
流程大概分為幾步：
1）登錄，獲取code（一個code只能用一次）
2）通過code獲取openid（通過請求服務器，由服務器請求微信獲取并返回小程序）。微信登錄+獲取openid接口。
3）小程序請求服務器進行預下單，上送商品詳情、金額、openid。
4）服務器端接收請求，根據請求訂單數據、生成第三方訂單號，調用微信的統一下單接口。
5）服務器收到預下單信息后，簽名并組裝支付數據，返回給小程序。所需數據見：小程序支付接口
6）小程序前端發起支付，并支付完成
7）服務器收到回調。
2.1 登錄，獲取code。
2.2 通過code 獲取openid(前端)
2.2 服務器端servlet（復寫HttpServlet的doGet doPost函數）doPost的代碼片段：
2.3 前端上送訂單信息、openid請求預下單（在此，為方便，訂單信息直接寫死在服務器端了），若成功，則根據服務器端返回數據發起支付。
2.4 服務器端預下單，2.5并簽名返回支付請求數據。
三、實戰中遇到的問題
預下單和支付請求中，簽名的密鑰使用的是商戶密鑰，但是用code獲取openid是使用小程序對應的secret key，這個可以在小程序的后臺看到。
微信小程序前端發起post請求到服務器端時，服務器端收不到請求參數。原因是：微信API接口wx.request中：
a) 對于 GET 方法的數據，會將數據轉換成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）
b1) 對于 POST 方法且 header[‘content-type’] 為 application/json 的數據，會對數據進行 JSON 序列化
b2) 對于 POST 方法且 header[‘content-type’] 為 application/x-www-form-urlencoded 的數據，會將數據轉換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）
所以，如果post請求，為省去服務器端反序列化的操作時，可使用header[‘content-type’] 為 application/x-www-form-urlencoded 的數據。
3. 如果部署了servlet后，tomcat重啟后，需要等幾分鐘才能生效（原因是我的機器內存比較小，而tomcat又很占用內存資源），待熟悉tomcat 調優。[java進階架構師]
學網頁設計與前端開發的途徑很多，有人喜歡觀看視頻課程學習，有人則習慣閱讀書籍和文章掌握相應的知識點。當然，玩學習類趣味游戲也是測試與提升技能的有效途徑之一。
今天我們將分享 11 個有趣的在線小游戲，通過游戲化場景提升你的網頁設計與前端開發技能。寓教于樂，其樂無窮。如果你正在學習相關知識，不妨試試哦。
這是一款考驗你審美、洞察力的在線網頁游戲。你需要從兩個 iOS 界面中選出更正確或恰當的設計，網站除了告訴你選項的對錯，還支持對比兩者之間的差異。 隨著游戲難度的增加，界面的差異會越來越小。考驗你眼力和 iOS 界面敏感度的時候到了，速速來挑戰吧。
地址：https://cantunsee.space/
掌握字符間距是印刷師和設計師必學的技能之一，Kern Type 是一款幫助你在線練習調整字符間距的游戲。你需要把字母移動到合適的位置，點擊「Compare」即可了解正確的字符間距，并得到相應的分值。當你完成 10 個測試后，也會得到最終的測試總分。
地址：https://type.method.ac/
對于設計師來說，提升西文字體造型能力，能幫助你更深刻的理解字體設計與排版。Shape Type 這款游戲基于鋼筆工具，你需要拖動滑竿使字體邊緣達到平滑與飽滿的狀態。在練習的過程中，你可以了解字體的起源，例如字體類型、字體設計師與年代等信息，還能夠通過繪制比較加深對字體筆畫、結構的認知。
地址：https://shape.method.ac
在使用 PS 的時候，不免會用到鋼筆工具。對于剛接觸 PS 的萌新朋友來說，如何快速掌握鋼筆工具的使用方式呢？不妨試試 The Bézier Game 這款游戲。
根據動畫演示，你需要利用鋼筆工具繪制圖形。當然如果你忘記了前面的步驟，系統會有相應的提示。但隨著難度的增加，你就要結合之前學到的方法，獨立繪制更復雜的圖形了。
地址：https://bezier.method.ac/
準備好訓練你的色彩辨識和感知技巧了嗎？那么，快來試試在線交互游戲 Color 吧。在這款游戲中，你需要快速完成常見的配色測試，例如色調、飽和度、互補色、三色、四色等模式測試。分值越能達到「Perfect」，你的顏色感知能力也就越出眾哦。
地址：https://color.method.ac/
Pixactly 是一個在線測試像素尺寸的網站，通過互動體驗幫助你直觀的了解像素的尺寸大小。你需要根據像素的寬、高提示來繪制畫框，并能及時得到反饋。通過 5 項測試，能夠提高你對像素尺寸的把控能力。
地址：http://pixact.ly/
前端開發過程中，會接觸到各種類型的編碼，了解 Hex（十六進制）編碼是前端開發者需要掌握的知識之一。Hex Invaders 這款游戲則通過互動的方式，幫助你直觀的掌握 Hex 編碼。你需要根據頁面上方出現的 Hex 編碼，選擇正確的顏色來完成游戲。隨著難度的增加，關卡敵人會越來越多，挑戰也變得更加燒腦哦。
地址：http://www.hexinvaders.com/
這是一款相當有趣的小青蛙跳荷葉游戲，你可以邊玩游戲邊學習 Flex 布局的相關知識。你需要使用justify-content屬性，幫助青蛙跳到荷葉上。隨后你需要按照游戲提示，完成其他屬性的學習。游戲共有 24 個關卡，將幫助你更直觀的掌握 Flex 布局。
地址：https://flexboxfroggy.com/
如果你想提升 Flexbox 技能熟練度，可以嘗試 Flexbox Defense 這款游戲。這是一款經典的塔防游戲，你必須使用 CSS 定位塔樓的位置，并抵御敵人的進攻。如果你通關了 Flexbox Froggy，再嘗試下這款游戲，你的 Flex 布局技能勢必能更上一層樓。
地址：http://www.flexboxdefense.com/
還再利用枯燥的文檔學習網格布局嗎？不如嘗試下 Grid Garden 在線游戲。在這款游戲中，你需要利用網格布局的相應屬性，完成胡蘿卜澆水的任務。游戲共 28 個關卡，你可以掌握網格布局屬性的全部用法，幫助你入門網格布局。
地址：http://cssgridgarden.com
如果你是前端萌新，正在學習 CSS 選擇器相關知識，那么這款游戲一定適合你。通過這款游戲，你可以學習到各種 CSS 選擇器的用法，例如 CSS 類選擇器、子元素選擇器、偽類選擇器等。挑戰 32 個關卡，幫助你更好的掌握 CSS 選擇器。
地址：http://flukeout.github.io
唐人“諾亞方舟”計劃全線啟動
新型冠狀病毒引起的肺炎疫情突發，線下校區停課，學生不敢出門，就業實習無法進行，家長學生焦慮多，只能宅在家里……
危難關頭，唐人設計學校啟動“諾亞方舟”計劃——我們面向職場人士、大學生、待業等朋友，免費提供長達2個月的線上VIP直播課程服務；面向所有想學設計的朋友，提供優質免費的UI設計、室內設計、平面設計等課程和配套實操、講解服務。請QQ號掃描下方二維碼，登陸唐人“諾亞方舟”，好好修煉內功，打好疫情期間個人提升時光！
武漢加油
、準備條件
1.1、設計師應該注意的地方
移動端最大的問題在于多種設備，多種平臺，多種尺寸，當我們在做手機端H5網頁設計稿時（當然包含微信端的H5網頁設計），如果沒有做過類似的移動端的設計，UI設計師和前端工程師肯定會糾結的。那么多手機屏幕尺寸，設計稿應該按照哪一個尺寸作為標準尺寸。現在已經有很多2K分辨率的手機屏幕了，設計稿是不是也要把寬高跟著最大分辨率來設計。顯然不是。先看一下市面上主流的手機尺寸：
我們在H5開發初期的時候，進行了各種尺寸的設計稿嘗試，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最終得出的試驗結果是。H5的設計稿一般設計為640X1136即可。即iphone 5s的物理像素（也即是5、5c以及將要發布的5se的物理像素，這一系列手機在iphone的占有率中是最高的）， 既滿足了retina用戶的顯示需求，又能降低2G、3G用戶加載圖片需要的帶寬。不過，你若有更高質量的追求，750*1334像素的設計稿也是一個不錯的選擇。
1.2、開發者應該注意的地方
不管在手機瀏覽器還是在微信客戶端或者騰訊新聞客戶端開發，內容大都不能全屏顯示的。在底部或者頂部多多少少會有一個狀態欄的占位，并不能展示手機的全部尺寸。一些手機瀏覽器底部會有導航，也有些會在頂部和底部都有占位，比如導航欄、狀態欄。頂部的占位會把內容往下擠，底部的占位會把內容遮蓋住。所以，我們在進行H5頁面內容規劃布局設計的時候，不能把重要內容放在太偏下或者太偏上的位置，否則前端布局時可能出現內容顯示不全的情況。如果有滑動的交互操作，用戶很有可能觸發瀏覽器頁面的滑動，導致較差的用戶體驗。
下圖為騰訊新聞客戶端和微信內置瀏覽器的占位高度，在640x1136（iphone5s）上他們的高度是一樣的。如果你的頁面高度超過1008px，頁面就會出現滾動功能。
除去頂部大概130px的像素，底部大概150左右的像素，內容的安全高度大概有850左右，怎么布局頁面，具體要看你的項目主要在什么環境上運行。
2、開始動手
2.1、頁面流程
當我們在玩一個簡單的H5游戲的時候，其流程通常會包含以下步驟：
1、 出現一個載入進度條，載入一些必須的圖片、音頻、字體等文件；
2、 顯示主菜單，提示用戶開始游戲；
3、 進入游戲主邏輯。在游戲過程中，當用戶勝利或者失敗，或是觸發了某個按鈕或者按鍵時，游戲會退出，顯示結果頁面。
4、用戶分享游戲或者關閉游戲。
也就是說一個完整的H5游戲，至少有3個頁面不可或缺，就是加載頁、游戲頁、結果頁。由此也可以延伸出多個頁面，比如開始頁，分享頁等。
2.2、資源的加載
區別于普通的網頁的開發，H5游戲需要大量的視覺聽覺素材，并且用戶的網絡的帶寬有限。當你使用了很多的圖片、聲音、視頻以及媒體文件的時候，用戶會花費一些時間等待瀏覽器從服務器下載。 如果在編寫游戲時， 你不把它放在心上，不提前加載而直接使用， 等你開發完游戲到真實的用戶場景上運行時，你就會碰到問題多多，因為圖片和聲音文件是異步加載的，你的JavaScript代碼會在資源全部加載完成前執行。這常常導致一個紅叉的圖片在上躥下跳，聲音效果在需要時不播放或者延遲很久冒出來一個聲音. 好的開發習慣是創建一個預加載器，延后腳本代碼的執行，直到所有的資源都下載完畢為止，這個時候才放出游戲的開始按鈕，讓用戶參與游戲。
我們經常會看到，一些站點在首次進入的時候會先顯示一個進度條，等資源加載完畢后再呈現頁面，進度條大概像這樣：
以圖片的加載為例，大致的代碼應該是這樣：
至于預加載的技術原理，其實也相當簡單，就是維護一個資源列表，挨個去加載列表中的資源，然后在每個資源加載完成的回調函數中更新進度即可。
當前加載完的資源個數/pic總數*100，就是加載進度的百分比了。
當然，我們沒必要手動寫自己的加載器，很多優秀的游戲框架已經幫我們做到了，比如phaser，下面是phaser實現預加載的代碼，具體的示例點我，點我
在上述的例子中，我們先創建一個游戲對象，然后往這個游戲對象中添加了兩個方法，boot方法執行的時候準備了一張進度條圖片，loaderState方法執行的時候，加載游戲所需的圖片，并在頁面上顯示當前的進度。在多關卡的游戲中，加載的設置尤為重要。
3、理解游戲
3.1、認識phaser
對于一款游戲來說，框架就是它的基石。好的框架能是開發者利器，能夠幫助開發者做出強有力的，跨瀏覽器的游戲，能給廣大玩家帶來更精致的作品。Phaser是一款專門用于移動及桌面的HTML5 2D游戲開發的開源免費框架，內置游戲物理引擎，它也就是傳說中100行代碼之內搞定Flappy Bird的神器。通過這個框架我們可以很容易地開發桌面和移動的小游戲。接下來我會以這個框架為基礎，了解游戲的開發知識。
你可以點擊這里獲取phaser源碼。點我，點我！
Phaser是一個單獨的js文件，你可以通過script的標簽來使用它。
<script type="text/javascript" src="phaser.js"></script>
3.2、游戲開發的世界觀
游戲的界面分三個層次，世界、舞臺和攝像機。如果把游戲看做通過手機觀看的一部話劇，話劇都是在舞臺上進行表演的，舞臺的背后是世界。我們看到的畫面都是通過現場的攝像機提供給我們的。攝像機有一個視角，這個視角到哪里，我們就能看到哪里的畫面，游戲中所有看的見的東西，都是在舞臺中的。可以把舞臺看成游戲中所有對象最頂層的一個容器，然而舞臺下面就是世界了，可以把它看成僅次于舞臺的一個頂層容器，世界與舞臺不同的地方在于，舞臺的大小是你可視元素（對象）的大小，是固定大小的，但是世界確實是可以改變大小的，甚至是無限大的，而且可以隨時設置成我們想要的大小，世界默認的大小是舞臺的大小，我們看到的畫面都是通過攝像機對象得到的，攝像機對象有個視角范圍，這個范圍跟舞臺的大小范圍是一樣的，如果世界的范圍是大于舞臺的，那么攝像機就可以在世界中任意移動了，移動到不同的位置，我們就能看到不同的東西。
所有展示的東西，都在舞臺上，世界有多大，攝像機就可以走多遠，改變世界的大小，攝像機才可以在舞臺上移動。世界限制你的范圍，舞臺給你準備素材，攝像機展示多彩的界面。理解了世界、舞臺、攝像機的概念，面向對象的游戲編程就好理解多了。
游戲對象：game
可以通過以下代碼，創建一個寬為640，高為1136的canvas標簽，canvas的父標簽是id=“gamezone”的div，當創建完畢后，生成一個game對象，然后會直接執行state對象中的方法。
var game=new Phaser.Game(
640,1136,Phaser.CANVAS,'gamezone',state
);
舞臺：game.stage
世界：game.world
攝像機：game.camera
通過代碼，我們可以更好的理解游戲的世界，具體的示例，點我，點我！使用前后左右鍵可以移動攝像機的視角，點擊屏幕可以把視野聚焦到火雞身上。
3.3、游戲場景的生命周期
場景：game.state
場景指的是游戲中不同的界面或內容，比如游戲菜單界面為一個場景，真正玩游戲的界面為一個場景，不同的關卡又是不同的場景等等。場景能把一個復雜的游戲分成許多小塊，各個場景可以獨立出來，從而簡化游戲的開發。游戲中的場景概念更加廣泛，例如一個只是執行某些準備工作的但是沒有實質的畫面顯示出來的state（狀態），我們也把它叫做一個場景。一個游戲正是由眾多場景所組成的。當我們創建一個游戲對象后，但這只是一個空的游戲，里面什么東西都沒有，接下來往游戲里添加場景，并在不同的條件下切換場景，這樣，一個個場景就構成了不同的游戲。
第一段代碼示例中的
就是添加場景和啟動場景。
場景的添加可以隨意的，不按順序，場景的啟動也是，滿足條件后觸發即可，有些場景用戶在結束游戲后都看不到也用不到，比如游戲的商店的場景（場景3），但是它確確實實存在過的。
把一個場景單拿出來，查看場景的內部的代碼，代碼循環：
每一個場景都會擁有這一個到五個方法，preload、create、update、render至少要存在一個，其中，update和render會循環執行，直到下一個場景開始。為什么要這么設計呢？舉個例子來說，網速是H5的短板，可以在在游戲啟動時只加載主菜單所需的資源，以提高游戲啟動的速度。然后在每進入一關時，加載這一關所必須的資源。這樣能更好的改善用戶體驗。
3.4、元素
理解完世界和場景這兩大塊，算是理解游戲開發的70%了，剩下的就是些細微的東西了，讓我們先對它有一些認識，等使用的時候可以再查手冊。
元素就是游戲的顯示對象，顧名思義就是能夠在舞臺上顯示的對象，也就是我們在游戲中所能看到的東西，我們只有了解了這些顯示對象，才能做出一個好游戲。
文字（Text）：
我們可以通過文本對象，顯示瀏覽器默認的字體和你通過css加載的字體，它是對canvas文本的的一個包裝。
圖形（Graphics）：
圖形對象是對canvas繪圖的一個包裝，簡便快捷的繪制出多邊形。
圖像（Image）：
圖像是一個輕量級對象，你可以使用它來顯示任何不需要物理引擎或者動畫的任務東西。它可以旋轉、縮放、剪切，并接收輸入事件。它可以完美的用于標識、背景、簡單的按鈕和其他非精靈類圖形。
精靈（Sprite）：
精靈是游戲的生命體，幾乎可用于所有的可視化物體。基本上，精靈是有一套坐標和渲染在畫布上的紋理所組成。精靈也包括了一些額外的屬性，例如物理移動、輸入處理、事件、動畫等等。
瓦片（TileSprite）：瓦片精靈是個有著重復紋理的精靈。紋理可以被滾動、縮放，并且自動包裹邊緣。請注意，TileSprites 和普通的精靈默認沒有輸入處理方法和物理引擎剛體，兩者都必須要啟用后才會具有這些特性。
組：（Group）
組是一個用于顯示各種對象（包括 Sprites 和 Images）的容器。我們可以把許多對象放進一個組里，然后就可以使用組提供的方法對這些對象進行一個批量或是整體的操作。比如要使組里的對象同意進行一個位移，只需要對組進行位移就可以了，又比如要對組里的所有對象都進行碰撞檢測，那么就只需要對這個組對象進行碰撞檢測就行了。
接下來以瓦片精靈為例，講述各個元素的使用。瓦片精靈類似于css中的背景平鋪，具體事例點我，點我，這里所有大背景圖，都是有一張小小的瓦片拼接出來的，按上下左右可以移動視角。
3.5、物理引擎
若要使一個游戲更逼真，那一定離不開物理引擎，物理引擎是通過為游戲中的物體賦予真實的物理屬性，計算運動、旋轉和碰撞之后的效果。就是把現實世界的牛頓定律，應用到虛擬世界當中去。物理引擎是獨立于游戲引擎存在的一個庫。物理引擎的種類很多，例如box2d，cocos，three等，各有優劣，各有擅長。Phaser就內置了三種物理引擎arcade、ninja、P2（pixi 2d）。P2在這里要單獨提一下，P2作為一個JS的2D渲染器，它的目標是提供一個快速的、輕量級而且是兼任所有設備的2D庫。對于支持webgl的瀏覽器，P2將使用webgl繪圖，不支持webgl的瀏覽器就降級至canvas，Pixi渲染器可以使開發者享受到硬件加速，但并不需要了解WebGL。進當然不限于這些引擎，你可以另外添加自己需要的物理引擎。下面是物理引擎的一個實例。
事例中對廚師和火雞進行碰撞檢測，類似于超級瑪麗的踩怪物，廚師踩到火雞是，由于火雞是剛體，然后就會廚師就會反彈。當關閉火雞的剛體屬性后，廚師就直接從火雞中穿過去了，與他碰撞的是世界的邊界了。具體的示例，點我，點我！
3.6、動畫
動畫能夠使游戲的畫面更流暢。動畫分兩種，一種是補間動畫，一種是逐幀動畫。
在做動畫時，我們只需要在動畫的開頭和結尾設定好狀態，在中間只需要做一些過渡，就能實現圖畫的運動；插入中間的過渡是由計算機自動運算而得到的。這種動畫叫做補間動畫。在phaser中，Tween對象就是專門用來實現補間動畫的。通過game.add的tween方法得到一個Tween對象,這個方法的參數是需要進行補間動畫的物體。然后我們可以使用Tween對象的to方法來實現補間動畫。
在例子中，我們設定了一個圖片，讓它在兩個點之間來回走動，具體事例，點我，點我。
如果想實現更復雜一點的動畫，那就需要逐幀動畫了。
不同于補間動畫，逐幀動畫的每一幀都需要單獨制定，而不像補間動畫那樣只需要制定開始和結束的那兩個關鍵幀，同時逐幀動畫是通過圖片來實現的，我們可以給它的每一幀都指定一張圖片，然后這些幀連續起來播放，就形成了一個動畫。
下圖準備了一張含有4幀圖片的圖片，把這4張圖連起來一起循環播放，就成了一個動畫。
我們把籃球的序列圖加載成一個sprite對象，它有個animations屬性，該對象有一個add方法，用來添加動畫，還有一個play方法，用來播放動畫。這樣，一個循環變動的籃球就實現了。具體示例，點我，點我！
4、小技巧
4.1、用ps切完設計圖后，原圖對于移動端來說偏大，可以使用tinypng（tinypng.com）進行壓縮，這里的圖片壓縮還是相當好用，可以節省用戶不少帶寬。也可以使用騰訊智圖（zhitu.tencent.com）來進行壓縮，區別于tinypng，它能為你提供高大上WebP格式的圖片。
4.2、在進行頁面布局的時候，脫離設備，按照640x1136像素進行布局，然后在頁面的meta里加入
進行0.5倍縮放。這時候屏幕能適應320x568寬度的手機屏，對于比較寬的手機，會有些黑邊。你也可以通過phaser進行縮放。
scaleMode會更改canvas的大小達到適配的目的。
4.3、如果你想學習phaser，這里有650+的例子和文檔，你也可去百度搜一篇Flappy Bird開發的教程，這樣的學習會更高效。
5、結尾
當試著用百度搜索了一些“H5游戲開發”之后，發現網上教程很多，什么“45分鐘學會H5游戲開發”，“100行代碼做個H5游戲”比比皆是，于是就改了主意，從另一角度來闡釋游戲開發。H5游戲開發的思路大都是來自于Flash，Flash有一套現成的開發流程，把它的思想理解之后，對于H5游戲開發好處多多。再次把焦點回到市場上來，“今年將是H5游戲的元年！”，這個口號一直喊了5年，市場漸漸疲軟。直到2016年第一款千萬級別的產品出世，讓游戲行業重新認識到原來H5游戲也是可以賺錢的。以現在的眼光來看待H5游戲行業，無論從技術層面還是用戶層面來講，H5游戲的市場都呈現越來越廣闊的狀態。
作者：劉春鵬 騰訊前端工程師。騰訊網前端開發工程師，騰訊網首頁、天天快報WEB版項目技術負責人，致力于HTML5頁面開發。
原文發布于微信公眾號 - 騰訊大講堂（TX_DJT）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
