企业官网建设流程全解析

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

一、项目简介

本案例基于微信小程序form表单组件，开发三角形面积计算器。用户输入三角形三条边长，程序会完成合法性校验：判断输入是否为有效数字、三边是否满足三角形三边关系，再通过海伦公式计算面积；额外实现重置按钮，一键清空输入框与计算结果，是学习小程序form表单、事件绑定、数据驱动的入门示例。

作业要求：掌握form组件使用 + 增加重置清空功能，可打包源码提交。

二、核心知识点

1. form组件 +bindsubmit表单提交事件
2. input输入框，name属性用于表单取值
3. button按钮，form-type="submit"触发表单提交；普通按钮绑定bindtap自定义事件实现重置
4. Page页面data数据，this.setData()更新视图
5. 条件判断、parseFloat类型转换、海伦公式数学计算
6. wx.showToast消息提示弹窗，wx:if条件渲染结果

三、完整代码实现

1. index.wxml（页面结构）

<view class="box"> <view class="title">三角形面积计算器</view> <form bindsubmit="formSubmit"> <input type="digit" placeholder="请输入三角形第一条边长" name="a" value="{{sideA}}"/> <input type="digit" placeholder="请输入三角形第二条边长" name="b" value="{{sideB}}"/> <input type="digit" placeholder="请输入三角形第三条边长" name="c" value="{{sideC}}"/> <button type="primary" form-type="submit">计算</button> <button type="default" bindtap="clear">重置</button> </form> <view wx:if="{{visible}}" class="result">三角形的面积为: {{area}}</view> </view>

• form绑定bindsubmit，点击form-type="submit"按钮触发formSubmit函数
• input的name是表单取值的key，value绑定data数据，实现双向数据展示
• 重置按钮不提交表单，使用bindtap绑定clear清空函数
• wx:if="{{visible}}"：只有计算合法后，才展示面积结果

2. index.js（页面逻辑）

Page({ data: { visible: false, sideA: '', sideB: '', sideC: '', area: 0 }, //表单提交事件 formSubmit(e) { let sideANum = parseFloat(e.detail.value.a) let sideBNum = parseFloat(e.detail.value.b) let sideCNum = parseFloat(e.detail.value.c) //判断是否为有效数字 if(isNaN(sideANum) || isNaN(sideBNum) || isNaN(sideCNum)){ wx.showToast({ title: '请输入有效数字', icon: 'none', duration:2000 }) this.clear() return } //三角形三边判断：两边之和必须大于第三边 if ((sideANum + sideBNum <= sideCNum) || (sideANum + sideCNum <= sideBNum) || (sideBNum + sideCNum <= sideANum)) { wx.showToast({ title: '两边之和必须大于第三边', icon: 'none', duration: 2000 }) this.clear() return } //海伦公式计算面积 const s = (sideANum + sideBNum + sideCNum) / 2 const area = Math.sqrt(s * (s - sideANum) * (s - sideBNum) * (s - sideCNum)) //更新页面数据 this.setData({ area: area.toFixed(2), visible: true, sideA: sideANum, sideB: sideBNum, sideC: sideCNum }) }, //重置清空函数 clear() { this.setData({ sideA: '', sideB: '', sideC: '', visible: false }) } })

逻辑流程

1. 获取表单输入，转为浮点数；校验是否为数字，非法则弹窗提示并清空
2. 校验三角形三边规则，不满足则提示
3. 海伦公式：s=a+b+c2s=\frac{a+b+c}{2}s=2a+b+c​，area=s(s−a)(s−b)(s−c)area=\sqrt{s(s-a)(s-b)(s-c)}area=s(s−a)(s−b)(s−c)​
4. 计算成功，setData更新页面，打开visible展示结果，保留两位小数
5. clear()重置函数：清空输入框，隐藏结果，满足作业重置要求

3. index.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; } input,button { font-size: 40rpx; margin: 40rpx 0; } input { border-bottom: 2rpx solid blue; } .result { font-size: 40rpx; color: blue; }

4. index.json（页面配置）

{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } }

四、功能测试

1. 非法字符测试：输入字母，点击计算 → 弹出请输入有效数字，输入框清空
2. 不满足三角形条件：输入1,2,3，两边之和等于第三边 → 提示两边之和必须大于第三边
3. 合法输入：输入3,4,5，计算得到面积6.00，页面展示结果
4. 重置按钮：点击重置，三个输入框全部清空，面积结果隐藏，符合作业要求

五、项目打包与作业提交说明

1. 源码打包：在微信开发者工具，点击【工具】→【构建NPM】，再点击【上传】，或者直接复制整个项目文件夹，压缩为zip，作为作业附件上传。
2. 博客提交：将本文发布到技术博客平台（CSDN/掘金等），复制博客名称和博客链接，粘贴进Word文档，随作业一起提交。

六、总结

这个小程序案例完整演示了微信小程序form表单组件的基础用法。form组件收集表单数据，通过提交事件拿到输入值，配合条件校验、数学运算完成业务逻辑；新增重置按钮，使用bindtap绑定自定义事件，调用setData清空数据，实现视图重置。
通过这个案例，可以理解小程序数据驱动视图的核心思想，表单提交、事件处理、条件渲染等常用开发能力，适合小程序前端入门练习。