微信小程序案例 4.1 form 组件

一、案例简介本案例是微信小程序组件开发案例主要学习 form 组件、input 组件、button 组件以及消息提示框 wx.showToast 的使用。程序运行后用户在三个输入框中输入三角形的三条边长点击 计算 按钮利用海伦公式计算并显示三角形的面积如果输入不满足三角形构成条件会弹出提示框并清空输入。 本次作业在基础案例上新增了一个 重置 按钮点击后三个输入框的数值被清空同时隐藏计算出的面积。二、学习知识点form 组件用于包裹表单将组件内的 input、switch、checkbox 等输入内容统一收集提交。input 组件输入框通过 name 属性作为提交时数据的 keytypedigit 弹出带小数点的数字键盘focustrue 自动获得焦点。button 组件通过 form-typesubmit 提交表单form-typereset 重置表单。bindsubmit表单提交事件通过 e.detail.value 按 name 获取各输入框的值。bindreset表单重置事件重置时触发可用来清空显示结果。wx.showToast轻提示 API用于给用户弹出提示信息。海伦公式已知三角形三边 a、b、c先求半周长 p(abc)/2面积 s√[p (p-a)(p-b)(p-c)]。三、开发步骤新建不使用云服务、不使用模板的小程序项目。在 index.wxml 中编写 form 组件内含三个 input 输入框name 分别为 a、b、c一个 计算 提交按钮和一个 重置 按钮。在 index.js 中编写 formSubmit 函数获取三边长度先做合法性校验再用海伦公式计算面积。输入非法时调用 wx.showToast 弹出提示并隐藏面积显示。新增 formReset 函数点击重置按钮时清空面积显示配合 form-typereset 自动清空输入框。编写样式编译预览测试。四、核心代码index.wxml form bindsubmitformSubmit bindresetformResetinput namea typedigit focustrue placeholder请输入边长 a /input nameb typedigit placeholder请输入边长 b /input namec typedigit placeholder请输入边长 c /button form-typesubmit计算/buttonbutton form-typereset重置/button/form view wx:if{{visible}}三角形的面积为{{area}}/viewindex.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 分别加上 namea、b、c。问题 2输入不合法时面积还残留在页面上。 原因只弹了提示没有隐藏面积区域。 解决在不合法分支里 setData 把 visible 设为 false用 wx:if 控制面积隐藏。问题 3重置按钮点了之后面积还在。 原因form-typereset 只能清空输入框不会自动隐藏面积。 解决在 form 上绑定 bindreset 事件在 formReset 函数里把 visible 和 area 清空。六、运行效果打开页面光标自动落在第一个输入框输入三边长点击 计算合法时显示三角形面积非法时弹出提示点击 重置 按钮三个输入框清空面积隐藏。七、案例总结通过本案例掌握了小程序 form 表单的提交与重置机制理解了 input 的 name 属性和 e.detail.value 取值原理学会用 wx.showToast 做用户提示并用海伦公式完成了实际的计算小功能。新增的重置按钮加深了对 form-typereset 和 bindreset 事件的理解。