微信小程序 form 组件实战｜三角形面积计算器

# 微信小程序 form 组件实战三角形面积计算器含重置按钮作业 文章标签微信小程序 form组件 input button 海伦公式 简介本篇通过三角形面积计算器案例学习小程序 form 表单、input 输入框、button 按钮、wx.showToast 消息提示 API完成课后作业新增重置按钮完整可运行源码。## 一、案例需求设计小程序演示form、input、button组件以及消息提示框wx.showToastAPI。根据输入三角形三边使用**海伦公式**计算三角形面积。海伦公式\(s\frac{abc}{2}\)\(area\sqrt{s(s-a)(s-b)(s-c)}\)业务逻辑1. 页面加载第一个输入框自动获得焦点真机弹出数字键盘2. 输入合法三边任意两边之和大于第三边点击计算展示面积3. 三边不满足三角形规则弹出 Toast 提示清空输入框4. ✅作业扩展增加**重置按钮**一键清空输入框、隐藏计算结果。运行效果图- 初始界面3 个输入框 计算按钮 重置按钮- 合法输入页面下方直接输出面积- 非法输入弹出黑色提示框清空表单。 新建项目配置不使用云服务不使用模板。## 二、完整源码### 1.index.wxml页面结构!--index.wxml--navigation-bar titleform组件 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview classtitle三角形面积计算器/view!-- bindsubmit监听表单提交bindreset监听表单重置 --form bindsubmitformSubmit bindresetformReset!-- focus自动聚焦typedigit真机弹出数字键盘name是表单取值key --input typedigit placeholder请输入三角形第一条边长 namea focustrue value{{sideA}}/input typedigit placeholder请输入三角形第二条边长 nameb value{{sideB}} /input typedigit placeholder请输入三角形第三条边长 namec value{{sideC}} /button typeprimary form-typesubmit计算/button!-- 作业新增重置按钮 form‑typereset --button typedefault form-typereset重置/button/form!-- wx:if条件渲染visible控制面积显示隐藏 --view wx:if{{visible}} classresult三角形的面积为: {{area}}/view/view/scroll-view**重点知识点**1. form 组件bindsubmit绑定表单提交事件表单内部button设置form‑typesubmit才会触发表单提交2. input 必须设置name属性e.detail.value才能拿到输入值**没有 name 拿不到表单数据**3. typedigit真机弹出带小数点数字键盘模拟器看不到4. focustrue页面打开输入框自动聚焦5. 重置按钮写在 form 内form‑typereset触发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.jsPage({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 0console.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) / 2area 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‑typesubmit按钮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 标签增加bindresetformReset2. 表单内增加按钮设置form‑typereset3.js 写 formReset 处理函数调用 clear () 清空输入框与隐藏结果。## 四、测试用例1. 合法三角形输入30,40,50输出面积6002. 非法三角形输入30,40,80弹出提示表单清空3. 重置按钮输入任意数字点击重置输入框全部清空面积消失。 注意typedigit数字键盘效果**真机预览才可见**模拟器看不到数字键盘。## 五、踩坑记录1. 忘记写name属性拿不到表单数据2. 输入字符串直接运算没有parseFloat转换计算结果 NaN3. 直接修改this.data.visible页面不会刷新必须 setData4.toast 长文本使用icon:none否则文字被截断。## 六、扩展思考可自行拓展1. 增加输入空值、负数的判断2. 面积保留 2 位小数输出3. 输入过程实时校验不用点计算就提示错误。