微信小程序--成语猜猜看

原文链接：https://mp.weixin.qq.com/s/p6OMCbTHOYGJsjGOINpYvQ

1

概述

微信最近有很多火爆的小程序。成语猜猜看算得上前十火爆的了。今天我们就分享这样的小教程。希望对大家有所帮助。

快去拿个小板凳，坐等跟多更新

注意：如若需要请联系微信geekxz

2

wxml

<!--pages/content/index.wxml-->
<view style='position: relative;'>
  <view class='container'>
    <view class='ads'>
      <text>【您已获得一个红包，打开支付宝即可领取】</text>
    </view>
    <view class='c-display'>
      <view class='display-others'></view>
      <view class='display-content'>
        <image class="content-img" src='{{curImgUrl}}'></image>
      </view>
      <view class='display-opts'>
        <button class='btn-alert' bindtap='onPrompt' size='mini'>
          提示
        </button>
        <button open-type="share" class='btn-share' size='mini'>
          分享
        </button>
      </view>
    </view>
    <view class='c-opts'>
      <view class='opts-others'></view>
      <view class='opts-content' bindtap='onSelected'>
        <block wx:key='this' wx:for="{{selectedContent}}" wx:for-item="item">
          <view class="content-input" id='result_{{item.index}}' data-id='{{item.index}}' data-content='{{item.content}}'>
            <text data-id='{{item.index}}' data-content='{{item.content}}'>{{item.content}}</text>
          </view>
        </block>
      </view>
      <view class='opts-score'></view>
    </view>
    <view class='c-select' bindtap='onSelect'>
      <block wx:for="{{selectContent}}" wx:for-index="i" wx:for-item="content" wx:key="this">
        <view class='select-index' data-content='{{content}}' id='select_{{i}}'>
          <text data-content='{{content}}'>{{content}}</text>
        </view>
      </block>
    </view>
  </view>
  <!--弹窗  -->
  <dialog is-show="{{isComplete}}" is-pass="{{isTrue}}" bindonNext="generateNewData"/>
</view>

3

js

