form 表单组件实战｜三角形面积计算器（海伦公式，含重置按钮）

一、实验目的掌握小程序 form、input、button 表单组件的使用理解表单提交、重置事件运用海伦公式实现三角形面积计算掌握wx.showToast消息提示 API。作业需求输入三角形三条边长使用海伦公式计算面积做合法性校验任意两边之和必须大于第三边不合法弹出提示并清空输入新增重置按钮点击清空所有输入框隐藏计算结果。海伦公式 \(s\dfrac{abc}{2}\) \(area\sqrt{s(s-a)(s-b)(s-c)}\)参考官方文档form 组件form | 微信开放文档wx.showToastwx.showToast(Object object) | 微信开放文档二、项目目录结构form组件├─ pages│ └─ index│ ├─ index.js //业务逻辑、表单事件、海伦公式计算│ ├─ index.json│ ├─ index.wxml //页面表单结构│ └─ index.wxss //页面局部样式├─ app.js├─ app.json└─ app.wxss //全局公共样式三、完整代码实现1、页面结构 pages/index/index.wxml关键点form绑定bindsubmit提交事件、bindreset重置事件input 必须设置name属性提交表单后作为取值 keyfocustrue打开页面自动聚焦第一个输入框typedigit调出带小数点数字键盘真机生效button 设置formtypesubmit提交表单formtypereset触发重置wx:if根据visible变量条件渲染面积结果。!--index.wxml--navigation-bar titleform组件 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview classtitle三角形面积计算器/view!--表单绑定提交、重置事件--form bindsubmitformSubmit bindresetformResetinput typedigit placeholder请输入三角形第一条边长 namea focustrue value{{sideA}}/input typedigit placeholder请输入三角形第二条边长 nameb value{{sideB}}/input typedigit placeholder请输入三角形第三条边长 namec value{{sideC}}/button typeprimary form-typesubmit计算/button!--作业新增重置按钮--button form-typereset重置/button/form!--条件渲染visible为true才展示面积--view wx:if{{visible}} classresult三角形的面积为{{area}}/view/view/scroll-view2、页面逻辑 pages/index/index.js// index.jsPage({data: {visible: false, // 是否展示面积结果sideA: ,sideB: ,sideC: ,area: 0},/*** 表单提交事件计算三角形面积* param {Object} e 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))}const visible area 0 ? true : false;this.setData({area,visible})},/*** 清空输入与结果*/clear() {this.setData({sideA: ,sideB: ,sideC: ,visible: false})},/*** 作业新增重置按钮触发事件*/formReset() {console.log(点击重置按钮);this.clear();}})3、页面样式 pages/index/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;}4、全局样式 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;}四、核心知识点总结1.form 表单组件bindsubmit当点击formtypesubmit按钮触发表单提交事件表单数据存放于 e.detail.value依赖 input 的 name 作为 key没有 name 拿不到值。bindreset点击formtypereset按钮触发重置事件⚠️注意小程序原生 reset 只会清空视图输入框不会自动清空 Page 的 data 变量必须手动调用setData清空数据。submit、reset 类型按钮必须写在form标签内部才会生效。2.input 输入框focustrue页面加载自动获得光标焦点typedigit弹出带小数点数字键盘真机上才会看到效果模拟器不出现数字键盘input 提交返回全部是字符串需要parseFloat()转换成数字做数学运算。3.wx.showToast 消息提示 API表格参数说明title提示文字内容icon图标none代表不显示图标可以支持多行文本duration提示框显示毫秒时长4. 条件渲染wx:if{{visible}}当visible为 true 渲染标签false 直接移除标签用来控制面积结果是否展示。五、踩坑记录作业报告加分input 忘记写name属性e.detail.value拿不到表单数据不使用parseFloat转换直接拿字符串做加减会发生字符串拼接而不是数学计算把重置按钮写在 form 标签外面formtypereset失效不会触发bindreset只依赖原生 reset不手动 setData 清空 data页面视图和 JS 数据状态不一致typedigit数字键盘模拟器看不到需要手机真机调试。六、运行效果打开页面光标自动定位到第一个输入框输入合法三边例如 30、40、50点击计算页面输出三角形面积 600输入不满足三角形条件的边长弹出黑色 Toast 提示输入框清空点击重置按钮所有输入框清空面积结果消失。七、小结form 表单是小程序收集用户输入的重要组件提交事件获取表单数据每个表单控件必须配置 name。表单拿到的数据都是字符串要手动转为数字参与计算。原生重置事件仅操作视图业务数据需要我们手动调用setData完成清空。结合条件渲染和 Toast 提示可以完成完整表单校验交互。拓展除了 form 提交input 也可以绑定bindinput实时监听每一次输入。