微信小程序｜form 表单实战，三角形面积计算器（带重置按钮作业）

前言在小程序开发中form表单组件用来收集用户输入搭配input输入框、button按钮完成数据提交是非常高频的基础组件。本篇是课堂案例 4.1做一个三角形面积计算器用户输入三角形三条边长利用海伦公式自动计算面积同时做合法性校验如果三边不满足三角形构成规则弹出提示并清空输入框。作业拓展增加重置按钮一键清空表单内容。官方文档参考 form 组件form | 微信开放文档 showToast 提示框wx.showToast(Object object) | 微信开放文档实现效果预览页面有 3 个数字输入框打开页面第一个输入框自动获得焦点真机弹出带小数点数字键盘。输入合法三边例如30、40、50点击计算页面输出三角形的面积为600。输入非法数据例如30、40、80弹出 Toast 提示问题三角形的两条边之和小于等于第三条边输入框自动清空。点击重置按钮清空全部输入隐藏计算结果作业要求。项目目录结构form组件├─ pages│ └─ index│ ├─ index.js│ ├─ index.wxml│ ├─ index.wxss│ └─ index.json├─ app.js├─ app.json└─ app.wxss一、页面结构 pages/index/index.wxml重点知识点form bindsubmitformSubmit绑定表单提交事件input 必须设置name属性表单提交时作为 key 取值没有 name 拿不到表单数据typedigit真机调出带小数点的数字键盘focustrue页面加载第一个输入框自动获取光标button 设置formtypesubmit点击触发 form 的 bindsubmit 事件作业新增重置按钮使用普通bind:tap绑定点击事件wx:if{{visible}}条件渲染控制计算结果显示隐藏。!--index.wxml--view classboxview classtitle三角形面积计算器/viewform bindsubmitformSubmitinput typedigit placeholder请输入三角形第一条边长 namea focustrue value{{sideA}} /input typedigit placeholder请输入三角形第二条边长 nameb value{{sideB}} /input typedigit placeholder请输入三角形第三条边长 namec value{{sideC}} /button typeprimary form-typesubmit计算/button/form!--作业新增重置按钮--button bind:tapclear重置/buttonview wx:if{{visible}} classresult三角形的面积为{{area}}/view/view二、业务逻辑 pages/index/index.js逻辑流程表单提交触发formSubmit(e)e.detail.value拿到表单全部输入input 返回的是字符串使用parseFloat()转为浮点数校验三角形规则任意两边之和必须大于第三边不满足规则调用clear()清空输入框调用wx.showToast()弹出提示满足规则使用海伦公式计算三角形面积clear()函数复用非法情况和重置按钮都调用该函数清空表单与结果。海伦公式\(s\frac{abc}{2}\)\(area\sqrt{s(s-a)(s-b)(s-c)}\)// index.jsPage({data: {visible: false,sideA: ,sideB: ,sideC: ,area: 0},// form表单提交事件formSubmit(e) {console.log(e)let sideANum parseFloat(e.detail.value.a)let sideBNum parseFloat(e.detail.value.b)let sideCNum parseFloat(e.detail.value.c)let area 0// 判断三角形合法性任意两边之和大于第三边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))}let visibleif (area 0) {visible true} else {visible false}this.setData({area,visible})},//清空输入框、隐藏结果计算非法、重置按钮共用该方法clear() {this.setData({sideA: ,sideB: ,sideC: ,visible: false,area: 0})}})三、页面样式 pages/index/index.wxss/**index.wxss**/page {height: 100vh;display: flex;flex-direction: column;}input,button {font-size: 40rpx;margin: 40rpx 0;}input {border-bottom: 2rpx solid blue;}.result {font-size: 40rpx;color: blue;}四、全局样式 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;}五、项目配置 app.json⚠️ 去掉 skyline 相关配置避免页面空白渲染异常{pages: [pages/index/index],window: {navigationBarTitleText: form组件,navigationBarBackgroundColor: #ffffff,navigationBarTextStyle:black},sitemapLocation: sitemap.json}核心知识点总结1.form 表单组件bindsubmit表单提交事件点击formtypesubmit的按钮触发表单内每一个输入组件必须写name提交后通过e.detail.value.name获取值e.detail.value收集 form 内部所有表单组件的值。2.input 输入框常用属性focustrue自动获取焦点typedigit真机唤起带小数点数字键盘模拟器看不到该键盘效果。3.wx.showToast 消息提示 APItitle提示文字icon:none不显示图标支持两行文本duration提示框显示毫秒数。4. 条件渲染wx:if{{visible}}根据visible布尔值控制 DOM 显示和销毁。5. 事件两种绑定方式在 form 内部按钮设置formtypesubmit走表单bindsubmit事件普通按钮直接使用bind:tap函数名绑定点击事件本案例重置按钮使用该方式。常见踩坑汇总❌input 忘记写name → e.detail.value拿不到表单数据全部为undefined。❌直接拿表单返回字符串做数学运算没有使用parseFloat()转数字计算结果 NaN。❌模拟器看不到数字键盘typedigit仅真机有效模拟器不展示数字键盘。❌页面空白app.json 删除 skyline 配置清除全部缓存重新编译。❌toast 文字只显示 7 个字设置icon:none才支持长文本提示。拓展思考真实项目中表单几乎都会做输入校验判断是否为空、判断输入格式是否符合业务需求本案例完成三角形三边合法性校验就是表单校验的入门练习。