企业官网建设流程全解析

# 微信小程序 form 组件实战｜三角形面积计算器（含重置按钮作业）

>

> 文章标签：`微信小程序` `form组件` `input` `button` `海伦公式`

> 简介：本篇通过三角形面积计算器案例，学习小程序 form 表单、input 输入框、button 按钮、wx.showToast 消息提示 API；完成课后作业新增重置按钮，完整可运行源码。

## 一、案例需求

设计小程序，演示`form`、`input`、`button`组件，以及消息提示框`wx.showToast`API。

根据输入三角形三边，使用**海伦公式**计算三角形面积。

海伦公式：

\(s=\frac{a+b+c}{2}\)

\(area=\sqrt{s(s-a)(s-b)(s-c)}\)

业务逻辑：

1. 页面加载第一个输入框自动获得焦点，真机弹出数字键盘；

2. 输入合法三边（任意两边之和大于第三边），点击计算，展示面积；

3. 三边不满足三角形规则，弹出 Toast 提示，清空输入框；

4. ✅作业扩展：增加**重置按钮**，一键清空输入框、隐藏计算结果。

运行效果图：

- 初始界面：3 个输入框 + 计算按钮 + 重置按钮；

- 合法输入：页面下方直接输出面积；

- 非法输入：弹出黑色提示框，清空表单。

>

> 新建项目配置：不使用云服务，不使用模板。

## 二、完整源码

### 1.index.wxml（页面结构）

```

<!--index.wxml-->

<navigation-bar title="form组件" back="{{false}}" color="black" background="#FFF"></navigation-bar>

<scroll-view class="scrollarea" scroll-y type="list">

<view class="box">

<view class="title">三角形面积计算器</view>

<!-- bindsubmit监听表单提交，bindreset监听表单重置 -->

<form bindsubmit="formSubmit" bindreset="formReset">

<!-- focus自动聚焦，type=digit真机弹出数字键盘，name是表单取值key -->

<input type="digit" placeholder="请输入三角形第一条边长" name="a" focus="true" value="{{sideA}}"/>

<input type="digit" placeholder="请输入三角形第二条边长" name="b" value="{{sideB}}" />

<input type="digit" placeholder="请输入三角形第三条边长" name="c" value="{{sideC}}" />

<button type="primary" form-type="submit">计算</button>

<!-- 作业新增重置按钮 form‑type="reset" -->

<button type="default" form-type="reset">重置</button>

</form>

<!-- wx:if条件渲染，visible控制面积显示隐藏 -->

<view wx:if="{{visible}}" class="result">三角形的面积为: {{area}}</view>

</view>

</scroll-view>

```

**重点知识点：**

1. form 组件：`bindsubmit`绑定表单提交事件；表单内部`button`设置`form‑type="submit"`才会触发表单提交；

2. input 必须设置`name`属性，`e.detail.value`才能拿到输入值，**没有 name 拿不到表单数据**；

3. `type="digit"`：真机弹出带小数点数字键盘，模拟器看不到；

4. `focus="true"`页面打开输入框自动聚焦；

5. 重置按钮写在 form 内，`form‑type="reset"`，触发`bindreset`事件；

6. `wx:if="{{visible}}"`条件渲染，控制结果是否显示。

### 2.index.wxss（页面样式）

```

/**index.wxss**/

page {

height: 100vh;

display: flex;

flex-direction: column;

}

.scrollarea {

flex: 1;

overflow-y: hidden;

}

input,

button {

font-size: 40rpx;

margin: 40rpx 0;

}

input {

border-bottom: 2rpx solid blue;

}

.result {

font-size: 40rpx;

color: blue;

}

```

### 3.app.wxss（全局样式）

