企业官网建设流程全解析

一、实验目的

掌握小程序 form、input、button 表单组件的使用，理解表单提交、重置事件；运用海伦公式实现三角形面积计算；掌握wx.showToast消息提示 API。

作业需求：

1. 输入三角形三条边长，使用海伦公式计算面积；
2. 做合法性校验：任意两边之和必须大于第三边，不合法弹出提示并清空输入；
3. 新增重置按钮，点击清空所有输入框，隐藏计算结果。

海伦公式： \(s=\dfrac{a+b+c}{2}\) \(area=\sqrt{s(s-a)(s-b)(s-c)}\)

参考官方文档：

• form 组件：form | 微信开放文档
• wx.showToast：wx.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

关键点：

1. form绑定bindsubmit提交事件、bindreset重置事件；
2. input 必须设置name属性，提交表单后作为取值 key；
3. focus="true"打开页面自动聚焦第一个输入框；type="digit"调出带小数点数字键盘（真机生效）；
4. button 设置formtype="submit"提交表单，formtype="reset"触发重置；
5. wx:if根据visible变量条件渲染面积结果。

<!--index.wxml-->

<navigation-bar title="form组件" back="{{false}}" color="black" background="#FFF"></navigation-bar>

<scroll-view class="scrollarea" scroll-y type="list">

<view class="box">

<view class="title">三角形面积计算器</view>

<!--表单：绑定提交、重置事件-->

<form bindsubmit="formSubmit" bindreset="formReset">

<input type="digit" placeholder="请输入三角形第一条边长" name="a" focus="true" 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 form-type="reset">重置</button>

</form>

<!--条件渲染，visible为true才展示面积-->

<view wx:if="{{visible}}" class="result">三角形的面积为：{{area}}</view>

</view>

</scroll-view>

2、页面逻辑 pages/index/index.js

// index.js

Page({

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) / 2

area = 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：当点击formtype="submit"按钮，触发表单提交事件；表单数据存放于 e.detail.value，依赖 input 的 name 作为 key，没有 name 拿不到值。
• bindreset：点击formtype="reset"按钮触发重置事件；

⚠️注意：小程序原生 reset 只会清空视图输入框，不会自动清空 Page 的 data 变量，必须手动调用setData清空数据。

• submit、reset 类型按钮必须写在<form>标签内部才会生效。

2.input 输入框

• focus="true"页面加载自动获得光标焦点；
• type="digit"：弹出带小数点数字键盘，真机上才会看到效果，模拟器不出现数字键盘；
• input 提交返回全部是字符串，需要parseFloat()转换成数字做数学运算。

3.wx.showToast 消息提示 API

表格

4. 条件渲染

wx:if="{{visible}}"：当visible为 true 渲染标签，false 直接移除标签，用来控制面积结果是否展示。

五、踩坑记录（作业报告加分）

1. input 忘记写name属性：e.detail.value拿不到表单数据；
2. 不使用parseFloat转换，直接拿字符串做加减，会发生字符串拼接而不是数学计算；
3. 把重置按钮写在 form 标签外面：formtype="reset"失效，不会触发bindreset；
4. 只依赖原生 reset，不手动 setData 清空 data，页面视图和 JS 数据状态不一致；
5. type="digit"数字键盘模拟器看不到，需要手机真机调试。

六、运行效果

1. 打开页面，光标自动定位到第一个输入框；
2. 输入合法三边，例如 30、40、50，点击计算，页面输出三角形面积 600；
3. 输入不满足三角形条件的边长，弹出黑色 Toast 提示，输入框清空；
4. 点击重置按钮，所有输入框清空，面积结果消失。

七、小结

form 表单是小程序收集用户输入的重要组件，提交事件获取表单数据，每个表单控件必须配置 name。表单拿到的数据都是字符串，要手动转为数字参与计算。原生重置事件仅操作视图，业务数据需要我们手动调用setData完成清空。结合条件渲染和 Toast 提示，可以完成完整表单校验交互。

拓展：除了 form 提交，input 也可以绑定bindinput实时监听每一次输入。