微信小程序梯形面积wxml文件和js文件

以下是一个简单的微信小程序梯形面积计算的示例：

WXML文件：

<view class="container">
  <view class="title">梯形面积计算器</view>
  <view class="input">
    <view class="input-item">
      <text>上底：</text>
      <input type="number" placeholder="请输入上底" bindinput="onTopInput"/>
    </view>
    <view class="input-item">
      <text>下底：</text>
      <input type="number" placeholder="请输入下底" bindinput="onBottomInput"/>
    </view>
    <view class="input-item">
      <text>高：</text>
      <input type="number" placeholder="请输入高" bindinput="onHeightInput"/>
    </view>
  </view>
  <view class="output">
    <text>梯形面积为：</text>
    <text>{{area}}</text>
  </view>
</view>

JS文件：

Page({
  data: {
    top: 0,
    bottom: 0,
    height: 0,
    area: 0
  },
  onTopInput: function(event) {
    this.setData({
      top: event.detail.value
    })
    this.calculateArea()
  },
  onBottomInput: function(event) {
    this.setData({
      bottom: event.detail.value
    })
    this.calculateArea()
  },
  onHeightInput: function(event) {
    this.setData({
      height: event.detail.value
    })
    this.calculateArea()
  },
  calculateArea: function() {
    var top = parseFloat(this.data.top)
    var bottom = parseFloat(this.data.bottom)
    var height = parseFloat(this.data.height)

    var area = (top + bottom) * height / 2

    this.setData({
      area: area.toFixed(2)
    })
  }
})

在这个示例中，WXML文件定义了一个简单的页面布局，包括三个输入框和一个输出框。输入框通过bindinput绑定了三个事件处理函数，分别在输入上底、下底和高时触发。输出框通过双括号语法绑定了一个区域变量，用于显示计算出来的梯形面积。

JS文件定义了一个Page对象，其中data属性用于存储页面数据，包括上底、下底、高和面积。三个事件处理函数分别在输入上底、下底和高时调用，将输入的值保存到data中，并调用calculateArea函数计算梯形面积。calculateArea函数从data中获取上底、下底和高的值，并计算梯形面积，最后将面积保存到data中。通过setData方法更新data中的值，页面会自动刷新显示最新的梯形面积。