用微信小程式做H5遊戲嘗試

       微信小程式釋出後，公司雖然沒有拿到第一批内測資格，但作為微信親密合作夥伴，一定要第一時間去嘗試啦。現在微信小程式剛釋出還在測試階段，可以說是1.0版本，是以架構和結構内容都還不多，相關的文檔跟微信API一樣都做得很好。

　　1）微信小程式到底是什麼？跟H5,HTML5是不是一樣？

　　　　它可以把應用功能快速嵌入到微信公衆号中，使用者無需安裝應用就能通路。相比現在的app開發和釋出都容易很多。

               微信小程式本質上就是Html5，或者說是一種優化過之後的Html5。不過在編碼方式跟HTML5還是有很多不同的地方，但是其核心還是大量使用HTML5的相關技術，有H5經驗的前端會更容易的掌握上手。

               關于讓讓小程式在個完整支援HTML5标準的浏覽器上運作起來，有興趣的同學具體可以參見讓你的微信小程式運作在Chrome浏覽器上。

　　2）開發者入門學習

　　　　1.首先去下載下傳安裝微信Web開發者工具，很貼心的支援Mac，并且教程的截圖都是Mac的哦~~

                 下載下傳位址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

　　　　2.打開開發者工具後，（網絡慢的二維碼可能加載很久）掃二維碼後可以添加項目或導入項目，appid不會公衆号的，沒有内測邀請的可以不填，輸入項目名稱比如：HelloWorld，選擇項目儲存位址的時候選擇一個新建立的空檔案夾，如果勾選在目前目錄建立 quick start項目, 它就會幫我們建立一個簡易的小程式demo，友善我們學習了解

　　　　3.點選開發者工具左側導航的“編輯”，我們可以看到這個項目，已經初始化并包含了一些簡單的代碼檔案。在項目檔案夾下看到了三個特别的檔案app.js、app.json、app.wxss，其中，.js字尾的是腳本檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表檔案。這三個檔案是一個項目必不可少的檔案，删除任意一個檔案項目都會運作不了。

　　　　　　app.js: 小程式運作主要邏輯及入口，裡面使用App()函數來注冊一個小程式，普通頁面的js檔案中可以通過 getApp()函數拿到App()函數所擁有的參數，并調用其中的資料。我們可以在這個檔案中監聽并處理小程式的生命周期函數、聲明全局變量。調用架構提供的豐富的 API，如本例的同步存儲及同步讀取本地資料。想了解更多可用 API，可參考 API 文檔

　　　　　　app.json: 是小程式的全局配置檔案。可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導覽列樣式，配置預設标題。注意該檔案不可添加任何注釋。更多可配置項可參考配置詳解。每一個小程式加載的頁面，包括四個部分[js、json、wxml、wxss]）都要在 pages數組中聲明後才能通路， window對象中可以設定視窗的樣式顔色等。

　　　　　　app.wxss: 是一個公共的樣式檔案，整個項目的每個頁面都可以調用，我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則，就如一個全局的css檔案。

　　　　4.在左邊菜單欄中選擇“編輯”，可以檢視我們這個項目的檔案和結構,從檔案結構中我們可以看到檔案類型有4種：

　　　　　　.js : 這就是一個javascript檔案，隻不過它是微信基于javascript封裝過的，是以很多js函數是不能使用的，比如localhost.href，微信加入了很多自身的接口，比如跳轉頁面是： wx.navigationTo()函數。例如index.js 是頁面的腳本檔案，在這個檔案中我們可以監聽并處理頁面的生命周期函數、擷取小程式執行個體，聲明并處理資料，響應頁面互動事件等。

　　　　　　.json : 是頁面的配置檔案，可以配置頁面頭部title資訊等，頁面的配置檔案是非必要的。當有頁面的配置檔案時，配置項在該頁面會覆寫 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置檔案，則在該頁面直接使用 app.json 中的預設配置。

　　　　　　.wxml : 視圖結構檔案，功能就像html檔案差不多，用于描述頁面結構，隻不過它有自己獨特的标簽，不使用html标簽。微信對wxml的全稱定義也不是weixin xml，而是WeiXin MarkupLanguage，很霸氣的要自成體系感。自然wxss也是WeiXin Style Sheets，一樣的希望給人牛逼哄哄的感覺。

　　　　　　.wxss : 視圖樣式檔案，格式跟css檔案一樣，他在css的基礎上擴充了幾個特性 比如：尺寸機關 / 樣式導入

　　　　5: 項目運作過程：

　　　　　　第一步：附加元件目根目錄下的 app.js、 app.json、 app.wxss檔案，同時會執行app.js檔案，并觸發其中的onLaunch 和 onShow 函數

　　　　　　第二步：加載app.json中pages數組中配置的第一個頁面，作為項目的歡迎頁，同時會執行對應頁面js檔案，并觸發 onLoad / onReady 和 onShow 函數

　　　　　　往後：頁面可以通過事件與js檔案互動，比如 在标簽元素上綁定點選事件，并且指向js檔案中的一個函數，就能用js中的邏輯去處理這個事件了

             3）提出幾個問題

                1.移動網站或WebApp能直接改造成小程式

                  其實，之是以會保留這個認識，主要是由于過去微信公衆号的二次開發經驗，很大程度上給到了我們很多人先入為主的觀念。

                 但通過我們上面所分析的第一個問題，可以知道微信小程式本質上就是Html5，但實際上卻是一種優化過之後的Html5，這也就意味着絕大多數的移動網站或WebApp直接改造成小程式的難度很大，因為裡面有大量的内容需要重寫。小程式是相當于重新做了一個App，從開發、設計、測試、運維更新都是單獨的一套。哦，你還得加個學習成本和風險，如此新的東西一次搞利索的可能性還真不好說，畢竟小程式現在自己也還是在測試階段。

              2.微信小程式能不能做H5小遊戲

                現階段看來不行，不過可以做一些輕量的推廣用得小遊戲功能，一切還要看後面正式版的釋出。

最後把微信官方的文檔放在這裡

https://mp.weixin.qq.com/debug/wxadoc/dev/

各位看官也可以看看我們的作品案例 H5遊戲開發案例