簡介這是一份面向前端初學(xué)者與小程序開發(fā)入門者的微信骰子小游戲?qū)崙?zhàn)項(xiàng)目資源聚焦輕量級(jí)互動(dòng)游戲開發(fā)場景幫助學(xué)習(xí)者掌握小程序基礎(chǔ)架構(gòu)與頁面交互邏輯。壓縮包共33個(gè)文件含5個(gè)JS含app.js與頁面邏輯腳本、5個(gè)JSON含app.json、project.config.json及頁面配置、4個(gè)WXSS樣式定義、3個(gè)WXML頁面結(jié)構(gòu)、12張PNG圖片芯片、排名圖標(biāo)等UI資源及1個(gè)GIF動(dòng)效圖整體僅401KB便于快速解壓與本地調(diào)試。已有151人下載學(xué)習(xí)適合通過完整可運(yùn)行案例理解小程序四大文件體系WXML/WXSS/JS/JSON協(xié)同機(jī)制。資源包含清晰的pages分頁結(jié)構(gòu)game/ rank/ index、utils工具模塊、images資源目錄及README.md說明文檔并附帶資源內(nèi)容.txt與標(biāo)簽.txt輔助理解素材用途是構(gòu)建小程序開發(fā)認(rèn)知與動(dòng)手能力的典型教學(xué)樣本。 拿到“微信小程序-骰子游戲.zip”這種壓縮包時(shí)第一反應(yīng)大概是“又一個(gè)解壓即用的源碼”。但實(shí)際經(jīng)歷過的朋友都知道zip包能不能順利跑起來三分靠運(yùn)氣七分靠排查。壓縮包損壞、目錄嵌套錯(cuò)誤、appid不匹配、開發(fā)者工具版本差異任何一個(gè)環(huán)節(jié)都能卡住半小時(shí)。這篇文章我按真實(shí)操作鏈條走一遍從解壓驗(yàn)包開始到導(dǎo)入開發(fā)者工具、跑通骰子邏輯、再到真機(jī)適配和后續(xù)優(yōu)化把每一步的關(guān)鍵細(xì)節(jié)和坑點(diǎn)都拆開講清楚。如果你是第一次接觸微信小程序源碼包或者想把骰子這類小游戲改造成完整項(xiàng)目可以照著這份記錄直接操作。1. 拿到壓縮包之后先別急著解壓驗(yàn)包與路徑排雷是第一步1.1 判斷壓縮包是否完整三種報(bào)錯(cuò)的根因與快速定位很多人拿到zip文件的第一件事就是雙擊解壓結(jié)果解壓到一半彈窗報(bào)錯(cuò)整個(gè)人懵在原地。根據(jù)我的經(jīng)驗(yàn)微信小程序源碼壓縮包最常見的報(bào)錯(cuò)有三種根因完全不同。第一種報(bào)錯(cuò)是“file is not a zip file”。這種情況通常是文件后綴被改名文件本身其實(shí)是個(gè)rar或者7z甚至可能就是普通網(wǎng)頁下載了一半的殘留文件。判斷方法很簡單在命令行里用file命令看真實(shí)類型file 微信小程序-骰子游戲.zip如果輸出是“Zip archive data”說明文件本身是正常的zip如果輸出是“HTML document”或者“data”那基本是下載不完整或者命名有問題。還有一種情況是文件被某些下載工具改成了.bin或.tmp后綴需要先改回.zip。第二種報(bào)錯(cuò)是“invalid zip archive: could not find eocd”。這里的eocd是End of Central Directory也就是zip的中央目錄結(jié)束標(biāo)記它存放在文件末尾。報(bào)這個(gè)錯(cuò)基本可以斷定文件被截?cái)嗔?。可能是傳輸中斷、存?chǔ)空間不足或者是網(wǎng)盤客戶端同步到一半時(shí)文件還在“正在上傳”狀態(tài)被你下載了。遇到這種情況重新下載一遍往往就解決了不需要折騰其他工具。第三種情況是解壓過程中提示“CRC校驗(yàn)失敗”或“不可預(yù)料的壓縮文件末端”。這種一般是物理存儲(chǔ)問題也可能是多卷壓縮包z01、z02配合zip沒有放到同一目錄。像熱搜里提到的“z01怎么和zip一起解壓”就是典型場景。如果源碼包是分卷壓縮的必須確保所有分卷文件在同一目錄且文件名合集順序正確再打開.001或.zip主文件解壓。驗(yàn)證壓縮包完整性的更靠譜做法是直接測試而不是等到解壓到一半才報(bào)錯(cuò)。Windows下可以用Bandizip或7-Zip自帶的“測試”功能Linux和macOS下用命令unzip -t 微信小程序-骰子游戲.zip如果輸出里每一行都是“OK”說明壓縮包本身沒問題可以放心解壓。這一步雖然多花十秒鐘但能避免解壓到一半時(shí)的心智成本。我自己把這種“先驗(yàn)證再解壓”的習(xí)慣帶到了所有zip包處理中尤其是從網(wǎng)絡(luò)下載的項(xiàng)目包誰也不想在解壓到80%的時(shí)候才發(fā)現(xiàn)文件損壞更不想面對(duì)一個(gè)殘缺的項(xiàng)目目錄手足無措。1.2 解壓后的目錄結(jié)構(gòu)陷阱從zip到“可導(dǎo)入項(xiàng)目”的路徑排查壓縮包驗(yàn)證通過之后解壓本身也有講究尤其是從GitHub或者代碼倉庫下載的項(xiàng)目包往往在zip內(nèi)部就嵌套了一層包含倉庫名的目錄。你要是把這一層目錄也當(dāng)成項(xiàng)目根目錄導(dǎo)入微信開發(fā)者工具會(huì)直接報(bào)“未找到app.json”。這里要特別強(qiáng)調(diào)一個(gè)核心概念微信小程序項(xiàng)目根目錄的標(biāo)志性文件是app.json。app.json是全局配置文件包含頁面路由、窗口樣式、tabBar信息小程序開發(fā)者工具就是靠它來識(shí)別項(xiàng)目結(jié)構(gòu)的。如果導(dǎo)入時(shí)選中的目錄里沒有app.json工具會(huì)直接判定這不是有效項(xiàng)目。實(shí)際中的常見情況是。用戶解壓一個(gè)名為“微信小程序-骰子游戲.zip”的文件到桌面得到的是“桌面/微信小程序-骰子游戲/”目錄而真正的項(xiàng)目文件在“桌面/微信小程序-骰子游戲/微信小程序-骰子游戲/”或者更深層級(jí)的目錄里。判斷方式很簡單用文件管理器打開目錄看是否立即看到app.json、app.js、pages這些文件和目錄。沒看到就在子目錄里找一遍。還有一種情況是壓縮包使用了中文目錄名或包含了空格的特殊字符這在小程序項(xiàng)目導(dǎo)入時(shí)并不是致命問題但如果你的項(xiàng)目后來接入了命令行工具比如CI自動(dòng)化構(gòu)建路徑處理會(huì)很麻煩。所以我通常建議在解壓后立刻重命名為一個(gè)英文項(xiàng)目名例如dice-game既方便后續(xù)操作也避免某些編譯鏈路對(duì)中文路徑支持不友好。macOS系統(tǒng)解壓zip時(shí)還有一個(gè)隱藏問題自動(dòng)生成的__MACOSX目錄和.DS_Store文件。包含__MACOSX目錄的代碼包傳到Linux服務(wù)器或Windows環(huán)境時(shí)雖然不影響小程序本身運(yùn)行但會(huì)讓目錄變得混亂。建議在命令行環(huán)境下用unzip命令解壓并清理unzip 微信小程序-骰子游戲.zip rm -rf __MACOSX find . -name .DS_Store -deleteWindows下的老版本zip處理工具在解壓包含中文文件名的zip包時(shí)可能出現(xiàn)亂碼這是因?yàn)閦ip沒有強(qiáng)制規(guī)定文件名編碼部分工具用GBK寫入部分用UTF-8。如果解壓后發(fā)現(xiàn)文件名全是亂碼用Bandizip或者7-Zip的“切換代碼頁”功能重新解壓即可記住選擇UTF-8或GBK另一個(gè)選項(xiàng)通常能解決。2. 導(dǎo)入微信開發(fā)者工具appid、構(gòu)建與目錄選擇的關(guān)鍵細(xì)節(jié)2.1 項(xiàng)目根目錄怎么選app.json是唯一路標(biāo)選對(duì)目錄是導(dǎo)入的第一步。打開微信開發(fā)者工具選擇“導(dǎo)入項(xiàng)目”在彈出的文件選擇框中定位到包含app.json的那一層目錄然后確認(rèn)路徑。別選擇包了所有文件的更外層目錄也不要深入進(jìn)入到pages這一層。這里容易出問題的是有些項(xiàng)目源碼在壓縮包里實(shí)際包含的是兩個(gè)部分miniprogram目錄小程序代碼和cloudfunctions目錄云函數(shù)代碼。這種情況下項(xiàng)目的miniprogramRoot配置會(huì)告訴開發(fā)者工具“真正的項(xiàng)目代碼在miniprogram目錄下”導(dǎo)入時(shí)選擇外層目錄即可工具會(huì)通過project.config.json里的miniprogramRoot字段自動(dòng)定位。如果誤選擇了miniprogram目錄反而可能因?yàn)槿鄙賞roject.config.json導(dǎo)致構(gòu)建配置異常。對(duì)于骰子游戲這類輕量項(xiàng)目通常不會(huì)有云函數(shù)或分包目錄那么復(fù)雜的結(jié)構(gòu)app.js、app.json、app.wxss三個(gè)文件直接放在根目錄pages目錄存放頁面。導(dǎo)入后如果出現(xiàn)首頁白屏先檢查app.json里pages字段配置的第一個(gè)頁面路徑是否存在例如{ pages: [ pages/index/index, pages/history/history ] }如果index頁面文件實(shí)際在pages/dice/dice下而app.json還寫著pages/index/index那么項(xiàng)目加載時(shí)找不到頁面自然就是白屏。2.2 appid的三種處理方式和對(duì)應(yīng)的調(diào)試邊界導(dǎo)入項(xiàng)目時(shí)開發(fā)者工具會(huì)要求填寫AppID這里有三個(gè)選項(xiàng)各自有不同的調(diào)試邊界。第一種是使用自己的測試號(hào)。在微信公眾平臺(tái)注冊(cè)小程序賬號(hào)后在“開發(fā)管理-開發(fā)設(shè)置”里可以看到AppID以wx開頭的一段字符串。測試號(hào)主要用于開發(fā)調(diào)試不需要域名備案就可以在開發(fā)者工具里運(yùn)行大部分功能但一些高級(jí)能力如某些支付接口、部分消息推送需要正式AppID才能調(diào)用。第二種是點(diǎn)擊“測試號(hào)”按鈕讓工具自動(dòng)生成一個(gè)臨時(shí)AppID。這種情況下項(xiàng)目可以正常編譯運(yùn)行但不能進(jìn)行真機(jī)預(yù)覽或受限也無法使用云開發(fā)能力。簡單說臨時(shí)AppID只適合在開發(fā)者工具里看看效果。第三種是使用壓縮包原作者的AppID。如果這個(gè)zip包是從別人那里拷貝來的直接沿用原AppID可能會(huì)有問題。只要原作者沒有將這個(gè)AppID設(shè)置為“關(guān)閉開發(fā)權(quán)限”你依然可以用它來導(dǎo)入項(xiàng)目并運(yùn)行但真機(jī)預(yù)覽時(shí)二維碼掃描后可能會(huì)提示無權(quán)限。很多初學(xué)者在這里卡住一直點(diǎn)“確定”也沒有反應(yīng)其實(shí)根源在于AppID這一欄沒有正確填寫。如果你只打算本地看看骰子游戲效果直接選測試號(hào)是最省事的做法。2.3 project.config.json里的隱藏開關(guān)project.config.json是小程序項(xiàng)目的工程配置文件里面保存了開發(fā)者工具相關(guān)的設(shè)置項(xiàng)。如果解壓后的項(xiàng)目里沒有這個(gè)文件導(dǎo)入時(shí)工具會(huì)彈窗要求你重新設(shè)置項(xiàng)目名稱、AppID等也不影響使用但如果你發(fā)現(xiàn)導(dǎo)入后編譯特別慢或者ES6語法被報(bào)錯(cuò)多半是缺少以下配置{ setting: { es6: true, enhance: true, postcss: true, minified: true, urlCheck: false } }這里我重點(diǎn)解釋一下es6和urlCheck。es6開關(guān)決定開發(fā)者工具是否將ES6語法轉(zhuǎn)譯為ES5。很多較新的小程序代碼使用了async/await、class語法、箭頭函數(shù)等特性如果這個(gè)開關(guān)沒打開編譯時(shí)就會(huì)報(bào)各種解析錯(cuò)誤。urlCheck開關(guān)則是限制請(qǐng)求域名校驗(yàn)的開關(guān)開發(fā)本地接口調(diào)試時(shí)如果不關(guān)閉它request請(qǐng)求會(huì)被攔截控制臺(tái)輸出“url not in domain list”。對(duì)于純前端展示的骰子游戲來說如果游戲內(nèi)有排行榜或記錄存儲(chǔ)功能且請(qǐng)求的是本地開發(fā)接口務(wù)必把urlCheck設(shè)為false。另外如果項(xiàng)目使用到了npm構(gòu)建還需要在工具欄點(diǎn)擊“工具-構(gòu)建npm”然后確認(rèn)project.config.json里有“packNpmManually”或“packNpmRelationList”等配置。骰子游戲如果引入了第三方動(dòng)畫庫或工具庫不要忘了這一步否則會(huì)出現(xiàn)“找不到模塊”的報(bào)錯(cuò)。3. 骰子游戲的頁面實(shí)現(xiàn)WXML布局、WXSS動(dòng)效與數(shù)據(jù)綁定3.1 用View拼骰子點(diǎn)點(diǎn)位坐標(biāo)與CSS實(shí)現(xiàn)很多人以為游戲里的骰子要準(zhǔn)備六張不同圖片或者從網(wǎng)上找3D模型實(shí)際用微信小程序原生組件做一顆骰子并不是什么復(fù)雜的事關(guān)鍵就在于“點(diǎn)怎么布局”。骰子的六個(gè)面每個(gè)面上的點(diǎn)數(shù)位置是固定的。我們可以用一個(gè)容器view作為骰子面給骰子面設(shè)置圓角和陰影然后在容器內(nèi)部用若干個(gè)小view作為“點(diǎn)”。每個(gè)點(diǎn)的位置用百分比坐標(biāo)來定位這樣適配不同屏幕尺寸時(shí)不會(huì)偏移。以我常用的布局為例view classdice stylewidth: 200rpx; height: 200rpx; view classdot styleleft: 25%; top: 25%;/view view classdot styleleft: 75%; top: 75%;/view /view上面這段代碼就是一顆“2點(diǎn)”的骰子。點(diǎn)的位置可以提前整理成數(shù)組在WXML里用wx:for循環(huán)渲染。view classdice view wx:for{{dots}} wx:keyindex classdot styleleft: {{item.x}}%; top: {{item.y}}%; /view /view對(duì)應(yīng)的data里每個(gè)點(diǎn)數(shù)的坐標(biāo)映射大概是這樣的const diceMap { 1: [{ x: 50, y: 50 }], 2: [{ x: 30, y: 30 }, { x: 70, y: 70 }], 3: [{ x: 30, y: 30 }, { x: 50, y: 50 }, { x: 70, y: 70 }], 4: [{ x: 30, y: 30 }, { x: 30, y: 70 }, { x: 70, y: 30 }, { x: 70, y: 70 }], 5: [{ x: 30, y: 30 }, { x: 30, y: 70 }, { x: 50, y: 50 }, { x: 70, y: 30 }, { x: 70, y: 70 }], 6: [{ x: 30, y: 25 }, { x: 30, y: 50 }, { x: 30, y: 75 }, { x: 70, y: 25 }, { x: 70, y: 50 }, { x: 70, y: 75 }] };這種做法的好處是不需要圖片資源加載快顏色、大小都可以用CSS隨時(shí)調(diào)整。缺點(diǎn)是要注意點(diǎn)的大小與骰子面尺寸的比例比如在200rpx的骰子面上點(diǎn)的直徑最好控制在30rpx到40rpx之間太大會(huì)擠在一起太小又顯得空曠。如果需要更逼真的效果可以把骰子面替換成帶圓角和漸變背景的容器再疊加上投影。微信小程序的WXSS支持filter和box-shadow可以做出不錯(cuò)的立體感。我自己的項(xiàng)目里還習(xí)慣加一層“凹陷”的偽3D效果骰子面四邊用深色描邊模擬厚度點(diǎn)用淺色內(nèi)陰影模擬凹陷。3.2 搖骰子動(dòng)畫幀切換模擬減速滾動(dòng)骰子游戲的核心體驗(yàn)不在于最終停在幾點(diǎn)而在于“搖”的過程。如果點(diǎn)擊按鈕后直接顯示結(jié)果用戶的參與感會(huì)大打折扣。所以要模擬真實(shí)搖骰子的效果。最常見的實(shí)現(xiàn)方式是“快閃減速”短時(shí)間內(nèi)快速切換顯示點(diǎn)數(shù)同時(shí)播放輕微的抖動(dòng)動(dòng)畫然后逐漸放慢切換速度最后停在最終點(diǎn)數(shù)上。用setInterval就能實(shí)現(xiàn)但setInterval是固定間隔必須手動(dòng)修改間隔才能模擬減速。更好的做法是用setTimeout鏈?zhǔn)秸{(diào)用每次執(zhí)行后根據(jù)當(dāng)前步數(shù)計(jì)算下一次的等待時(shí)間。rollDice() { if (this.data.rolling) return; this.setData({ rolling: true }); let step 0; const totalSteps 12; let delay 40; const next () { if (step totalSteps) { const finalValue Math.floor(Math.random() * 6) 1; this.setData({ displayValue: finalValue, rolling: false, animating: false }); return; } step; const randomValue Math.floor(Math.random() * 6) 1; this.setData({ displayValue: randomValue, animating: true }); delay 40 step * 15; setTimeout(next, delay); }; next(); }在WXSS里配合一個(gè)抖動(dòng)動(dòng)畫讓骰子每幀都輕微旋轉(zhuǎn)和位移keyframes shake { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-6rpx, 4rpx) rotate(-8deg); } 40% { transform: translate(6rpx, -4rpx) rotate(8deg); } 60% { transform: translate(-4rpx, -6rpx) rotate(-5deg); } 80% { transform: translate(4rpx, 6rpx) rotate(5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .dice.animating { animation: shake 0.4s ease-in-out infinite; }要注意的是animation需要給到骰子容器view上并且動(dòng)畫執(zhí)行的時(shí)機(jī)要和JavaScript的幀切換同步。這里有一個(gè)經(jīng)驗(yàn)不要試圖用CSS動(dòng)畫本身去模擬骰子翻轉(zhuǎn)因?yàn)镃SS無法動(dòng)態(tài)改變點(diǎn)數(shù)只能用CSS做抖動(dòng)用JS做點(diǎn)數(shù)切換兩者配合起來才有“搖”的真實(shí)感。如果追求更高級(jí)的效果可以用wx.createAnimation結(jié)合旋轉(zhuǎn)矩陣做3D翻轉(zhuǎn)或者引入sku組件庫中的transition動(dòng)畫。但說實(shí)話對(duì)于骰子游戲這種輕量場景CSS shake加setTimeout減速已經(jīng)足夠自然。上面這段代碼跑在iPhone和安卓真機(jī)上表現(xiàn)都不錯(cuò)不會(huì)出現(xiàn)明顯的卡頓或者掉幀。3.3 音效、震動(dòng)與交互反饋的接入頁面功能跑通后接下來要解決的是“手感”問題。骰子游戲如果只是安靜地把點(diǎn)數(shù)變來變?nèi)ネ婕液茈y獲得爽快感。微信小程序提供了一些基礎(chǔ)能力可以低成本提升互動(dòng)體驗(yàn)。音效方面用wx.createInnerAudioContext創(chuàng)建音頻實(shí)例在動(dòng)畫開始時(shí)播放搖晃聲在停頓時(shí)播放結(jié)果音。需要注意的是音頻文件不要過大mp3格式控制在1秒以內(nèi)體積盡量壓縮在100KB以下。const audio wx.createInnerAudioContext(); audio.src /assets/dice-shake.mp3; audio.play();頁面卸載時(shí)需要調(diào)用audio.destroy()釋放資源否則可能出現(xiàn)音頻無法停止或再次進(jìn)入頁面時(shí)重復(fù)播放的問題。骰子游戲的音效資源最好放在項(xiàng)目根目錄下的assets文件夾里而不是放在pages目錄下這樣便于統(tǒng)一管理。震動(dòng)反饋方面如果只需要“搖一搖”的感覺可以調(diào)用wx.vibrateShort。這個(gè)接口在部分安卓機(jī)型上觸發(fā)的是短暫震動(dòng)在iOS上則需要基礎(chǔ)庫版本2.13.0以上才支持。調(diào)用時(shí)建議包一層try-catch防止不支持的機(jī)型上報(bào)錯(cuò)try { wx.vibrateShort({ type: light }); } catch (e) { // 忽略震動(dòng)失敗 }互動(dòng)反饋還可以加一個(gè)“點(diǎn)數(shù)結(jié)果展示區(qū)域”每次搖完后顯示“你搖到了X點(diǎn)”并配合scale彈入動(dòng)畫。這個(gè)反饋雖然簡單但能把游戲閉環(huán)完整起來。界面設(shè)計(jì)上按鈕在rolling狀態(tài)下需要置灰否則用戶在動(dòng)畫執(zhí)行期間反復(fù)點(diǎn)擊會(huì)造成狀態(tài)混亂。這個(gè)防連點(diǎn)機(jī)制在下一節(jié)細(xì)講。4. 隨機(jī)數(shù)與業(yè)務(wù)邏輯公平性、防連點(diǎn)與狀態(tài)管理4.1 客戶端隨機(jī)數(shù)的邊界自娛自樂可以對(duì)賬不行骰子游戲的核心邏輯是隨機(jī)數(shù)生成。前文已經(jīng)用了一段簡單的Math.random()代碼生成1到6的隨機(jī)數(shù)。如果只是本地自娛自樂這種做法完全夠用但如果你把游戲擴(kuò)展到排行榜或者對(duì)戰(zhàn)模式客戶端隨機(jī)數(shù)的局限性就暴露了。Math.random()是偽隨機(jī)數(shù)生成器同一JavaScript引擎在相同種子下可以復(fù)現(xiàn)出相同的隨機(jī)序列。如果有人將小程序代碼反編譯出來就能理解點(diǎn)數(shù)生成的邏輯進(jìn)而預(yù)測結(jié)果或篡改進(jìn)程內(nèi)存影響戰(zhàn)績。那怎么解決針對(duì)需要公平性的場景正確做法是讓服務(wù)端生成隨機(jī)數(shù)并下發(fā)給客戶端?？蛻舳税l(fā)起請(qǐng)求時(shí)攜帶一個(gè)隨機(jī)字符串nonce服務(wù)端使用更安全的隨機(jī)源如crypto模塊的randomBytes生成點(diǎn)數(shù)返回?cái)?shù)字簽名。游戲結(jié)束后客戶端再向服務(wù)端驗(yàn)證結(jié)果。這樣做雖然引入了網(wǎng)絡(luò)延遲和額外的開發(fā)成本但對(duì)競技類玩法來說是不可省略的。不過本地骰子游戲也可以用一點(diǎn)小技巧提高偽隨機(jī)的“觀感公平性”利用系統(tǒng)時(shí)間戳作為熵源增加隨機(jī)性的不可預(yù)測性。比如const seed Date.now() % 1000; const randomValue Math.floor(Math.random() * 6) 1; const finalValue ((randomValue seed % 6) % 6) 1;這并不能提高真正的安全性但從用戶體驗(yàn)來說能避免連續(xù)搖出相同點(diǎn)數(shù)時(shí)“是不是程序固定了結(jié)果”的疑慮。從交互設(shè)計(jì)角度看玩家更希望看到的是“結(jié)果看起來隨機(jī)”這一點(diǎn)比真正的密碼學(xué)安全更值得優(yōu)先滿足。4.2 防連點(diǎn)與動(dòng)畫鎖的實(shí)現(xiàn)在骰子游戲這類快速點(diǎn)擊的交互場景中防連點(diǎn)是一個(gè)必須處理的工程問題。如果不加控制玩家在動(dòng)畫播放期間多次點(diǎn)擊按鈕可能觸發(fā)多個(gè)setTimeout或setInterval實(shí)例并行運(yùn)行導(dǎo)致最終點(diǎn)數(shù)錯(cuò)亂、動(dòng)畫卡死甚至頁面崩潰。最經(jīng)典的實(shí)現(xiàn)是“鎖變量”方式。在data中增加一個(gè)rolling狀態(tài)進(jìn)入搖骰子流程前判斷該字段handleRoll() { if (this.data.rolling) return; this.setData({ rolling: true }); this.rollDice(); }rollDice執(zhí)行完畢回調(diào)時(shí)將rolling置為false。這個(gè)鎖變量雖然簡單但要注意異步時(shí)序問題。如果在setTimeout鏈?zhǔn)秸{(diào)用的過程中頁面被onHidesetTimeout依然會(huì)繼續(xù)執(zhí)行此時(shí)玩家切換到其他頁面再回來滾動(dòng)動(dòng)畫可能已經(jīng)完成數(shù)據(jù)狀態(tài)卻是未更新的。穩(wěn)妥做法是在onHide時(shí)清理定時(shí)器onHide() { if (this.timer) { clearTimeout(this.timer); } }使用一個(gè)成員變量來保存當(dāng)前定時(shí)器id而不是用setInterval的返回值堆疊多個(gè)定時(shí)器。這樣可以確保在任何時(shí)候都只有一個(gè)定時(shí)器在運(yùn)行。另外按鈕組件的disabled屬性也要同步到視圖層。如果只做邏輯判斷而界面的按鈕看起來仍然可點(diǎn)擊玩家會(huì)認(rèn)為按鈕失效影響體驗(yàn)。所以把rolling字段綁定到按鈕的disabled屬性上并在視覺上降低透明度button bindtaphandleRoll disabled{{rolling}}搖骰子/button4.3 多骰子模式的分?jǐn)?shù)計(jì)算邏輯很多骰子游戲?yàn)榱嗽黾涌赏嫘詴?huì)加入“雙骰子”甚至“三骰子”模式。這個(gè)時(shí)候分?jǐn)?shù)計(jì)算邏輯就不再是簡單地把點(diǎn)數(shù)相加了而是要先判斷是否出現(xiàn)特殊組合。例如最常見的骰寶玩法中“雙骰子”翻倍、“豹子”三顆骰子點(diǎn)數(shù)相同有特殊倍率。這些規(guī)則用代碼表達(dá)并不難但需要提前規(guī)劃好數(shù)據(jù)結(jié)構(gòu)。我的做法是用一個(gè)數(shù)組保存每顆骰子的狀態(tài)data: { diceValues: [1, 1], diceCount: 2, resultText: }搖骰子時(shí)先生成所有骰子的最終點(diǎn)數(shù)值再根據(jù)規(guī)則計(jì)算結(jié)果calculateResult(values) { if (values.length 2) { if (values[0] values[1]) { return 對(duì)子點(diǎn)數(shù)翻倍獲得 (values[0] values[1]) * 2 分; } return 點(diǎn)數(shù)合計(jì) (values[0] values[1]) 分; } if (values.length 3) { if (values[0] values[1] values[1] values[2]) { return 豹子三倍獎(jiǎng)勵(lì)獲得 (values[0] values[1] values[2]) * 3 分; } } return 點(diǎn)數(shù)合計(jì) values.reduce((a, b) a b, 0) 分; }這里要注意的是與“動(dòng)畫顯示”的同步。多顆骰子在同一時(shí)間點(diǎn)停止動(dòng)畫才符合真實(shí)骰子停下的觀感。所以動(dòng)畫狀態(tài)也要從單顆骰子的boolean改成數(shù)組例如rollingStates: [true, false]分別控制每一顆骰子的抖動(dòng)狀態(tài)?；蛘吒唵蔚姆绞绞嵌囝w骰子使用同一個(gè)動(dòng)畫周期動(dòng)畫期間骰子的displayValue都在切換動(dòng)畫結(jié)束后統(tǒng)一顯示最終值。多骰子模式還有一個(gè)容易忽略的性能問題如果每顆骰子都開一個(gè)setTimeout鏈兩個(gè)骰子就是兩套定時(shí)器體系而它們的時(shí)間節(jié)點(diǎn)不同步會(huì)造成視覺錯(cuò)亂。推薦的做法是單獨(dú)維護(hù)一個(gè)“當(dāng)前顯示值”數(shù)組讓所有骰子的切換頻率完全一致diceDisplayValues: [1, 2, 3]在一個(gè)定時(shí)器回調(diào)里同時(shí)更新數(shù)組中所有元素的值保證每個(gè)骰子顯示的切換步調(diào)一致。5. 真機(jī)與開發(fā)者工具行為差異從白屏到層級(jí)錯(cuò)亂的排查記錄5.1 開發(fā)者工具正常但真機(jī)白屏你以為開發(fā)工具里跑通就萬事大吉了真正上線前真機(jī)預(yù)覽必然會(huì)暴露一批開發(fā)者工具發(fā)現(xiàn)不了的問題。最常見的現(xiàn)象是開發(fā)者工具編譯無報(bào)錯(cuò)、頁面正常渲染但掃碼在手機(jī)上打開后一片白屏。白屏問題的排查鏈路并不復(fù)雜按照優(yōu)先級(jí)逐一排除第一步在開發(fā)者工具右上角點(diǎn)擊“真機(jī)調(diào)試”而不是“預(yù)覽”。真機(jī)調(diào)試模式下手機(jī)上會(huì)顯示vConsole調(diào)試面板能在面板中直接看到報(bào)錯(cuò)日志。如果無法使用真機(jī)調(diào)試就先在開發(fā)者工具的Console面板里導(dǎo)出日志關(guān)注是否有“TypeError: Cannot read property xxx of undefined”這類運(yùn)行時(shí)錯(cuò)誤。第二步檢查app.json中注冊(cè)的頁面路徑是否正確。開發(fā)者工具存在一個(gè)“兼容模式”某些路徑錯(cuò)誤在小程序開發(fā)工具里不會(huì)報(bào)錯(cuò)但在真機(jī)器上會(huì)直接白屏。特別要注意大小寫pages/Index/Index和pages/index/index在Windows下可能被視為同一個(gè)路徑在真機(jī)的Linux文件系統(tǒng)小程序運(yùn)行環(huán)境里則是完全不同的路徑。第三步檢查基礎(chǔ)庫版本。開發(fā)者工具默認(rèn)使用最新基礎(chǔ)庫但真機(jī)上的微信版本如果較舊會(huì)使用舊基礎(chǔ)庫某些新API比如“vibrateShort”的低版本兼容會(huì)直接報(bào)錯(cuò)。應(yīng)對(duì)方法是在app.json里設(shè)置“l(fā)ibVersion”例如{ libVersion: 2.30.0 }將其設(shè)為你的項(xiàng)目所需的最低基礎(chǔ)庫版本。如果項(xiàng)目用到了某個(gè)特定API在開發(fā)者工具文檔里查詢它從哪個(gè)基礎(chǔ)庫版本開始支持然后把這個(gè)版本寫進(jìn)app.json。5.2 渲染層級(jí)與組件兼容性一些容易踩的樣式差異真機(jī)渲染和開發(fā)者工具渲染還有一個(gè)很大的區(qū)別組件層級(jí)。尤其當(dāng)頁面中有彈窗、canvas、video等原生組件時(shí)層級(jí)問題最為明顯。曾經(jīng)遇到過“video組件在部分三星手機(jī)上層級(jí)最高”的案例這是因?yàn)樵M件video、map、canvas、textarea在小程序中有自己獨(dú)立的渲染層會(huì)覆蓋普通view組件。骰子游戲場景中如果引入了canvas繪制骰子紋理或者用web-view嵌套一個(gè)3D骰子頁面也可能遇到層級(jí)覆蓋問題。對(duì)策是使用cover-view或同層渲染適配?；A(chǔ)庫2.4.0以上微信小程序已經(jīng)支持“同層渲染”原生組件可以被普通view覆蓋。但舊基礎(chǔ)庫不支持所以遇到層級(jí)問題時(shí)最穩(wěn)妥的方案是避免在骰子頁面中使用原生組件改用純view實(shí)現(xiàn)。頁面布局方面不同機(jī)型的底部安全區(qū)也是差異點(diǎn)。iPhone X之后的機(jī)型底部有Home指示條如果骰子按鈕位置靠近底部會(huì)被遮擋。正確做法是在頁面最外層容器中使用safe-area-inset-bottom.page { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }5.3 調(diào)試三板斧vConsole、真機(jī)調(diào)試和過濾Console小程序開發(fā)調(diào)試除了先前提到的vConsole這里整理一套完整的調(diào)試工具選擇思路。在開發(fā)者工具中調(diào)試優(yōu)先使用Console和Network面板。Network面板能看到每個(gè)請(qǐng)求的耗時(shí)、請(qǐng)求頭、返回?cái)?shù)據(jù)。骰子游戲如果接入了服務(wù)器主要問題會(huì)集中在這塊。在真機(jī)上調(diào)試必須使用真機(jī)調(diào)試2.0。它可以在PC端看到真機(jī)的實(shí)時(shí)日志也能在手機(jī)屏幕上顯示一個(gè)vConsole半圓按鈕點(diǎn)擊后可以看到完整的console輸出。這個(gè)工具最大的價(jià)值是定位那些只在真機(jī)硬件上出現(xiàn)的問題比如內(nèi)存不足、存儲(chǔ)空間不夠、網(wǎng)絡(luò)狀態(tài)切換等。第三種調(diào)試方式是清理緩存。真機(jī)預(yù)覽小程序第一次加載后代碼會(huì)被緩存當(dāng)你更新代碼再次預(yù)覽時(shí)微信可能使用舊緩存。解決方式是在預(yù)覽二維碼頁面勾選“使用最新版本”或者手工刪除小程序再搜索加載。有時(shí)候白屏問題純粹是緩存導(dǎo)致重裝一次就恢復(fù)。這些調(diào)試手段不一定每次都能用全但養(yǎng)成了“先在開發(fā)者工具過濾報(bào)錯(cuò)再到真機(jī)調(diào)試?yán)锟催\(yùn)行時(shí)日志”的固定流程排錯(cuò)效率會(huì)提升很多。6. 從demo到項(xiàng)目還能往哪個(gè)方向做深6.1 對(duì)戰(zhàn)玩法的服務(wù)端化與數(shù)據(jù)持久化跑通了本地骰子游戲之后下一個(gè)自然進(jìn)化方向就是引入“對(duì)戰(zhàn)”和“記錄”能力。微信小程序最方便的數(shù)據(jù)持久化方式是wx.setStorageSync它可以把數(shù)據(jù)寫入本機(jī)緩存跨頁面讀取。比如把每次搖骰子的點(diǎn)數(shù)、時(shí)間、勝負(fù)結(jié)果保存下來做一個(gè)歷史記錄頁面就能讓應(yīng)用從“玩一下”變成“可以留存用戶”。但本機(jī)存儲(chǔ)的問題是無法跨設(shè)備同步用戶換了手機(jī)歷史記錄就沒了。如果要做賬號(hào)體系下的持久化建議把游戲記錄上傳到后端。微信小程序天然支持微信登錄能力通過wx.login獲取用戶憑證再配合后端接口獲取openid來識(shí)別用戶。這里我不展開講完整的后端架構(gòu)只提醒一個(gè)關(guān)鍵點(diǎn)骰子點(diǎn)數(shù)這類數(shù)據(jù)如果只是存儲(chǔ)可以放在本地如果要參與排行榜、比賽等需要公信力的場景一定得服務(wù)端校驗(yàn)。前文已經(jīng)解釋了客戶端隨機(jī)數(shù)的不可靠性這里再次強(qiáng)調(diào)上線前要把“客戶端隨機(jī)數(shù)”替換為“服務(wù)端隨機(jī)數(shù)下發(fā)”否則排行榜會(huì)成為刷分重災(zāi)區(qū)。6.2 動(dòng)效和資源加載的進(jìn)一步優(yōu)化目前我們用的骰子動(dòng)畫是CSS shake配合JS點(diǎn)切換對(duì)于輕量游戲夠用但如果你追求“擲出骰子后骰子滾動(dòng)、旋轉(zhuǎn)、直到靜止”的物理效果那么需要引入更復(fù)雜的動(dòng)畫方案。微信小程序里實(shí)現(xiàn)復(fù)雜2D動(dòng)畫的主流方案是使用Canvas 2D接口。通過Canvas渲染骰子的旋轉(zhuǎn)角度、位移量再配合requestAnimationFrame逐幀繪制可以實(shí)現(xiàn)非常接近真實(shí)物理的滾動(dòng)效果。但代價(jià)是開發(fā)復(fù)雜度上升代碼量會(huì)比當(dāng)前方案翻好幾倍。在資源加載方面要注意小程序的包體積限制。目前主包體積上限是2MB超過后必須使用分包加載。骰子游戲如果包含多個(gè)音效文件、多套皮膚圖片、完整的動(dòng)畫幀序列很容易超限。這時(shí)有兩種處理思路一是把資源壓縮圖片用WebP格式音頻用低比特率mp3二是使用分包異步化將不常用的頁面比如設(shè)置頁、歷史記錄頁拆到獨(dú)立分包縮短首屏加載耗時(shí)。熱搜中還提到了“微信小程序分包異步化在其它分包中的插件”這類話題。如果你的骰子游戲未來打算做成一個(gè)工具集將多個(gè)小游戲聚合在同一個(gè)小程序里分包異步化是一個(gè)必須掌握的技能。它的核心思想是主包只保留首頁和核心框架各小游戲功能放入分包在用戶點(diǎn)擊時(shí)再按需加載對(duì)應(yīng)分包。這樣既能規(guī)避包體積限制又能縮短啟動(dòng)時(shí)間。6.3 項(xiàng)目結(jié)構(gòu)上的可維護(hù)性改造最后聊一個(gè)工程層面的經(jīng)驗(yàn)。很多人把源碼壓縮包解壓后習(xí)慣直接把所有代碼堆在pages/index/index這一套文件里頁面臃腫之后改起來很痛苦。一個(gè)相對(duì)合理的目錄結(jié)構(gòu)應(yīng)該是這樣的dice-game/ ├── app.js ├── app.json ├── app.wxss ├── assets/ │ ├── images/ │ └── sounds/ ├── components/ │ └── dice/ │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── pages/ │ ├── game/ │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── history/ └── utils/ └── random.js把骰子組件獨(dú)立到components目錄游戲頁面只負(fù)責(zé)編排頁面狀態(tài)隨機(jī)數(shù)相關(guān)邏輯抽到utils/random.js中這樣后續(xù)增加新玩法或修改搖骰子邏輯時(shí)不需要?jiǎng)诱麄€(gè)頁面文件。微信小程序的Component組件體系支持非常完善自定義組件里可以封裝數(shù)據(jù)、方法、外部樣式類比把邏輯堆在頁面里要清爽得多。從我個(gè)人的實(shí)際測試來看把骰子封裝成組件后多骰子模式只需要在游戲頁面里循環(huán)引用組件實(shí)例不用寫一堆重復(fù)的WXML和JS。如果你打算長期維護(hù)這個(gè)項(xiàng)目這個(gè)改造值得花一兩個(gè)小時(shí)完成。另外如果壓縮包里的代碼是“一次性模板”沒有版本管理痕跡建議在正式改動(dòng)前先用git init初始化一個(gè)本地倉庫提交一次初始狀態(tài)。這樣后續(xù)無論改成什么樣子都有一個(gè)可回退的基點(diǎn)。我見過太多人直接改源碼包改了三天發(fā)現(xiàn)改壞了只能重新下載原包再改一遍非常浪費(fèi)時(shí)間。這個(gè)zip包解壓、導(dǎo)入、調(diào)試、改造的完整鏈路下來你會(huì)發(fā)現(xiàn)微信小程序的開發(fā)其實(shí)并不神秘。骰子游戲作為練手項(xiàng)目的價(jià)值在于它同時(shí)覆蓋了頁面布局、動(dòng)畫、狀態(tài)管理、真機(jī)適配、數(shù)據(jù)存儲(chǔ)這幾個(gè)核心知識(shí)點(diǎn)而且每一項(xiàng)都足夠輕量適合作為理解小程序運(yùn)行機(jī)制的第一塊敲門磚。拿到壓縮包之后按著這條鏈路一步步走通再往里填充你自己的玩法創(chuàng)意這個(gè)項(xiàng)目就會(huì)真正變成你自己的東西。本文還有配套的精品資源點(diǎn)擊獲取