微信小程序 Form 组件实战：三角形面积计算器-优快云博客

一、项目介绍

使用微信小程序form表单组件，实现三角形面积计算器。
功能需求：

三个输入框，用来输入三角形三条边长；
【计算】按钮：利用海伦公式，计算三角形面积，同时校验三边是否满足三角形构成条件；
【重置】按钮：点击一键清空全部输入框内容，清空计算结果。
页面效果：所有内容包裹在一个外边框容器内，标题红色，计算按钮绿色，重置按钮文字红色。

核心知识点：小程序 form 组件 form-type，submit提交事件、reset重置事件。

二、项目文件结构

pages
└── index
    ├── index.wxml   页面结构
    ├── index.js     业务逻辑
    ├── index.wxss   页面样式
    └── index.json   页面配置

三、完整代码

1. index.wxml（页面结构）

<view class="container">
  <!-- 外层边框容器 -->
  <view class="box">
    <view class="title">三角形面积计算器</view>
    <!-- form表单，绑定submit提交事件 -->
    <form bindsubmit="calcArea">
      <input name="a" placeholder="请输入三角形第一条边长" value="{{a}}"></input>
      <input name="b" placeholder="请输入三角形第二条边长" value="{{b}}"></input>
      <input name="c" placeholder="请输入三角形第三条边长" value="{{c}}"></input>

      <!-- form-type="submit" 触发表单提交 -->
      <button form-type="submit" type="primary">计算</button>
      <!-- form-type="reset" 触发表单重置，自动清空输入框 -->
      <button form-type="reset" bindreset="onReset">重置</button>
    </form>
    <!-- 展示计算结果 -->
    <view wx:if="{{result}}">结果：{{result}}</view>
  </view>
</view>

2. index.js（逻辑代码）

Page({
  data: {
    a: '',
    b: '',
    c: '',
    result: ''
  },
  // 表单提交，计算三角形面积（海伦公式）
  calcArea(e) {
    // 获取表单提交的三个边长
    let {a,b,c} = e.detail.value;
    a = parseFloat(a);
    b = parseFloat(b);
    c = parseFloat(c);
    // 判断是否可以构成三角形：两边之和大于第三边，边长大于0
    if(a+b>c && a+c>b && b+c>a && a>0 && b>0 && c>0){
      let p = (a+b+c)/2;
      let s = Math.sqrt(p*(p-a)*(p-b)*(p-c));
      this.setData({result: `面积 = ${s.toFixed(2)}`})
    }else{
      this.setData({result: "输入的三边不能构成三角形"})
    }
  },
  // 重置按钮回调，清空结果
  onReset(){
    this.setData({
      result:''
    })
  }
})

3. index.wxss（样式，包含外边框）

.container{
  padding:30rpx;
}
/* 外层外框，实现截图的外围边框 */
.box{
  border: 1rpx solid #999;
  padding: 40rpx;
  border-radius: 8rpx;
}
.title{
  color:red;
  font-size:34rpx;
  text-align:center;
  margin-bottom:40rpx;
}
input{
  border-bottom:1rpx solid #777;
  margin:20rpx 0;
  padding:10rpx;
}
button[type="primary"]{
  background-color:#09bb07;
  margin-top:30rpx;
}
button:not([type="primary"]){
  color:red;
}

4. index.json（页面配置）

{
  "navigationBarTitleText":"form组件"
}

四、核心知识点讲解

form 组件<form> 用来包裹表单控件，通过bindsubmit监听表单提交事件。
按钮设置form-type="submit"：点击触发表单提交，把表单内name属性对应的值打包传给 js。
按钮设置form-type="reset"：原生自带能力，一键清空所有输入框的值，正好满足作业需求。
海伦公式计算面积
假设三角形三边 a,b,c，半周长 (p=(a+b+c)/2)
面积 (S=\sqrt{p(p-a)(p-b)(p-c)})
边界判断
需要判断两边之和大于第三边，边长必须大于 0，否则无法构成三角形，给出提示。