文章目录

一、案例描述
二、设计思路
- 1.页面设计思路
- 2.逻辑层设计思路
三、关键技术
- 1.用户选择内容实时显示在前端
- 2.setData给循环数组赋值
- 3.点击按钮删除用户当前选择
- 4.播放音乐
四、程序设计
- 1.页面设计
- 2.逻辑层设计
五、页面美化
- 1.页面背景美化
- 2.圆角、阴影、不透明度
- - 1.圆角
  - 2.阴影
  - 3.不透明度
最终效果

一、案例描述

设计一个微信小程序，初始页面显示一张图片和十个随机排列的汉字，用户根据图片内容猜测与其意思最符合的成语，并依次点选汉字，组成成语。最后点击提交按钮进行判断对错，若回答错误显示重做按钮，若回答正确则显示下一题按钮。

二、设计思路

1.页面设计思路

由于页面需要显示图片，我们可以通过image组件来显示图片，并给它绑定一个数组，通过循环渲染将数据库数据显示。我们还需要十个按钮来显示备选汉字，同样，我们通过循环渲染将数据显示在前端。我们也可以设置四个按钮，实时显示用户选择内容，并且点击对应按钮可以清空用户选择。用button按钮实现提交、重做、下一题、结束答题等效果，并且通过hidden功能将其在不同情况下隐藏或显示。

2.逻辑层设计思路

首先，我们需要定义一个数组用来存放题目数据，然后用一个变量index用来记录当前题目数。

接下来我们定义一些函数。btnOpClick函数用来实现点击汉字事件，将用户点击实时显示在页面。backspace函数用来实现点击显示内容清空用户选择（每次只清空一个字）。submit函数是提交函数，当用户点击提交之后，判断用户答案正误并播放音乐，同时在页面上显示用户答案。next和reset分别是下一题和重做事件函数，用来清空用户选择（全部清空）并进入下一题或停留当前题目。

三、关键技术

1.用户选择内容实时显示在前端

为使用户有较好的体验感，我们可以设计将用户选择内容实时显示在前端。这里，我们选择使用4个button按钮组件来实现这个效果。首先，我们定义一个数组，用来存储用户点选的汉字，并给数组赋值，

date:{xianshi : ["_","_","_","_"],
}

接着再给用于显示备选汉字的button按钮绑定一个点击事件，在点击事件中，将用户点击的按钮value值依次赋给用于存放用户选择内容的数组。

  btnOpClick: function(e){this.setData({[xianshi]: e.currentTarget.id,n:this.data.n + 1,})this.useranswer = this.useranswer + e.currentTarget.id;},

在显示层，我们将数组内容显示出来，

<button>{{xianshi[0]}}</button>
<button>{{xianshi[1]}}</button>
<button>{{xianshi[2]}}</button>
<button>{{xianshi[3]}}</button>

2.setData给循环数组赋值

当我们在上一步中给存放用户选择内容的数组赋值时会发现系统会报错，如下图

这是因为在微信小程序开发中，setData()组件只能给静态数组赋值，但在我们的程序中，对数组的中的某个元素的设置是动态的。所以，我参考了https://blog.csdn.net/hicoldcat/article/details/53967334中的内容，将代码更改为

var show = "xianshi["+this.data.n+"]"this.setData({[show]: e.currentTarget.id,})

这样就完美解决了setData()没法给动态数组赋值的问题。

3.点击按钮删除用户当前选择

当用户在答题过程中，不小心点错了某个按钮时，就需要有删除功能。由于我们一开始给显示数组赋值为["_","_","_","_"]，所以这时我们可以给显示数组当前数据重新赋值为“_”。

this.setData({n:this.data.n-1,
})
var back = "xianshi["+this.data.n+"]"
this.setData({[back]: "_",n:this.data.n,
})

我们可以在此之前添加一个if判断语句，当n为0时，即用户未输入时点击此按钮不做任何变化。

if(this.data.n ==0 ){    }else{this.setData({n:this.data.n-1,})var back = "xianshi["+this.data.n+"]"this.setData({[back]: "_",n:this.data.n,})
}

4.播放音乐

根据选手答案正误播放相应音乐，我们实现在小程序创建一个与pages同级的文件夹，命名为audios，然后设计一个判断正误的if语句，用wx.createInnerAudioContext()实现音乐播放，代码如下

let audio = wx.createInnerAudioContext()
audio.src = '/audios/true.mp3'
audio.play()

四、程序设计

1.页面设计

首先，定义image组件将后台图片循环渲染至前端

<image src="{{postList[index].pic}}" mode="aspectFill"></image>

然后定义五个按钮用于显示用户实时选择内容，同时绑定回退事件

