企业官网建设流程全解析

一、案例简介

本案例是微信小程序组件开发案例，主要学习 form 组件、input 组件、button 组件以及消息提示框 wx.showToast 的使用。程序运行后，用户在三个输入框中输入三角形的三条边长，点击 "计算" 按钮，利用海伦公式计算并显示三角形的面积；如果输入不满足三角形构成条件，会弹出提示框并清空输入。 本次作业在基础案例上新增了一个 "重置" 按钮，点击后三个输入框的数值被清空，同时隐藏计算出的面积。

二、学习知识点

1. form 组件：用于包裹表单，将组件内的 input、switch、checkbox 等输入内容统一收集提交。
2. input 组件：输入框，通过 name 属性作为提交时数据的 key；type="digit" 弹出带小数点的数字键盘；focus="true" 自动获得焦点。
3. button 组件：通过 form-type="submit" 提交表单，form-type="reset" 重置表单。
4. bindsubmit：表单提交事件，通过 e.detail.value 按 name 获取各输入框的值。
5. bindreset：表单重置事件，重置时触发，可用来清空显示结果。
6. wx.showToast：轻提示 API，用于给用户弹出提示信息。
7. 海伦公式：已知三角形三边 a、b、c，先求半周长 p=(a+b+c)/2，面积 s=√[p (p-a)(p-b)(p-c)]。

三、开发步骤

1. 新建不使用云服务、不使用模板的小程序项目。
2. 在 index.wxml 中编写 form 组件，内含三个 input 输入框（name 分别为 a、b、c），一个 "计算" 提交按钮和一个 "重置" 按钮。
3. 在 index.js 中编写 formSubmit 函数，获取三边长度，先做合法性校验，再用海伦公式计算面积。
4. 输入非法时调用 wx.showToast 弹出提示，并隐藏面积显示。
5. 新增 formReset 函数，点击重置按钮时清空面积显示，配合 form-type="reset" 自动清空输入框。
6. 编写样式，编译预览测试。

四、核心代码

index.wxml < form bindsubmit="formSubmit" bindreset="formReset"><input name="a" type="digit" focus="true" placeholder="请输入边长 a" /><input name="b" type="digit" placeholder="请输入边长 b" /><input name="c" type="digit" placeholder="请输入边长 c" /><button form-type="submit">计算</button><button form-type="reset">重置</button>

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

index.js Page ({ data: { visible: false, area: '' }, formSubmit (e) { let a = parseFloat (e.detail.value.a) let b = parseFloat (e.detail.value.b) let c = parseFloat (e.detail.value.c) if (isNaN (a) || isNaN (b) || isNaN (c)) { wx.showToast ({ title: ' 请输入有效边长 ', icon: 'none' }) this.setData ({ visible: false }) return } if (a + b <= c || a + c <= b || b + c <= a) { wx.showToast ({ title: ' 不满足三角形条件 ', icon: 'none' }) this.setData ({ visible: false }) return } let p = (a + b + c) / 2 let s = Math.sqrt (p * (p - a) * (p - b) * (p - c)) this.setData ({ visible: true, area: s.toFixed (2) }) }, formReset () { this.setData ({ visible: false, area: '' }) } })

五、遇到的问题与解决方案

问题 1：取不到输入框的值。 原因：input 没有加 name 属性，表单提交时无法作为 key 对应取值。 解决：给三个 input 分别加上 name="a"、"b"、"c"。

问题 2：输入不合法时面积还残留在页面上。 原因：只弹了提示，没有隐藏面积区域。 解决：在不合法分支里 setData 把 visible 设为 false，用 wx:if 控制面积隐藏。

问题 3：重置按钮点了之后面积还在。 原因：form-type="reset" 只能清空输入框，不会自动隐藏面积。 解决：在 form 上绑定 bindreset 事件，在 formReset 函数里把 visible 和 area 清空。

六、运行效果

打开页面，光标自动落在第一个输入框；输入三边长，点击 "计算"，合法时显示三角形面积，非法时弹出提示；点击 "重置" 按钮，三个输入框清空，面积隐藏。

七、案例总结

通过本案例掌握了小程序 form 表单的提交与重置机制，理解了 input 的 name 属性和 e.detail.value 取值原理，学会用 wx.showToast 做用户提示，并用海伦公式完成了实际的计算小功能。新增的重置按钮加深了对 form-type="reset" 和 bindreset 事件的理解。