// pages/content/index.js
var allSelected = require('../../utils/data.js')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    selectContent: [],
    selectedContent: [
      { "index": 0, "content": "" },
      { "index": 1, "content": "" },
      { "index": 2, "content": "" },
      { "index": 3, "content": "" },
    ],
    pics: [
      "1.jpeg", "2.jpeg", "3.png", "4.png", "5.jpg", "6.jpg", "7.jpeg"
    ],
    correctTexts: ["马到成功", "三心二意", "千里之外", "一箭双雕", "不明觉厉", "鸡同鸭讲", "胆小如鼠"],
    basePath: "/resources/",
    sorted: [],
    curImgUrl: "",
    curCorrectText: "",
    allSelected: allSelected.mtData().list,
    isTrue: false,
    isComplete: false,
  },
  /**
   * 提示
   */
  onPrompt: function () {
    for (let i = 0; i < this.data.selectedContent.length; i++) {
      if (this.data.selectedContent[i].content == "") {
        this.data.selectedContent[i].content = this.data.curCorrectText[i];
        break;
      }
    }
    this.updateState();
  },
  /**
   * 随机生成文字
   */
  generateText: function () {
    //清除上一次数据
    if (this.data.selectContent.length > 0) {
      this.data.selectContent.splice(0, this.data.selectContent.length);
    }
    for (let i = 0; i < this.data.curCorrectText.length; i++) {
      this.data.selectContent.push(this.data.curCorrectText[i]);
    }
    let start = Math.floor(Math.random() * 500);
    for (let i = 0; i < 32 - this.data.curCorrectText.length; i++) {
      let index = (start + i) % this.data.allSelected.length;
      this.data.selectContent.push(this.data.allSelected[index]);
    }
    this.data.selectContent.sort(this.randomSort);
  },
  /**
   * 获取新数据
   */
  generateNewData() {
    if (this.data.sorted.length <= 0) {
      console.log("通关...");
      return;
    }
    for (let i = 0; i < this.data.selectedContent.length; i++) {
      this.data.selectedContent[i].content = "";
    }
    let index = this.data.sorted.shift();
    this.data.curImgUrl = this.data.basePath + this.data.pics[index];
    this.data.curCorrectText = this.data.correctTexts[index];
    this.generateText();
    //更新数据
    this.setData({
      curImgUrl: this.data.curImgUrl,
      curCorrectText: this.data.curCorrectText,
      selectContent: this.data.selectContent,
      selectedContent: this.data.selectedContent
    });
  },
  /**
   * check是否结果
   */
  checkResult: function () {
    for (let i = 0; i < this.data.selectedContent.length; i++) {
      if (this.data.selectedContent[i].content != this.data.curCorrectText[i]) {
        return false;
      }
    }
    return true;
  },
  /**
   * 是否作答完毕
   */
  isCompleted: function () {
    for (let i = 0; i < this.data.selectedContent.length; i++) {
      if (this.data.selectedContent[i].content == "") {
        return false;
      }
    }
    return true;
  },
  /**
   * 作答
   */
  onSelect: function (event) {
    let content = event.target.dataset.content;
    if (!content || this.isCompleted()) {
      return;
    }
    for (let i = 0; i < this.data.selectedContent.length; i++) {
      if (this.data.selectedContent[i].content == "") {
        this.data.selectedContent[i].content = content;
        break;
      }
    }
    this.updateState();
  },
  /**
   * 更新作答状态
   */
  updateState() {
    this.setData({ selectedContent: this.data.selectedContent });
    this.data.isComplete = this.isCompleted();
    if (this.data.isComplete) {
      this.data.isTrue = this.checkResult();
      this.setData({ isTrue: this.data.isTrue });
    }
    this.setData({ isComplete: this.data.isComplete });
  },
  /**
   * 修改答案
   */
  onSelected: function (event) {
    let content = event.target.dataset.content;
    let index = event.target.dataset.id;
    if (content != "") {
      this.data.selectedContent[index].content = "";
      this.setData({ selectedContent: this.data.selectedContent });
    }
  },
  /**
   * 随机排序
   */
  randomSort: function (a, b) {
    return Math.random() > 0.5 ? -1 : 1;
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //生成随机排序辅助数组
    for (let i = 0; i < this.data.pics.length; i++) {
      this.data.sorted.push(i);
    }
    this.data.sorted.sort(this.randomSort);
    this.generateNewData();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

4   css

/* pages/content/index.wxss */
page {
  background-color: #f7be86;
}
.container {
  background-color: #f7be86;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
}
.ads {
  margin-top: 20rpx;
  font-size: 22rpx;
  color: red;
  font-weight: bold;
}
.c-display {
  background-color: #9d6137;
  width: 95%;
  margin: 30rpx 0;
  height: 400rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 16rpx;
}
/*视图操作栏  */
.display-opts {
  width: 30%;
  height: 100%;
  font-size: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.btn-alert {
  padding: 10rpx;
  border-width: 4rpx;
  border-radius: 10rpx;
  color: white;
  background-color: #fcb545;
}
.btn-share {
  padding: 10rpx;
  border-width: 4rpx;
  border-radius: 10rpx;
  color: #259f3d;
  background-color: #9bff14;
}
/*视图图片显示区  */
.display-content {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.content-img {
  width: 100%;
  max-height: 350rpx;
}
.display-others {
  width: 10%;
}
.c-opts {
  width: 100%;
  /* margin-top: 20rpx; */
  display: flex;
  flex-direction: row;
}
.opts-others {
  width: 20%;
}
.opts-content {
  width: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.opts-score {
  width: 20%;
}
.content-input {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: white;
  border-radius: 10rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: #852200;
}
.c-select {
  margin-top: 70rpx;
  width: 100%;
  height: 400rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.select-index {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #852200;
  margin: 10rpx 10rpx;
  width: 66rpx;
  height: 66rpx;
  background-color: #fce6be;
  border-radius: 8rpx;
}

以上代码为效果为 图一

注意路径问题

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。