<button bindtap="backspace">{{xianshi[0]}}</button>
<button bindtap="backspace">{{xianshi[1]}}</button>
<button bindtap="backspace">{{xianshi[2]}}</button>
<button bindtap="backspace">{{xianshi[3]}}</button>
<button bindtap="backspace">{{xianshi[4]}}</button>

接下来是存放待选汉字的10个按钮，按5×2布局

<view><view style='display:flex;text-align:center;'><button id="{{postList[index].content[0]}}" bindtap="btnOpClick">{{postList[index].content[0]}}</button><button id="{{postList[index].content[1]}}" bindtap="btnOpClick">{{postList[index].content[1]}}</button><button id="{{postList[index].content[2]}}" bindtap="btnOpClick">{{postList[index].content[2]}}</button><button id="{{postList[index].content[3]}}" bindtap="btnOpClick">{{postList[index].content[3]}}</button><button id="{{postList[index].content[4]}}" bindtap="btnOpClick">{{postList[index].content[4]}}</button></view><view style='display:flex;text-align:center;'><button id="{{postList[index].content[5]}}" bindtap="btnOpClick">{{postList[index].content[5]}}</button><button id="{{postList[index].content[6]}}" bindtap="btnOpClick">{{postList[index].content[6]}}</button><button id="{{postList[index].content[7]}}" bindtap="btnOpClick">{{postList[index].content[7]}}</button><button id="{{postList[index].content[8]}}" bindtap="btnOpClick">{{postList[index].content[8]}}</button><button id="{{postList[index].content[9]}}" bindtap="btnOpClick">{{postList[index].content[9]}}</button></view>
</view>

最后是用于提交的按钮。

<button bindtap="submit">确定</button>

2.逻辑层设计

首先定义存放题目的数组，接下来定义一个点击事件将用户点击的汉字显示在上面显示的按钮

btnOpClick: function(e){var show = "xianshi["+this.data.n+"]"this.setData({[show]: e.currentTarget.id,n:this.data.n + 1,})this.useranswer = this.useranswer + e.currentTarget.id;
}

下面定义一个回退事件，当用户点击错误且输入内容不为零时，可以将用户点击的汉字依次删除

backspace:function(e){if(this.data.n ==0 ){    }else{this.setData({n:this.data.n-1,})var back = "xianshi["+this.data.n+"]"this.setData({[back]: "_",n:this.data.n,})this.useranswer = this.useranswer.substring(0, this.data.n)}
},

接下来是提交事件函数，用户点击提交按钮之后，后台判断用户选择正误，如果正确则播放正确的音乐并跳转下一题，如果错误则播放失败音乐并跳转失败页面。
在跳转下一题时需要注意将显示按钮中的内容清空，否则可能造成程序不能正常运行。

next:function(e){this.setData({xianshi: ["_","_","_","_","_"],})this.useranswer="";this.setData({result:this.useranswer,index:this.data.index+1,n:0,})
}

五、页面美化

1.页面背景美化

我们可以给页面设置一个渐变背景,方向向右，颜色为#2af598→#009efd

page{background-image: linear-gradient(to right,#2af598,#009efd);
}

2.圆角、阴影、不透明度

1.圆角

通过border-radius给组件添加圆角

border-radius: 10px;

2.阴影

通过box-shadow添加形状阴影，我们设置y方向偏移量为1px、模糊程度为5px、颜色为黑色的阴影

box-shadow: 0 1px 5px 0 black;

3.不透明度

我们设置颜色为白色、不透明度为70%

background-color: rgb(255, 255, 255, 0.7);

最终效果

本案例所使用图片素材均来源于网络

微信小程序开发实例：猜成语游戏相关推荐

微信小程序开发之猜词游戏
基于微信小程序开发的猜词游戏.之所以想开发这个小游戏,是因为网上类似的游戏,充斥了太多广告和暗坑,所以想想比如自己开发一个. 以下是几个截图,比较简单,但是足够自己玩了:) 源码地址供参考: 微信小程 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序开发实例：猜数字小游戏
这学期选修了<微信小程序设计>这门通识课,最近准备把本学期的部分小作业整理一下. 一.案例描述设计一个微信小程序,由后台生成一个0~100的随机整数,用户猜这个整数,并在输入框中输入用户 ...
python微信小程序看图猜成语源码flask
wx供重浩:创享日记对话框发送:python成语获取完整源码源文件+说明文档+配置教程等启动Idiom/flask下的venv虚拟环境,运行python manage.py runserver命 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
微信小程序开发的游戏《拼图游戏》
微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({/*** 页面的初始数据*/data: {},initGame: functi ...
微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
微信小程序开发入门实例
开发准备工作,获取微信小程序的 AppID 登录微信公众平台,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务 ...

微信小程序开发实例：猜成语游戏