一、项目背景与需求本案例案例4.1要求使用微信小程序的 form 组件、 input 组件、 button 组件和消息提示框 API设计一个三角形面积计算器。用户输入三角形的三条边长系统根据海伦公式计算并显示三角形面积同时对输入数据进行合法性校验。在基本功能之上还要求增加一个“重置”按钮点击后清空所有输入框中的数值恢复页面初始状态。二、核心技术点与实现过程form 表单组件form 组件是小程序中用于收集用户输入的容器组件。它会自动收集内部所有带 name 属性的表单控件如 input 、 checkbox 、 radio 等的值。通过 bindsubmit 绑定提交事件通过 bindreset 绑定重置事件。在 index.wxml 中用 标签包裹所有表单控件并分别绑定提交和重置事件... 2. input 组件 每个输入框都设置了 name 属性指定该输入框在表单提交时的键名不设置则无法通过 e.detail.value 取到值。同时设置了 typenumber 在真机上会弹出纯数字键盘方便用户输入数字。第一个输入框还设置了 focustrue 页面加载时自动获得输入焦点。 3. 数据绑定与 setData 通过 WXML 中的数据绑定语法 {{visible}} 控制结果区域的显示/隐藏。在 JS 中通过 this.setData() 修改数据驱动视图自动更新这是小程序“数据驱动视图”核心思想的体现。 4. 三角形合法性校验 在计算面积前必须进行两步校验 ● 数据类型校验用 isNaN() 判断输入是否为有效数字防止用户输入文字导致计算异常。 ● 三角形不等式校验任意两边之和必须大于第三边 a b c 且 a c b 且 b c a 否则不构成三角形。 校验失败时通过 wx.showToast 弹出提示信息并清空输入框、隐藏结果区域。 5. 海伦公式计算面积 已知三角形三边 a、b、c先计算半周长 s (a b c) / 2则面积 S √(s(s-a)(s-b)(s-c))。 let s (a b c) / 2; let area Math.sqrt(s * (s - a) * (s - b) * (s - c)); area Math.round(area * 100) / 100; // 保留两位小数 6. 重置按钮的实现 给 button 设置 form-typereset 点击后自动触发 form 组件的 bindreset 事件。在 formReset 回调函数中通过 setData 清空三个输入框的数据并将 visible 设为 false 隐藏面积显示区域实现页面恢复到初始状态。 重置 三、页面最终效果 在微信开发者工具中编译运行后页面顶部显示“三角形面积计算器”标题下方依次为三个输入框边长 a、b、c和两个按钮“计算”和“重置”。输入合法数据如 3、4、5点击“计算”后底部绿色区域显示面积结果 S 6输入不合法数据则弹出 Toast 提示并自动清空点击“重置”按钮后所有输入框被清空结果区域隐藏。在手机真机预览时点击输入框可弹出纯数字键盘。 四、总结与体会 通过本次案例的实践我系统地掌握了小程序表单开发的核心流程 1. 表单定义使用 form 组件包裹表单控件通过 name 属性建立数据键名映射。 2. 事件绑定通过 bindsubmit 和 bindreset 分别处理表单提交和重置逻辑。 3. 数据校验在业务计算前进行数据类型和数学逻辑的双重校验保证程序的健壮性。 4. 数据驱动视图通过 setData 修改数据视图自动响应更新无需手动操作 DOM。 5. 海伦公式的应用将数学知识融入编程实践实现了已知三边求面积的完整功能。 这些表单开发模式在实际项目中非常通用是小程序开发的基础技能也为后续学习自定义组件Component和复杂表单交互打下了坚实基础。
一、项目背景与需求本案例案例4.1要求使用微信小程序的 form 组件、 input 组件、 button 组件和消息提示框 API设计一个三角形面积计算器。用户输入三角形的三条边长系统根据海伦公式计算并显示三角形面积同时对输入数据进行合法性校验。在基本功能之上还要求增加一个“重置”按钮点击后清空所有输入框中的数值恢复页面初始状态。二、核心技术点与实现过程form 表单组件form 组件是小程序中用于收集用户输入的容器组件。它会自动收集内部所有带 name 属性的表单控件如 input 、 checkbox 、 radio 等的值。通过 bindsubmit 绑定提交事件通过 bindreset 绑定重置事件。在 index.wxml 中用 标签包裹所有表单控件并分别绑定提交和重置事件... 2. input 组件 每个输入框都设置了 name 属性指定该输入框在表单提交时的键名不设置则无法通过 e.detail.value 取到值。同时设置了 typenumber 在真机上会弹出纯数字键盘方便用户输入数字。第一个输入框还设置了 focustrue 页面加载时自动获得输入焦点。 3. 数据绑定与 setData 通过 WXML 中的数据绑定语法 {{visible}} 控制结果区域的显示/隐藏。在 JS 中通过 this.setData() 修改数据驱动视图自动更新这是小程序“数据驱动视图”核心思想的体现。 4. 三角形合法性校验 在计算面积前必须进行两步校验 ● 数据类型校验用 isNaN() 判断输入是否为有效数字防止用户输入文字导致计算异常。 ● 三角形不等式校验任意两边之和必须大于第三边 a b c 且 a c b 且 b c a 否则不构成三角形。 校验失败时通过 wx.showToast 弹出提示信息并清空输入框、隐藏结果区域。 5. 海伦公式计算面积 已知三角形三边 a、b、c先计算半周长 s (a b c) / 2则面积 S √(s(s-a)(s-b)(s-c))。 let s (a b c) / 2; let area Math.sqrt(s * (s - a) * (s - b) * (s - c)); area Math.round(area * 100) / 100; // 保留两位小数 6. 重置按钮的实现 给 button 设置 form-typereset 点击后自动触发 form 组件的 bindreset 事件。在 formReset 回调函数中通过 setData 清空三个输入框的数据并将 visible 设为 false 隐藏面积显示区域实现页面恢复到初始状态。 重置 三、页面最终效果 在微信开发者工具中编译运行后页面顶部显示“三角形面积计算器”标题下方依次为三个输入框边长 a、b、c和两个按钮“计算”和“重置”。输入合法数据如 3、4、5点击“计算”后底部绿色区域显示面积结果 S 6输入不合法数据则弹出 Toast 提示并自动清空点击“重置”按钮后所有输入框被清空结果区域隐藏。在手机真机预览时点击输入框可弹出纯数字键盘。 四、总结与体会 通过本次案例的实践我系统地掌握了小程序表单开发的核心流程 1. 表单定义使用 form 组件包裹表单控件通过 name 属性建立数据键名映射。 2. 事件绑定通过 bindsubmit 和 bindreset 分别处理表单提交和重置逻辑。 3. 数据校验在业务计算前进行数据类型和数学逻辑的双重校验保证程序的健壮性。 4. 数据驱动视图通过 setData 修改数据视图自动响应更新无需手动操作 DOM。 5. 海伦公式的应用将数学知识融入编程实践实现了已知三边求面积的完整功能。 这些表单开发模式在实际项目中非常通用是小程序开发的基础技能也为后续学习自定义组件Component和复杂表单交互打下了坚实基础。