```

/**app.wxss**/

.box {

/* 设置外边距 */

margin: 20rpx;

/* 设置内边距 */

padding: 20rpx;

/* 设置边框 */

border: 2rpx solid silver;

}

.title {

/* 设置字体大小 */

font-size: 40rpx;

/* 设置字体加粗 */

font-weight: bolder;

/* 设置居中对齐 */

text-align: center;

/* 设置下外边框 */

margin-bottom: 30rpx;

/* 设置字体颜色 */

color: red;

}

```

### 4.index.js（业务逻辑）

```

// index.js

Page({

data: {

// 是否展示面积结果

visible: false,

sideA:'',

sideB:'',

sideC:'',

area:0

},

// 表单提交事件

formSubmit(e) {

console.log(e); //打印事件对象，调试看表单数据

let visible = this.data.visible

// input拿到的值是字符串，转浮点数

let sideANum = parseFloat(e.detail.value.a)

let sideBNum = parseFloat(e.detail.value.b)

let sideCNum = parseFloat(e.detail.value.c)

let area = 0

console.log(sideANum, sideBNum, sideCNum);

// 判断三角形三边合法性：任意两边之和大于第三边

if ((sideANum + sideBNum <= sideCNum) || (sideANum + sideCNum <= sideBNum) || (sideBNum + sideCNum <= sideANum)) {

this.clear() //清空输入框

wx.showToast({

title: '问题：三角形的两条边之和小于等于第三条边',

icon: 'none', //不显示图标，支持长文本

duration: 2000

})

return

} else {

//海伦公式计算面积

const s = (sideANum + sideBNum + sideCNum) / 2

area = Math.sqrt(s * (s - sideANum) * (s - sideBNum) * (s - sideCNum))

}

if (area > 0) {

visible = true

} else {

visible = false

}

// setData更新视图

this.setData({

area,

visible

})

},

//清空输入框与结果

clear() {

this.setData({

sideA: '',

sideB: '',

sideC: '',

visible: false

})

},

//作业：重置按钮触发事件

formReset(){

console.log("点击重置");

this.clear();

}

})

```

## 三、核心知识点讲解

### 1.form 表单提交原理

点击`form‑type="submit"`按钮，form 组件收集内部所有带`name`属性组件的值，通过`bindsubmit`触发事件，数据放在`e.detail.value`对象。

>

> 重要提醒：**缺少 name 属性，无法获取表单值**。

### 2.wx.showToast 消息提示 API

表格

| 参数 | 说明 |

| --- | --- |

| title | 提示文字，必填 |

| icon | 图标，`none`不显示图标，支持两行文本 |

| duration | 提示显示毫秒数 |

### 3. 数据类型转换

`input`输入返回字符串，必须`parseFloat()`转为数字，否则做加减乘除会出现字符串拼接 bug。

### 4.setData 更新数据

小程序不能直接修改`this.data.xxx`，必须调用`this.setData({})`，驱动页面视图刷新。

### 5. 重置按钮实现（作业）

1.form 标签增加`bindreset="formReset"`；

2. 表单内增加按钮，设置`form‑type="reset"`；

3.js 写 formReset 处理函数，调用 clear () 清空输入框与隐藏结果。

## 四、测试用例

1. 合法三角形：输入`30,40,50`，输出面积`600`；

2. 非法三角形：输入`30,40,80`，弹出提示，表单清空；

3. 重置按钮：输入任意数字，点击重置，输入框全部清空，面积消失。

>

> 注意：`type="digit"`数字键盘效果**真机预览才可见**，模拟器看不到数字键盘。

## 五、踩坑记录

1. 忘记写`name`属性，拿不到表单数据；

2. 输入字符串直接运算，没有`parseFloat`转换，计算结果 NaN；

3. 直接修改`this.data.visible`页面不会刷新，必须 setData；

4.toast 长文本使用`icon:none`，否则文字被截断。

## 六、扩展思考（可自行拓展）

1. 增加输入空值、负数的判断；

2. 面积保留 2 位小数输出；

3. 输入过程实时校验，不用点计算就提示错误。