微信小程序点击点击显示再次点击隐藏

在微信小程序中，如果你想实现点击一次显示内容，再点击一次隐藏的效果，可以使用`wx:if`或者`hidden`属性配合`tap`事件。这里是一个简单的示例：

<view class="container" wx:if="{{isShow}}">
  <!-- 显示的内容 -->
  <text>点击我隐藏</text>
  <!-- 添加一个点击事件处理函数 -->
  <button bindtap="toggleHidden">点击</button>
</view>

<script>
Page({
  data: {
    isShow: true, // 初始状态显示
  },
  toggleHidden: function() {
    this.setData({
      isShow: !this.data.isShow // 点击后切换显示/隐藏
    });
  }
})
</script>

在这个例子中，当`isShow`为`true`时，内容会显示，点击按钮会触发`toggleHidden`方法，该方法通过改变`isShow`的数据值来控制元素的显示与否。

相关问题

微信小程序中点击图片变化并展示代码,再点击图片变化并收回代码功能

实现这个功能可以通过以下步骤：

1. 在 wxml 文件中添加一个图片和一个代码块，使用 wx:if 属性控制它们的显示和隐藏。

<view class="container">
  <image src="/path/to/image" bindtap="toggleCode"></image>
  <block wx:if="{{showCode}}">
    <pre class="code">{{code}}</pre>
  </block>
</view>

2. 在 js 文件中，定义一个 data 属性 showCode 来控制代码块的显示和隐藏，并且在 toggleCode 方法中切换 showCode 的值。

Page({
  data: {
    showCode: false,
    code: 'console.log("Hello, world!");'
  },
  toggleCode: function() {
    this.setData({
      showCode: !this.data.showCode
    })
  }
})

3. 在 wxss 文件中，定义一个样式类 .code 来美化代码块的样式，并设置图片的样式。

.container {
  display: flex;
  align-items: center;
}
.image {
  width: 100px;
  height: 100px;
}
.code {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 10px;
  margin: 0;
}

这样，点击图片时，代码块就会出现；再次点击图片时，代码块就会消失。

单词对对碰微信小程序

### 单词对对碰微信小程序概述

单词对对碰是一款基于匹配机制的小程序游戏，在游戏中玩家通过点击两个相同的单词来消除它们并得分。这类游戏通常具有简单易懂的游戏规则以及直观的操作界面[^1]。

### 开发教程概览

对于希望开发此类应用的人来说，可以从官方文档入手，熟悉微信小程序的基础框架和API调用方法。接着可以深入研究如何实现特定功能模块，比如卡片翻转效果、计分系统等。此外，还需要掌握前端技术栈如HTML5, CSS3 和 JavaScript 的运用技巧以构建交互式的用户体验[^2]。

### 源码示例

下面给出一段简化版的JavaScript代码片段用于展示基本逻辑：

// 定义一组待配对的英文单词数组
const wordPairs = [
    { id: 'apple', text: '苹果' },
    { id: 'banana', text: '香蕉' }
];

let selectedWords = []; // 存储当前选中的两张牌
Page({
  data: {
      words: [], // 页面上显示的所有词语列表
      matchedCount: 0 // 已成功匹配的数量
  },

  onLoad() {
      this.initGame();
  },

  initGame() {
      const tempArray = [...wordPairs, ...wordPairs];
      shuffle(tempArray);
      this.setData({words:tempArray});
  },

  selectWord(e) {
      let index = e.currentTarget.dataset.index;
      let currentWord = this.data.words[index];
      
      if (selectedWords.length === 2 || currentWord.matchStatus !== undefined){
          return ;
      }

      this.showWord(index);

      selectedWords.push(currentWord.id);

      if(selectedWords.length===2){
        setTimeout(() => {
            this.checkMatch();
        },800);  
      }    
  },

  showWord(index){
     var that=this;
     wx.createSelectorQuery().select(`.item-${index}`).boundingClientRect(function(rect){
         rect.height && that.animate(`.item-${index}`,[
             {transform:'rotateY(90deg)',opacity:.1},
             {transform:'rotateY(0deg)',opacity:1}
           ],function(){
               console.log('动画完成');
           });
       }).exec();   
  },

  checkMatch(){
      let firstId=selectedWords.shift(),secondId=selectedWords.pop();

      if(firstId===secondId){
          updateMatchedItems([firstId]);
      }else{
          hideSelectedWords();
      }
  },

  updateMatchedItems(ids){
      ids.forEach((id)=>{
          setItemAsMatched(id);
      });

      increaseScoreByOnePair();
  },

  setItemAsMatched(wordId){
      let updatedList = this.data.words.map(item=>{
          item.id==wordId?Object.assign({},item,{matchStatus:true}):item;
          return item;
      })
      this.setData({words:updatedList})
  },

  increaseScoreByOnePair(){
      let newTotalMatches = ++this.data.matchedCount;

      if(newTotalMatches>=wordPairs.length){
          alertWinningMessage();
      }
  },

  hideSelectedWords(){
      resetSelectionAnimationAndState();
  }
});

/**
 * Fisher-Yates Shuffle算法打乱顺序
 */
function shuffle(array) {
  for(let i=array.length-1;i>0;i--){
      let j=Math.floor(Math.random()*(i+1));
      [array[i], array[j]] = [array[j], array[i]];
  }
}

这段代码实现了简单的单词对对碰核心玩法，包括初始化游戏状态、处理用户输入、判断是否匹配等功能。

### 游戏玩法简介

当进入游戏后，屏幕上会随机分布着若干张背面朝上的卡牌，每一张都代表着不同的单词。玩家每次可以选择翻开任意两张卡牌查看其背后的图案（即对应的汉字解释），如果两者相同则自动移除这两张卡牌；反之，则再次将其隐藏起来等待下一次尝试。随着不断正确的组合，最终目标是在限定次数内尽可能多地找到所有的成对物品从而赢得胜利。