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

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

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;
}

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