小程序

H5 
豬，是黏黏豬，微信表情搜索“黏黏豬”； 
怪獸，是吃豆，童年的記憶。

二、H5制作小游戲過程

喜歡可以點個小星星。

規則：游戲的玩法如圖，按住按鈕不放，綠色滑塊、豬豬和怪獸會開始跑起來，當滑塊減為0時松開即為勝利，若提前或者延后都屬失敗。越往后面的關卡速度越快，金幣數獲取和扣除相應變多。

游戲實現： 
滑塊、怪獸和豬豬的運動是使用定時器每隔一定時間修改滑塊寬度相對于外邊容器的百分比和豬豬、怪獸的left值； 
按住按鈕和松開監聽touchstart和touchend事件實現； 
檢驗是否勝利是檢查touchend觸發時滑塊的width值； 
每個關卡元素的運動速度即定時器的時間由當前關卡數進行計算； 
金幣的獲取和扣除也由當前關卡數計算； 
游戲音樂使用H5標簽實現且自動播放； 
由于人眼很難精確地判斷是否到0以及人類的反應速度的問題，游戲為不同難度的關卡設置了1-3的容差，越往后面的關卡容差越小； 
某一關通過時，下一關的按鈕變為激活狀態，本關卡仍可以繼續玩，也可以進入下一關卡，一旦進入下一關卡，“下一關”的按鈕變為不可用狀態。

存在的問題： 
把頁面掛到我自己的服務器上面后，用微信訪問游戲頁面，由于我沒有申請域名，鏈接地址是IP地址，微信內置的瀏覽器將我的頁面重新排版了，于是就變得不可用了； 
長按手機屏幕有些手機瀏覽器會出現長按菜單，代碼中有做相應的處理，但是還是有兼容性問題，有些瀏覽器不適用； 
沒有做移動端的適配，元素的尺寸在不同手機上顯示可能會有所不同。

三、小程序上都有，喜歡的話點個小星星。 

2. 優點

使用小程序來實現可以避開很多瀏覽器的兼容問題了，而且也不會出現長按菜單的情況。 
3. 關于小程序的知識

申請賬號，需要注意的是都是在微信公眾平臺注冊，但是和公眾號注冊的不能是同一個郵箱，注冊為小程序的登錄進去就是小程序管理平臺，注冊為公眾號的登錄進去就是公眾號的管理平臺。

IDE： 微信開發者工具。

小程序中的文件類型大致有四種：json、wxml、wxss、js。json文件主要用于配置項目和頁面；wxml是模板文件，類似HTML；wxss是樣式文件，小程序對css做了擴充；js是腳本邏輯文件，實現交互。

小程序的開發和vue十分相似，模板渲染，MVVM的開發模式。

小程序的項目結構： 

image.png

根目錄下的app命名的文件是項目的全局文件。app.json是對整個工程項目的全局配置，如小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。pages字段包含的就是所有的頁面路徑。具體可參考微信小程序開發文檔。app.js中包含系統的全局變量和方法，例如用戶信息、頁面首次加載完成等。app.wxss是頁面的全局樣式，pages頁面中的局部樣式會覆蓋全局樣式。 
pages文件夾存放的是程序的所有頁面。例如這個項目中有index頁面和logs頁面，每個頁面都可以由四個文件構成：js、json、wxml、wxss。js文件負責該頁面的邏輯交互，json文件是對該頁面的配置，wxml是頁面的結構、wxss是頁面的樣式。 
public文件夾是我自己加進去的，用于存放靜態資源如圖片、音樂等。 
utils文件夾存放的是一些可以引用的模塊。 
project.config.json是存放你對這個工程的一些個性化配置，如IDE的界面顏色、編譯配置等。 
項目真機預覽：在開發工具中有預覽按鈕，會生成一個二維碼，微信掃碼后可以在手機上體驗小程序，但是只有開發者有權限體驗，其他人不可以。

發布：個人賬號只能發布一個小程序，需要先填寫小程序的信息以及選擇類別，選擇后不能修改。再提交代碼后等待審核才能發布。我在選擇類別的時候將類型選擇為了游戲，然而小程序和小游戲是有區別的，再次用開發者工具打開項目的時候會提示找不到game.json文件。因此項目就不能進行下去了。目前小程序是有開放APPId給大家開發的，但是小游戲好像還沒有APPId。

后續：如果解決了項目類別選擇的修改問題，會繼續對這個小游戲進行開發。