目录
一、技术基础 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"}
