簡(jiǎn)介這份資源是一套基于微信小程序?qū)崿F(xiàn)的火車(chē)票查詢(xún)系統(tǒng)源碼面向具備小程序基礎(chǔ)語(yǔ)法、希望練習(xí)接口調(diào)用與頁(yè)面聯(lián)調(diào)的開(kāi)發(fā)者也可作為課程設(shè)計(jì)或畢業(yè)設(shè)計(jì)的起步模板。項(xiàng)目圍繞車(chē)次查詢(xún)、站點(diǎn)信息與余票展示等典型場(chǎng)景組織代碼方便在此基礎(chǔ)上繼續(xù)擴(kuò)展訂單、登錄等功能。壓縮包共23個(gè)文件約11KB包含8個(gè)js邏輯腳本、5個(gè)json配置、5個(gè)wxss樣式、4個(gè)wxml頁(yè)面結(jié)構(gòu)以及1個(gè)md說(shuō)明文檔分別承擔(dān)業(yè)務(wù)邏輯、頁(yè)面配置、界面樣式與視圖渲染等職責(zé)目錄按頁(yè)面與工具模塊劃分結(jié)構(gòu)清晰。目前已有1643人學(xué)習(xí)下載。讀者可從中獲取完整的小程序請(qǐng)求封裝與頁(yè)面交互示例理解api與request工具模塊的調(diào)用方式并參考其目錄組織與配置寫(xiě)法快速搭建自己的查詢(xún)類(lèi)小程序減少?gòu)牧忝鞯某杀尽?. 從一次搶票失敗說(shuō)起這個(gè)火車(chē)票查詢(xún)小程序到底能干什么去年春運(yùn)前我?guī)团笥芽匆粋€(gè)搶票腳本的問(wèn)題結(jié)果發(fā)現(xiàn)他連車(chē)次余票都查不明白——用的還是某個(gè)第三方網(wǎng)頁(yè)接口返回的數(shù)據(jù)結(jié)構(gòu)一變整個(gè)腳本就崩了。當(dāng)時(shí)我就想與其依賴(lài)別人維護(hù)的接口不如自己寫(xiě)一個(gè)能跑通查詢(xún)鏈路的小程序。后來(lái)在代碼倉(cāng)庫(kù)里翻到了這個(gè)「微信小程序-火車(chē)票查詢(xún)」項(xiàng)目它正好解決了一個(gè)很具體的需求在微信里輸入出發(fā)站、到達(dá)站和日期直接拿到車(chē)次列表和余票信息不用跳來(lái)跳去。這個(gè)項(xiàng)目適合兩類(lèi)人一是想學(xué)小程序網(wǎng)絡(luò)請(qǐng)求和列表渲染的新手代碼結(jié)構(gòu)簡(jiǎn)單跑起來(lái)就能看到數(shù)據(jù)二是需要快速搭一個(gè)查詢(xún)工具原型的開(kāi)發(fā)者核心邏輯抽出來(lái)就能復(fù)用。它不涉及支付和下單只做查詢(xún)展示所以調(diào)試成本很低不用申請(qǐng)復(fù)雜的商戶(hù)資質(zhì)。接下來(lái)我按「能跑、能看懂、能改」的順序把這個(gè)項(xiàng)目的骨架和關(guān)鍵實(shí)現(xiàn)拆一遍。2. 項(xiàng)目骨架與運(yùn)行鏈路從目錄結(jié)構(gòu)到第一次請(qǐng)求成功2.1 目錄結(jié)構(gòu)小程序標(biāo)準(zhǔn)分層與頁(yè)面組織拿到源碼后先看根目錄。這個(gè)項(xiàng)目用的是微信小程序原生框架沒(méi)有引入第三方 UI 庫(kù)所以目錄很干凈。常見(jiàn)結(jié)構(gòu)是pages放頁(yè)面、utils放工具函數(shù)、app.json做全局配置。我打開(kāi)時(shí)第一眼找的是app.json里的pages數(shù)組它決定了啟動(dòng)頁(yè)和頁(yè)面路徑。{ pages: [ pages/index/index, pages/result/result ], window: { navigationBarTitleText: 火車(chē)票查詢(xún), navigationBarBackgroundColor: #1E90FF } }這段配置里pages數(shù)組第一項(xiàng)是啟動(dòng)頁(yè)所以打開(kāi)小程序先看到查詢(xún)表單。window里設(shè)了導(dǎo)航欄標(biāo)題和背景色改顏色直接改十六進(jìn)制值就行。注意pages路徑不要寫(xiě).js后綴否則編譯會(huì)報(bào)錯(cuò)這是新手常踩的坑。pages/index負(fù)責(zé)輸入pages/result負(fù)責(zé)展示車(chē)次列表。兩個(gè)頁(yè)面之間用wx.navigateTo跳轉(zhuǎn)參數(shù)通過(guò) URL 拼接傳遞。這種拆分方式讓查詢(xún)邏輯和渲染邏輯分開(kāi)改起來(lái)不會(huì)互相干擾。2.2 查詢(xún)表單輸入校驗(yàn)與日期選擇首頁(yè)的index.wxml里放了兩個(gè)輸入框和一個(gè)日期選擇器。出發(fā)站和到達(dá)站用input日期用picker modedate。我一般會(huì)在這里加一個(gè)非空校驗(yàn)防止用戶(hù)直接點(diǎn)查詢(xún)導(dǎo)致請(qǐng)求參數(shù)為空。// pages/index/index.js Page({ data: { from: , to: , date: }, onFromInput(e) { this.setData({ from: e.detail.value.trim() }); }, onDateChange(e) { this.setData({ date: e.detail.value }); }, onQuery() { const { from, to, date } this.data; if (!from || !to || !date) { wx.showToast({ title: 請(qǐng)?zhí)顚?xiě)完整, icon: none }); return; } wx.navigateTo({ url: /pages/result/result?from${from}to${to}date${date} }); } });setData是小程序更新視圖的核心方法這里把輸入值同步到data。onQuery里先做空值判斷再用模板字符串拼 URL。注意from和to如果包含特殊字符需要encodeURIComponent處理否則跳轉(zhuǎn)后參數(shù)會(huì)截?cái)?。日期選擇器返回的是YYYY-MM-DD格式正好符合大多數(shù)查詢(xún)接口的要求。2.3 網(wǎng)絡(luò)請(qǐng)求封裝wx.request 與公共配置查詢(xún)請(qǐng)求放在result.js的onLoad里。項(xiàng)目里把請(qǐng)求域名和路徑抽到了utils/config.js這樣換接口時(shí)不用翻遍所有頁(yè)面。// utils/config.js const BASE_URL https://api.example.com; // 替換成實(shí)際可用的查詢(xún)接口 module.exports { QUERY_TRAINS: ${BASE_URL}/train/query };// pages/result/result.js const config require(../../utils/config.js); Page({ data: { trains: [], loading: true }, onLoad(options) { const { from, to, date } options; this.queryTrains(from, to, date); }, queryTrains(from, to, date) { wx.request({ url: config.QUERY_TRAINS, method: GET, data: { from, to, date }, success: (res) { if (res.data res.data.code 0) { this.setData({ trains: res.data.list, loading: false }); } else { wx.showToast({ title: 查詢(xún)失敗, icon: none }); } }, fail: () { wx.showToast({ title: 網(wǎng)絡(luò)異常, icon: none }); } }); } });wx.request的data字段會(huì)自動(dòng)拼成查詢(xún)字符串不用手動(dòng)拼接。success里先判斷業(yè)務(wù)狀態(tài)碼再取list賦值給trains。這里有個(gè)細(xì)節(jié)如果接口返回的字段名不是list需要同步改setData的鍵名。fail回調(diào)處理網(wǎng)絡(luò)層錯(cuò)誤比如域名未配置或超時(shí)。注意小程序正式環(huán)境要求 HTTPS 域名開(kāi)發(fā)時(shí)可以在開(kāi)發(fā)者工具里勾選「不校驗(yàn)合法域名」臨時(shí)繞過(guò)。2.4 列表渲染wx:for 與余票狀態(tài)展示拿到數(shù)據(jù)后result.wxml用wx:for渲染車(chē)次列表。每個(gè)車(chē)次顯示車(chē)次號(hào)、出發(fā)到達(dá)時(shí)間、歷時(shí)和余票狀態(tài)。view wx:if{{loading}}加載中.../view view wx:else view wx:for{{trains}} wx:keytrainNo classtrain-item text{{item.trainNo}}/text text{{item.fromTime}} - {{item.toTime}}/text text{{item.duration}}/text text class{{item.seatCount 0 ? has-seat : no-seat}} {{item.seatCount 0 ? 有票 : 無(wú)票}} /text /view /viewwx:key用trainNo保證列表更新時(shí)不會(huì)錯(cuò)位。余票狀態(tài)用三元表達(dá)式切換 classhas-seat和no-seat在wxss里定義顏色。如果接口返回的余票是數(shù)字直接比較如果是字符串「有」「無(wú)」需要改判斷條件。這里我一般會(huì)加一個(gè)item.seatCount的默認(rèn)值防止字段缺失導(dǎo)致渲染空白。3. 核心模塊拆解查詢(xún)參數(shù)處理與數(shù)據(jù)映射3.1 車(chē)站數(shù)據(jù)本地字典與拼音匹配火車(chē)票查詢(xún)有個(gè)繞不開(kāi)的問(wèn)題用戶(hù)輸入「北京」還是「北京西」項(xiàng)目里用了一個(gè)本地車(chē)站字典放在utils/stations.js把常用車(chē)站名和拼音縮寫(xiě)都列出來(lái)。// utils/stations.js const stations [ { name: 北京, code: BJP, pinyin: beijing }, { name: 北京西, code: BXP, pinyin: beijingxi }, { name: 上海, code: SHH, pinyin: shanghai }, { name: 廣州, code: GZQ, pinyin: guangzhou } ]; module.exports stations;查詢(xún)前先用stations.find把用戶(hù)輸入轉(zhuǎn)成車(chē)站代碼再傳給接口。如果找不到匹配項(xiàng)就提示「車(chē)站不存在」。這個(gè)字典可以按需擴(kuò)充但注意代碼要和接口要求的一致不同數(shù)據(jù)源可能用不同的三字碼。我一般會(huì)把字典單獨(dú)維護(hù)不混在頁(yè)面邏輯里方便后續(xù)替換成遠(yuǎn)程接口。3.2 日期格式化補(bǔ)零與接口兼容日期選擇器返回的格式是YYYY-MM-DD但有些接口要求YYYYMMDD。項(xiàng)目里在utils/util.js寫(xiě)了一個(gè)轉(zhuǎn)換函數(shù)。// utils/util.js function formatDate(dateStr) { return dateStr.replace(/-/g, ); } module.exports { formatDate };調(diào)用時(shí)formatDate(2025-01-01)返回20250101。如果接口要求帶時(shí)間戳可以再包一層new Date(dateStr).getTime()。注意時(shí)區(qū)問(wèn)題小程序運(yùn)行在用戶(hù)設(shè)備上new Date會(huì)按本地時(shí)區(qū)解析跨時(shí)區(qū)場(chǎng)景要統(tǒng)一用 UTC。3.3 請(qǐng)求參數(shù)組裝從頁(yè)面到接口的完整鏈路把前面的步驟串起來(lái)result.js里實(shí)際組裝參數(shù)的邏輯是這樣的const stations require(../../utils/stations.js); const { formatDate } require(../../utils/util.js); queryTrains(from, to, date) { const fromStation stations.find(s s.name from || s.pinyin from); const toStation stations.find(s s.name to || s.pinyin to); if (!fromStation || !toStation) { wx.showToast({ title: 車(chē)站名有誤, icon: none }); return; } wx.request({ url: config.QUERY_TRAINS, data: { from: fromStation.code, to: toStation.code, date: formatDate(date) }, // ... 成功失敗回調(diào)同上 }); }這里先做車(chē)站匹配支持中文名和拼音兩種輸入。find返回第一個(gè)匹配項(xiàng)如果有重名車(chē)站比如「北京」和「北京西」都包含「北京」需要更精確的匹配規(guī)則比如優(yōu)先完全相等。日期轉(zhuǎn)換放在請(qǐng)求前保證接口收到的格式統(tǒng)一。如果接口返回的車(chē)次字段和頁(yè)面渲染字段不一致可以在success里做一層映射把train_code轉(zhuǎn)成trainNo之類(lèi)的。4. 避坑與排查調(diào)試查詢(xún)功能時(shí)容易翻車(chē)的幾個(gè)點(diǎn)4.1 現(xiàn)象開(kāi)發(fā)者工具里請(qǐng)求成功真機(jī)預(yù)覽失敗原因小程序正式環(huán)境要求請(qǐng)求域名在后臺(tái)配置白名單且必須是 HTTPS。開(kāi)發(fā)者工具默認(rèn)不校驗(yàn)真機(jī)走嚴(yán)格模式。解決在微信公眾平臺(tái)后臺(tái)「開(kāi)發(fā)管理」里添加 request 合法域名。如果只是本地調(diào)試可以在開(kāi)發(fā)者工具「詳情」里勾選「不校驗(yàn)合法域名、web-view業(yè)務(wù)域名、TLS 版本以及 HTTPS 證書(shū)」。但上線(xiàn)前必須配好域名否則用戶(hù)端會(huì)直接報(bào)錯(cuò)。4.2 現(xiàn)象列表渲染出來(lái)但余票狀態(tài)全是「無(wú)票」原因接口返回的余票字段可能是字符串0或有而代碼里用 0比較字符串和數(shù)字比較會(huì)觸發(fā)隱式轉(zhuǎn)換但有 0是false。解決先打印res.data.list看實(shí)際字段類(lèi)型。如果是字符串用item.seatCount ! 0或parseInt(item.seatCount) 0。我一般會(huì)在setData之前做一次數(shù)據(jù)清洗把余票統(tǒng)一轉(zhuǎn)成數(shù)字。4.3 現(xiàn)象跳轉(zhuǎn)結(jié)果頁(yè)后參數(shù)丟失或亂碼原因URL 拼接時(shí)沒(méi)有對(duì)中文或特殊字符做編碼wx.navigateTo的url長(zhǎng)度也有限制。解決用encodeURIComponent包一層接收時(shí)用decodeURIComponent還原。如果參數(shù)很多可以只傳一個(gè) ID在結(jié)果頁(yè)重新請(qǐng)求詳情。另外注意url最大長(zhǎng)度是 1024 字節(jié)超長(zhǎng)會(huì)跳轉(zhuǎn)失敗。4.4 現(xiàn)象查詢(xún)接口返回 403 或頻繁超時(shí)原因部分公開(kāi)接口有頻率限制或需要特定請(qǐng)求頭比如Referer或User-Agent。解決小程序wx.request不能自定義User-Agent但可以加header字段。如果接口對(duì)來(lái)源校驗(yàn)嚴(yán)格建議換一個(gè)穩(wěn)定的數(shù)據(jù)源或者自己搭一層后端轉(zhuǎn)發(fā)。不要在小程序里硬編碼密鑰容易被反編譯。4.5 現(xiàn)象日期選擇器在 iOS 上顯示英文原因picker組件的語(yǔ)言跟隨系統(tǒng)iOS 某些版本會(huì)顯示英文月份。解決這是系統(tǒng)級(jí)行為不影響功能。如果必須統(tǒng)一中文可以用自定義 picker 或第三方組件庫(kù)。我一般接受這個(gè)差異因?yàn)橛脩?hù)對(duì)日期格式的敏感度不高。5. 二次開(kāi)發(fā)與改造從查詢(xún)工具到可復(fù)用的數(shù)據(jù)面板這個(gè)項(xiàng)目最值錢(qián)的地方不是查詢(xún)本身而是它把「輸入 → 請(qǐng)求 → 渲染」這條鏈路跑通了。如果你想把它改成別的查詢(xún)工具比如航班、汽車(chē)票、快遞只需要換三樣?xùn)|西車(chē)站字典、接口地址、列表字段映射。我一般會(huì)先把utils/config.js里的BASE_URL抽成環(huán)境變量用wx.getAccountInfoSync判斷開(kāi)發(fā)版還是正式版分別指向測(cè)試和線(xiàn)上接口。// utils/config.js 改造版 const env wx.getAccountInfoSync().miniProgram.envVersion; const BASE_URL env develop ? https://test-api.example.com : https://api.example.com; module.exports { QUERY_TRAINS: ${BASE_URL}/train/query };這樣切環(huán)境不用改代碼提交審核前也不會(huì)誤連測(cè)試數(shù)據(jù)。另一個(gè)改造點(diǎn)是加緩存。查詢(xún)結(jié)果可以按fromtodate存到wx.setStorageSync下次相同條件先讀緩存減少請(qǐng)求次數(shù)。注意緩存要設(shè)過(guò)期時(shí)間火車(chē)票余票變化快建議 5 分鐘失效。const cacheKey train_${from}_${to}_${date}; const cached wx.getStorageSync(cacheKey); if (cached Date.now() - cached.time 5 * 60 * 1000) { this.setData({ trains: cached.list, loading: false }); return; } // 請(qǐng)求成功后寫(xiě)入緩存 wx.setStorageSync(cacheKey, { list: res.data.list, time: Date.now() });如果你想讓列表支持下拉刷新在result.json里加enablePullDownRefresh: true然后在onPullDownRefresh里重新調(diào)用queryTrains完成后wx.stopPullDownRefresh()。這個(gè)改動(dòng)很小但體驗(yàn)提升明顯。最后說(shuō)一個(gè)我踩過(guò)的坑不要直接把接口返回的整個(gè)對(duì)象塞進(jìn)setData數(shù)據(jù)量大的時(shí)候會(huì)觸發(fā)性能警告。只取渲染需要的字段比如trainNo、fromTime、toTime、seatCount其他字段留在內(nèi)存里備用。從那以后我每次做列表渲染都強(qiáng)制走一遍字段裁剪希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取