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

一、案例描述

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

二、设计思路

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