簡介一款專為喝酒與聚會場景設(shè)計的微信小程序源碼面向需要快速搭建派對互動工具的小程序開發(fā)者、二次開發(fā)者及聚會組織者這個“千尋百念修復(fù)版”針對舊版進(jìn)行了優(yōu)化內(nèi)置多種互動游戲與娛樂工具可用于活躍聚會氛圍、增強(qiáng)參與者互動適合各類規(guī)模的社交場景。資源包為 zip 格式共 447 個文件整體僅 1.38MB以 png、js、json、mp3、wxss、wxml 等類型為主覆蓋圖片素材、邏輯腳本、配置文件、音頻資源和頁面結(jié)構(gòu)目錄分層清晰目前已有 53 人學(xué)習(xí)可作為小程序項目參考。源碼雖未列出全部功能細(xì)節(jié)但描述中強(qiáng)調(diào)功能完備且修復(fù)了舊版缺陷可直接部署使用目錄區(qū)分了公共組件、游戲邏輯、核心頁面等模塊方便開發(fā)者定位與二次開發(fā)節(jié)省基礎(chǔ)搭建時間。對于想學(xué)習(xí)小程序結(jié)構(gòu)或低成本落地聚會娛樂應(yīng)用的人這是一份小巧實用的基礎(chǔ)代碼包。1. 喝酒小程序源碼拿到修好的“千尋百念”先看這三處如果你搜過“喝酒小程序源碼”大概率見過那款叫“千尋百念”的微信小程序——轉(zhuǎn)盤、骰子、真心話大冒險、輸贏罰酒一套典型的線下聚會助興工具。這套源碼流傳的版本很多但不少是半成品有的轉(zhuǎn)盤動畫卡死有的分享回調(diào)拿不到參數(shù)有的登錄直接報錯。我拿到這版“修復(fù)版”源碼之后從頁面結(jié)構(gòu)、事件綁定到微信登錄鏈路都過了一遍確認(rèn)它可以正常跑起來。這篇筆記把拆包過程、部署步驟和踩過的坑寫清楚讓你拿到的源碼不只是“能打開模擬器”而是真正能上傳體驗版、拿手機(jī)號登錄、分享給好友一起玩的完整項目。適合有基礎(chǔ)小程序開發(fā)經(jīng)驗、想直接改來用的讀者。2. 源碼頭緒小程序的頁面棧與“千尋百念”的文件結(jié)構(gòu)2.1 為什么這版源碼能叫“修復(fù)版”先看 app.json 和頁面路由微信小程序和普通網(wǎng)頁不同它沒有 URL 地址欄所有頁面都靠app.json里的pages數(shù)組注冊。打開項目第一件事不是看代碼而是看這個文件——頁面順序、窗口樣式、tabBar、插件都在這里定義。{ pages: [ pages/index/index, pages/game/dice, pages/game/turntable, pages/game/truth, pages/user/profile, pages/user/history ], window: { navigationBarTitleText: 千尋百念, navigationBarBackgroundColor: #2B2B2B, navigationBarTextStyle: white, backgroundColor: #1A1A1A }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }這段配置說明三件事第一這個項目有 6 個頁面核心玩法是骰子、轉(zhuǎn)盤、真心話用戶相關(guān)的是主頁和個人歷史記錄第二全局導(dǎo)航欄是深色底白字背景也是深色說明這版 UI 走的是“酒吧暗色風(fēng)”第三lazyCodeLoading開了按需注入能減少首包體積。拿到源碼后先核對pages數(shù)組如果目錄里少了一個頁面文件編譯時就會白屏報錯。常見做法是直接從項目根目錄往下捋把頁面文件缺失表拉出來。2.2 關(guān)鍵目錄功能對照components / utils / services修復(fù)版和原始版的差別主要在代碼組織上。我拆開后的目錄結(jié)構(gòu)大致如下├── app.js ├── app.json ├── app.wxss ├── components/ │ ├── dice/ │ │ ├── dice.js │ │ ├── dice.json │ │ ├── dice.wxml │ │ └── dice.wxss │ ├── turntable/ │ │ ├── turntable.js │ │ ├── turntable.json │ │ ├── turntable.wxml │ │ └── turntable.wxss │ └── share-card/ │ ├── share-card.js │ ├── share-card.json │ ├── share-card.wxml │ └── share-card.wxss ├── pages/ │ ├── index/ │ ├── game/ │ ├── user/ │ └── ... ├── services/ │ ├── auth.js │ ├── game.js │ └── user.js ├── utils/ │ ├── wxapi.js │ ├── format.js │ └── config.js └── project.config.jsoncomponents存的是自定義組件骰子和轉(zhuǎn)盤是獨立組件包裝的方便復(fù)用services層封裝了登錄、游戲數(shù)據(jù)上報、用戶信息讀取的接口utils/wxapi.js統(tǒng)一包了一層微信 API 調(diào)用把成功和失敗回調(diào)轉(zhuǎn)成 Promise。這里有一點我之前翻車過的經(jīng)驗很多流傳的源碼把 wx.request 直接寫進(jìn)頁面里改需求時要把每個頁面翻一遍這版把請求收攏到 services算是修復(fù)版里比較像樣的改動。2.3 app.js 里的全局登錄態(tài)為什么拿手機(jī)號登錄前必須先 wx.login小程序的登錄和傳統(tǒng)網(wǎng)頁登錄不一樣它沒有 session 中間件核心是wx.login換取 code再由后端拿著 code 去微信接口換 openid?？催@版 app.js 的邏輯App({ globalData: { openid: , userInfo: null, loggedIn: false }, onLaunch() { this.initLogin(); }, initLogin() { const token wx.getStorageSync(token); if (token) { this.globalData.loggedIn true; } else { this.doWxLogin(); } }, doWxLogin() { wx.login({ success: (res) { if (res.code) { // 將 code 發(fā)給后端后端用 code 換 openid 和 session_key this.exchangeCode(res.code); } } }); }, exchangeCode(code) { const { apiBase } require(./utils/config); wx.request({ url: ${apiBase}/auth/login, method: POST, data: { code }, success: (res) { if (res.data.code 0) { wx.setStorageSync(token, res.data.data.token); this.globalData.loggedIn true; } } }); } });wx.login拿到的 code 有效期只有 5 分鐘而且只能用一次。這里的參數(shù)res.code是一串臨時憑證后端拿它換 openid。設(shè)計上注意兩點一是服務(wù)端要處理 code 重復(fù)使用的情況否則并發(fā)請求時第二次必然失敗二是 token 存儲用wx.setStorageSync簡單直接如果后續(xù)要多端同步再換成wx.setStorage的異步版本。之前有人問為什么不直接把 code 存進(jìn) storage其實 code 是一次性的存了沒意義應(yīng)該存的是后端返回的 token。3. 部署到開發(fā)者工具三步把源碼跑起來附帶 project.config.json 調(diào)優(yōu)3.1 導(dǎo)入項目AppID 與編譯環(huán)境的正確設(shè)置用微信開發(fā)者工具導(dǎo)入源碼時關(guān)鍵不是點“導(dǎo)入”按鈕而是先看project.config.json里的appid字段。很多流傳源碼里的 appid 是別人的測試號直接導(dǎo)入會報“appid 不存在”。{ appid: 你的小程序AppID, compileType: miniprogram, libVersion: latest, setting: { es6: true, postcss: true, minified: true, urlCheck: false }, projectname: qianxun-bainian, simulatorType: wechat, condition: {} }urlCheck: false是我建議設(shè)的。不關(guān)掉的話后端接口域名沒配置時調(diào)試階段每個請求都會被攔截。正式發(fā)布之前記得去微信公眾平臺把 request 合法域名配好再把urlCheck改回 true。libVersion設(shè)為latest能讓工具自動匹配最新的基礎(chǔ)庫但如果你用的組件庫有兼容性要求這里要鎖定到具體版本否則上線后低版本微信打不開。3.2 真機(jī)預(yù)覽前的必要檢查不校驗合法域名、調(diào)試器開關(guān)開發(fā)者工具里跑通不代表真機(jī)沒問題。真機(jī)預(yù)覽之前我一般會強(qiáng)制走一遍這幾個開關(guān)詳情 - 本地設(shè)置 - 不校驗合法域名、web-view 域名、TLS 版本以及 HTTPS 證書打開調(diào)試器 - 打開調(diào)試。真機(jī)預(yù)覽開啟調(diào)試才能在小程序右上角菜單里看到 vConsole 入口。這一步做不到的話真機(jī)一請求后端就白屏控制臺打不開你根本不知道是域名問題還是接口報錯。最常見的現(xiàn)象是模擬器里一切正常真機(jī)上所有 wx.request 都失敗報ERR_CERT_COMMON_NAME_INVALID其實就是證書域名對不上。這屬于配置問題不是代碼問題但卡住新手很久。3.3 本地后端聯(lián)調(diào)用 Node 起一個臨時登錄接口源碼里大概率沒有后端只有前端。不要慌本地用一個 Node 服務(wù)模擬后端登錄接口即可把流程跑通。我這邊常用的方案是 node express十幾行代碼就能搭一個登錄接口。const express require(express); const app express(); app.use(express.json()); // 模擬微信登錄接口 app.post(/auth/login, (req, res) { const { code } req.body; if (!code) { return res.json({ code: 1, msg: code is required }); } // 實際項目中這里用 code 請求微信接口拿到 openid 后下發(fā) token const mockOpenid mock_openid_ Date.now(); const token mock_token_ Math.random().toString(36).slice(2); res.json({ code: 0, data: { token, openid: mockOpenid } }); }); app.listen(3000, () { console.log(mock server running at http://localhost:3000); });然后修改utils/config.js里的apiBase把它指向本地地址module.exports { // 本地聯(lián)調(diào)用 http://localhost // 上線換成 https://your.domain.com apiBase: http://localhost:3000, version: 1.0.0 };注意微信開發(fā)者工具模擬器里請求 localhost 是沒問題的但真機(jī)預(yù)覽時不行——手機(jī)上的 localhost 指的是手機(jī)自己。真機(jī)調(diào)本地接口要把a(bǔ)piBase改成電腦的局域網(wǎng) IP比如http://192.168.1.101:3000。這一步很容易忽略我最初調(diào)試時在這里浪費了一個晚上。4. 核心玩法代碼解讀骰子動畫、轉(zhuǎn)盤抽獎與分享參數(shù)的透傳4.1 骰子組件的隨機(jī)數(shù)與動畫狀態(tài)機(jī)骰子是小程序里最容易寫崩的部分原因不是隨機(jī)數(shù)而是動畫狀態(tài)控制。看這版組件的核心邏輯Component({ data: { diceValue: 1, rolling: false }, methods: { rollDice() { if (this.data.rolling) return; this.setData({ rolling: true }); // 隨機(jī) 1-6 const value Math.floor(Math.random() * 6) 1; // 先播動畫動畫結(jié)束后再顯示結(jié)果 setTimeout(() { this.setData({ diceValue: value, rolling: false }); // 觸發(fā)自定義事件讓父頁面可以拿到結(jié)果 this.triggerEvent(rollend, { value }); }, 800); } } });這里的rolling標(biāo)志位就是防重復(fù)觸發(fā)。如果不加用戶在動畫期間連點會連續(xù)觸發(fā)多個 setTimeout結(jié)果就是骰子還沒停下又變了。triggerEvent是組件向父頁面通信的標(biāo)準(zhǔn)方式和 Vue 的$emit類似。父頁面這樣接onDiceRollEnd(e) { const value e.detail.value; // 根據(jù)點數(shù)決定誰喝酒 this.setData({ currentDice: value }); }4.2 轉(zhuǎn)盤抽獎canvas 繪制與指針?？拷嵌扔嬎戕D(zhuǎn)盤組件用的是 canvas繪制扇形和文字都在 canvas 里完成。?？拷嵌仁沁@里的重災(zāi)區(qū)很多源碼轉(zhuǎn)動結(jié)束沒有“歸位”邏輯指針停在兩個扇形交界處結(jié)果就出現(xiàn)爭議。修復(fù)版的做法是已知每個扇區(qū)角度為 60 度然后算出目標(biāo)扇區(qū)中心角再讓轉(zhuǎn)盤轉(zhuǎn) N 圈后精確停在中心位置。const sectors [一杯, 兩杯, 半杯, 免喝, 一杯, 兩杯]; const sectorAngle 360 / sectors.length; spin() { if (this.data.spinning) return; const targetIndex Math.floor(Math.random() * sectors.length); // 轉(zhuǎn) 5 圈 目標(biāo)扇區(qū)中心角 隨機(jī)偏移 15 度/-15 度 const targetAngle 360 * 5 targetIndex * sectorAngle sectorAngle / 2; this.setData({ spinning: true, currentAngle: targetAngle }); }關(guān)鍵參數(shù)是targetAngle。先隨機(jī)決定目標(biāo)扇區(qū)再圍繞它的中心角給一個 ±15 度的偏移視覺上看起來像“差一點就轉(zhuǎn)到隔壁”實際上結(jié)果已經(jīng)定了。偏移量最好不要超過 15 度否則會滑到相鄰扇區(qū)你說是按中心算還是按邊緣算會吵起來。4.3 分享給好友onShareAppMessage 的參數(shù)透傳坑喝酒小程序的核心場景是多人聚會必須依賴微信分享。這版的分享邏輯在pages/game/game.js里onShareAppMessage() { const roomId this.data.roomId || default; return { title: 來骰一把輸了認(rèn)罰, path: /pages/game/game?roomId${roomId}, imageUrl: /images/share-card.png }; }這里最容易踩的坑是path。如果頁面路徑拼錯分享卡片點開就是“頁面不存在”。另外如果要帶參數(shù)參數(shù)必須是字符串不能是對象。imageUrl可以自定義分享卡片圖片不傳的話默認(rèn)截屏。之前有人問分享卡片能不能直接拉起骰子動畫不行onShareAppMessage只負(fù)責(zé)分享不負(fù)責(zé)頁面行為。分享出去后好友點開的路徑解析方式onLoad(options) { if (options.roomId) { this.setData({ roomId: options.roomId }); } // 從分享鏈接進(jìn)來自動加入房間 this.joinRoom(this.data.roomId); }從分享卡片進(jìn)入時options里能拿到 query 參數(shù)。注意第一次進(jìn)入小程序時onLoad一定觸發(fā)但如果小程序已經(jīng)在后臺存活分享鏈接再次打開只會觸發(fā)onShow。所以嚴(yán)謹(jǐn)做法是參數(shù)解析同時寫在onLoad和onShow里或者在onLoad里判斷場景值。這個坑在社交類小程序里很典型分享參數(shù)丟失很多人遇到過。5. 避坑指南千尋百念修復(fù)版里我踩過的四個實際問題5.1 轉(zhuǎn)盤在 iOS 真機(jī)上旋轉(zhuǎn)卡頓現(xiàn)象安卓模擬器里轉(zhuǎn)盤絲滑iPhone 上旋轉(zhuǎn)掉幀明顯卡頓感很強(qiáng)。原因轉(zhuǎn)盤用的不是 canvas 2D 繪制而是 CSS3transform: rotate每幀都在改變角度iOS 上 Safari 的合成器對高頻 transform 更新處理不夠好。加上轉(zhuǎn)盤背景圖是幾張合成的大圖內(nèi)存占用偏高。解決把背景圖先壓縮到 750px 寬并用canvas繪制每一幀。注意代碼里不要同時修改變形和透明度因為一個觸發(fā)合成層一個觸發(fā)重繪。5.2 分享到群里好友點開收不到 roomId現(xiàn)象從分享卡片進(jìn)入后頁面上房間號為空直接進(jìn)到了默認(rèn)房間。原因分享路徑里的參數(shù)如果含有特殊字符比如或中文微信會編碼但onLoad里拿到后沒有 decode 導(dǎo)致錯亂。這版源碼里的 roomId 是uuid格式本身安全但老版本里有用數(shù)字自增 id 的偏偏拼在 URL 里時漏了編碼處理。解決統(tǒng)一用encodeURIComponent包一層。另外不要用“客戶端生成 roomId”的方式多個端同時生成容易撞改了之后用服務(wù)端返的 id。5.3 真機(jī)預(yù)覽時手機(jī)號登錄一直轉(zhuǎn)圈現(xiàn)象點了“手機(jī)號登錄”按鈕loading 轉(zhuǎn)圈超過 10 秒最后提示“l(fā)ogin fail”。原因手機(jī)號登錄需要兩個條件同時滿足一是小程序是認(rèn)證過的企業(yè)主體個人主體沒有權(quán)限二是必須用button組件設(shè)置open-typegetPhoneNumber觸發(fā)不能直接用wx.getPhoneNumber。很多流傳源碼在這里用了 wx 方法所以個人開發(fā)者調(diào)試時必然失敗。解決檢查 app.json 里是否聲明了requiredPrivateInfos然后看按鈕寫法button open-typegetPhoneNumber bindgetphonenumberonGetPhoneNumber 手機(jī)號快捷登錄 /buttonbindgetphonenumber回調(diào)里拿到的e.detail.code也是臨時憑證后端要用這個 code 換手機(jī)號不能直接解析手機(jī)號。5.4 后臺上傳代碼時提示“分包過大”現(xiàn)象開發(fā)者工具上傳代碼時提示主包超過 2MB無法上傳。原因項目里的圖片資源沒有壓縮尤其轉(zhuǎn)盤背景圖和骰子貼圖可能都是 1MB 級別。一個小程序的主包限制是 2MB超過就傳不上去。解決圖片全部走壓縮流程PNG 轉(zhuǎn) WebP 或壓縮到 60% 質(zhì)量代碼里引用的路徑同步改名。另外可以做分包處理把游戲頁面扔進(jìn)subpackages里。{ subpackages: [ { root: pages/game, name: game, pages: [ dice, turntable, truth ] } ] }注意subpackages里的頁面路徑不用再出現(xiàn)在pages數(shù)組中app.json里會以分包形式加載。改完之后真機(jī)預(yù)覽時這些頁面會延遲加載首次進(jìn)入會有一點白屏?xí)r間屬于正?，F(xiàn)象。6. 進(jìn)階把“千尋百念”接上真實后端登錄鏈路全通后的下一步當(dāng)你把前端的登錄、游戲、分享都跑通之后可以接入真實后端。微信小程序手機(jī)號登錄的正確流程是前端通過open-typegetPhoneNumber拿到code用這個 code 請求后端后端再拿 code 去微信接口換取手機(jī)號。接口地址是固定的關(guān)鍵參數(shù)是code和openid。// services/auth.js const { apiBase } require(../utils/config); function phoneLogin(phoneCode) { return new Promise((resolve, reject) { wx.request({ url: ${apiBase}/auth/phone-login, method: POST, data: { phoneCode, // 這里同時帶上 wx.login 的 code服務(wù)端用來換 openid loginCode: this.globalData.loginCode }, success: (res) resolve(res.data), fail: (err) reject(err) }); }); }服務(wù)端拿phoneCode換手機(jī)號的請求返回的手機(jī)號是加密的需要結(jié)合session_key解密。具體流程標(biāo)準(zhǔn)實現(xiàn)是后端先用loginCode換session_key再拿phoneCode換手機(jī)號密文最后 AES 解密。不建議前端自己解密密鑰管理放后端更安全。接入真實后端之后建議做一件事把utils/config.js里的apiBase改成正式域名并且在微信公眾平臺配置 request 合法域名。這一步還有一個附加好處后續(xù)加排行榜、防沉迷提醒、歷史戰(zhàn)績同步等功能不用再動前端登錄邏輯直接在 services 層加方法就行。另外一個我從這次拆包中養(yǎng)成的習(xí)慣每次拿到修復(fù)版源碼第一件事先全局搜索TODO和FIXME第二件事看project.config.json里的appid第三件事跑一遍登錄鏈路第四件事檢查圖片大小。這四步走完基本上是能用的少走一步后面都可能返工。希望這篇筆記幫到你讓你在“喝酒小程序源碼”這個關(guān)鍵詞下少走一些彎路。本文還有配套的精品資源點擊獲取