目录
一、开发环境
微信开发者助手 1.06.2503310
二、演示视频
小程序原创--基于微信开发者工具完成的 猜谜游戏小程序
三、项目简介
使用软件
微信开发者工具
使用语言
JavaScript、WXML、WXSS
服务器
无
数据库
本地存储（wx.setStorageSync）
注释量
中文注释量90%以上
项目页面
登陆页、注册页、游戏页
关键技术点
微信小程序API集成、wx.request 网络请求、wx.setStorageSync / wx.getStorageSync 本地存储......
四、设计详情（部分）
登录页
- 页面的结构
登录页面的结构设计清晰合理，主要分为三个核心部分。顶部是品牌标识区域，展示应用程序的Logo图片，帮助用户确认当前所在平台。中间部分是表单容器，包含手机号和密码两个输入框，采用垂直排列方式确保操作流畅性。手机号输入框限定数字键盘输入模式，密码输入框则启用密码遮盖功能以保护隐私安全。
表单下方设置记住密码选项，通过复选框和说明文字组合呈现，方便用户进行持久化登录设置。底部区域设计为操作按钮和导航链接，登录按钮采用醒目的视觉样式突出主要操作，注册引导文字通过链接样式提示用户进行账号创建。整个页面布局采用垂直流式布局，各元素间距适中，符合移动端操作习惯，确保用户能够快速完成登录流程。
- 使用到的技术
该登录页面基于微信小程序框架开发，充分利用小程序提供的组件系统和API能力。视图层使用WXML语言构建页面结构，通过数据绑定实现界面与逻辑的交互。样式设计采用WXSS语言，支持响应式布局和弹性盒子模型，确保在不同尺寸设备上都能获得良好的视觉体验。
业务逻辑部分使用JavaScript编写，通过Page函数注册页面实例，管理内部状态和数据响应。数据存储功能借助自定义工具模块实现，包括用户信息的持久化存储和登录状态的维护。交互反馈使用微信官方提供的弹窗组件，为用户提供清晰的操作结果提示。
页面导航采用小程序路由系统，支持页面间的平滑跳转和重定向。表单验证机制结合前端校验和模拟数据验证，既保证即时反馈又为后续接口对接预留扩展空间。密码安全管理通过本地加密存储实现，兼顾用户体验与数据安全。
- 页面详细介绍
该登录页面是应用程序的入口界面，承担用户身份验证的核心功能。页面设计遵循简洁高效原则，视觉重点突出登录操作流程。用户进入页面后首先看到品牌标识，建立对产品的初步认知。表单区域通过合理的占位符文字引导用户输入所需信息，输入时实时更新数据状态确保交互流畅。
记住密码功能提供个性化体验选择，用户可根据设备安全情况决定是否启用该选项。登录按钮设计充分考虑操作便利性，点击后触发完整的验证流程，包括输入格式检查和凭证核对。验证通过后自动跳转至主功能页面，同时存储必要的会话信息。
对于新用户页面提供明确的注册引导，通过文字链接快速接入注册流程。错误处理机制完善，针对各种异常情况给出具体提示，如格式错误或凭证不匹配等。整个登录过程兼顾安全性与便捷性，既确保账户安全又最大限度降低用户操作成本，为后续功能使用奠定良好基础。
javascript
const storage = require('../../utils/storage.js');
Page({
data: {
phone: '',
password: '',
rememberPassword: false
},
onLoad: function() {
// 检查是否有记住的密码
const rememberInfo = storage.getRememberPassword();
if (rememberInfo.phone && rememberInfo.password) {
this.setData({
phone: rememberInfo.phone,
password: rememberInfo.password,
rememberPassword: true
});
}
},
onPhoneInput: function(e) {
this.setData({
phone: e.detail.value
});
},
onPasswordInput: function(e) {
this.setData({
password: e.detail.value
});
},
onRememberChange: function() {
this.setData({
rememberPassword: !this.data.rememberPassword
});
},
onLogin: function() {
const { phone, password, rememberPassword } = this.data;
// 简单验证
if (!phone || !password) {
wx.showToast({
title: '请输入手机号和密码',
icon: 'none'
});
return;
}
if (phone.length !== 11) {
wx.showToast({
title: '手机号格式不正确',
icon: 'none'
});
return;
}
// 使用新的验证方法
if (storage.validateUser(phone, password)) {
// 存储用户信息和token
const userInfo = { phone: phone };
storage.setUserInfo(userInfo);
storage.setToken('mock_token_' + Date.now());
// 处理记住密码
storage.setRememberPassword(phone, password, rememberPassword);
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 1500,
success: () => {
setTimeout(() => {
wx.reLaunch({
url: '/pages/game/game'
});
}, 1500);
}
});
} else {
wx.showToast({
title: '手机号或密码错误',
icon: 'none'
});
}
},
goToRegister: function() {
wx.navigateTo({
url: '/pages/register/register'
});
}
})游戏页
- 页面的结构
游戏主页面采用分层布局设计，整体分为六个功能区域。顶部是用户信息栏，展示用户手机号和当前得分，右侧配备退出登录按钮便于用户安全退出。第二层是统计信息卡片，以三栏布局展示答题数量、答对数量和正确率三个核心数据指标，帮助用户了解自己的游戏表现。
中间部分为谜题卡片区域，这是页面的核心交互区。卡片顶部显示谜题类型和提示信息，主体区域展示谜题内容，下方设置答案输入框和提交按钮。答题结果区域采用动态显示方式，根据答题正确与否展示不同的反馈信息和得分变化。
底部操作区提供换题和显示答案两个功能按钮，满足用户不同的答题需求。最下方是游戏提示卡片，详细说明得分规则和操作指引，帮助新用户快速掌握游戏玩法。整个页面结构层次分明，功能分区明确，确保用户体验的流畅性。
- 使用到的技术
该游戏页面基于微信小程序技术栈开发，充分利用小程序框架提供的组件系统和API接口。数据管理采用本地缓存机制，通过同步存储方式保存用户的游戏进度和统计信息，确保数据持久化且支持离线使用。谜题数据获取采用网络请求方式，同时内置示例数据作为降级方案，保证在网络异常时仍能正常游戏。
状态管理通过页面数据驱动视图更新，实时反映答题状态和统计变化。倒计时功能使用定时器实现，确保答对后的自动换题体验流畅。交互反馈集成小程序原生弹窗和加载提示，为用户提供清晰的操作指引。
页面生命周期管理严谨，在页面卸载时自动清理定时器资源，防止内存泄漏。登录状态验证机制确保未授权用户无法直接访问游戏页面，保障功能安全性。性能优化方面采用按需渲染策略，动态控制界面元素的显示与隐藏。
- 页面详细介绍
游戏主页面是一个功能完整的谜题答题平台，集成了用户管理、谜题展示、答题交互和数据统计四大核心模块。用户进入页面后首先看到个人身份信息和历史成绩概览，建立成就感和归属感。统计卡片以直观的数字展示用户的答题历程，正确率百分比帮助用户评估自己的知识水平。
谜题区域是用户体验的重点，每道谜题包含类型标识、内容描述和答题提示，引导用户思考解题思路。答题过程设计人性化，支持手动输入答案和查看答案两种模式，满足不同用户的需求。答题结果反馈及时且富有情感化设计，正确时显示庆祝表情和得分奖励，错误时展示正确答案供用户学习。
智能化的答题后续处理提升了用户体验，答对后自动倒计时换题减少了用户操作步骤，同时保留手动换题权限确保操作自主性。游戏规则提示清晰明了，帮助用户理解得分机制和功能限制。整个页面不仅提供了娱乐功能，更通过数据统计和反馈机制实现了教育意义，让用户在游戏中获得知识积累和能力提升。
html
<view class="game-container">
<!-- 用户信息栏 -->
<view class="user-info">
<view class="user-welcome">
<text class="welcome-text">欢迎，{{userInfo.phone}}</text>
<text class="user-score">得分：{{score}}</text>
</view>
<button class="logout-btn" bindtap="onLogout">退出登录</button>
</view>
<!-- 统计信息卡片 -->
<view class="stats-card">
<view class="stat-item">
<text class="stat-number">{{totalAnswered}}</text>
<text class="stat-label">答题数量</text>
</view>
<view class="stat-item">
<text class="stat-number">{{correctAnswered}}</text>
<text class="stat-label">答对数量</text>
</view>
<view class="stat-item">
<text class="stat-number">{{accuracyRate}}%</text>
<text class="stat-label">正确率</text>
</view>
</view>
<!-- 谜题卡片 -->
<view class="game-card">
<view class="puzzle-header">
<text class="puzzle-type">{{puzzleData.lx}}</text>
<text class="puzzle-hint">{{puzzleData.ts}}</text>
</view>
<view class="puzzle-content">
<text class="puzzle-text">{{puzzleData.mt}}</text>
</view>
<view class="answer-section">
<input class="answer-input" placeholder="请输入您的答案" value="{{userAnswer}}" bindinput="onAnswerInput" disabled="{{hasAnswered}}" />
<button class="submit-btn {{hasAnswered ? 'disabled' : ''}}" bindtap="onSubmitAnswer" disabled="{{hasAnswered}}">
{{hasAnswered ? '已答题' : '提交答案'}}
</button>
</view>
<view class="result-section {{isCorrect ? 'correct' : 'wrong'}}" wx:if="{{showResult}}">
<text class="result-text {{isCorrect ? 'correct' : 'wrong'}}">
{{isCorrect ? '🎉 恭喜您答对了！' : '😔 很遗憾，答错了！'}}
</text>
<text class="countdown-text" wx:if="{{isCorrect && isAutoRefreshing}}">{{countdownText}}</text>
<text class="correct-answer" wx:if="{{!isCorrect}}">正确答案：{{puzzleData.md}}</text>
<text class="score-change" wx:if="{{isCorrect}}">+10分</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<button class="change-puzzle-btn" bindtap="changePuzzle">换一题</button>
<button class="show-answer-btn {{hasAnswered ? 'disabled' : ''}}" bindtap="onShowAnswer" disabled="{{hasAnswered}}">
{{hasAnswered ? '已查看答案' : '显示答案'}}
</button>
</view>
<!-- 提示信息 -->
<view class="tips-card">
<text class="tips-title">💡 游戏提示</text>
<text class="tips-content">• 答对一题得10分</text>
<text class="tips-content">• 点击"显示答案"不得分</text>
<text class="tips-content">• 答对后3秒自动换题</text>
<text class="tips-content">• 可手动点击"换一题"</text>
</view>
</view>五、项目源码
👇👇👇👇👇快捷方式👇👇👇👇👇