基于微信小程序的猜数字小游戏设计与实现

目录
一、技术基础 1
1.1 微信小程序开发基础 1
1.1.1 小程序技术背景 1
1.1.2 小程序框架基础 2
1.2 小程序样式、布局与事件响应 2
1.2.1 样式与布局基础 2
1.2.2 浮动与定位 3
1.2.3 Flex 布局基础 3
1.2.4 事件响应基础 4
1.3 小程序组件 5
1.3.1 组件定义与属性视图容器组件 5
1.3.2 view 组件 5
1.3.3 scroll-view 组件 6
1.3.4 滑块视图组件 6
1.3.5 基础组件 6
1.3.6 text 组件 6
1.3.7 progress 组件 6
1.3.8 表单组件 6
1.3.9 导航组件 8
1.4 小程序功能 API 8
1.4.1 数据缓存功能 8
1.4.2 音频播放功能 8
1.4.3 网络请求功能 8
二、总体设计与详细设计 9
2.1 总体设计 9
2.2 详细设计 10
2.2.1 主页 10
2.2.2 首页背景音乐 14
2.3 数据判断 15
2.3.1 主页面内容 15
2.3.2 首页背景音乐 15
三、功能测试 16
1.4 小程序功能 API
1.4.1 数据缓存功能
微信小程序可以通过wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、
wx.clearStorage（wx.clearStorageSync）对本地缓存进行设置、获取和清理。本地缓存最大为10MB
1.4.2 音频播放功能
调用wx.createInnerAudioContext()接口可以返回一个InnerAudioContext对象，然后就可以使用这个对象定它的属性
1.4.3 网络请求功能

调用wx.request()接口，可以请求网络接口，不过微信小程序有要求，只能发起https请求


每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS


（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信


（wx.connectSocket）。


从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意不允许与本机 IP 通信

二、总体设计与详细设计
2.1 总体设计

一共三个页面


主页：负责进入 tabbar 页面, tabbar 页面有两个页面,首页和记录页


首页：可点击按钮生成随机数,然后输入数字,点击确定按钮进行判断并提示偏大或偏小能显示猜的次数,点击重置按钮可重置随机数并清空输入和猜的次数


记录页：显示每次猜对的随机数,次数,时间,标有序号

页面统一采用暖色调, 主体部分使用绝对定位 , 内部使用 flex 布局使用本地存储数据 ( wx.getStorageSync , wx.setStorageSync )

{
    
    
  "pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/logs/logs"
  ],
  "window": {
    
    
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#efca9e",
    "navigationBarTitleText": "猜数游戏",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    
    
    "color": "#000000",
    "selectedColor": "#e97d4c",
    "borderStyle": "black",
    "backgroundColor": "#fdebc3",
    "list": [{
    
    
      "selectedIconPath": "/imgs/homeselected.png",
      "iconPath": "/imgs/home.png",
      "pagePath": "pages/home/home",
      "text": "首页"
    }, {
    
    
      "selectedIconPath": "/imgs/logsselected.png",
      "iconPath": "/imgs/logs.png",
      "pagePath": "pages/logs/logs",
      "text": "记录"
    }]
  },
  "usingComponents": {
    
    
    "iconfont": "/iconfont/iconfont"
  },
  "requiredBackgroundModes": ["audio"],
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述

基于微信小程序的猜数字小游戏设计与实现

猜你喜欢