一、描述设计一个小程序演示form组件、input组件、button组件、和消息提示框API函数的功能和使用方法。小程序运行后能够根据输入的三角形三条边长计算三角形的面积。根据三角形边长计算面积的公式为海伦公式Herons formula式中a、b、c为三角形的三条边长二、 form 组件微信小程序中form组件的作用是将组件内的用户输入的switch、input、checkbox、slider、radio、picker等组件的值提交。当点击form表单中form-type为submit的button组件时会将表单组件中的value值进行提交点击form-type为reset的按钮时会重置表单。2.1 核心1. form 表单提交的关键name 属性点击form-typesubmit的按钮时表单会将内部组件的value值提交需要在组件上加上name属性作为 key如果不加 name 属性表单提交时取不到该组件的值input typedigit placeholder请输入三角形第一条边长 namea /提交后在事件处理函数中通过e.detail.value获取所有数据formSubmit(e) { console.log(e.detail.value) // {a: 30, b: 40, c: 50} }2. input 组件的两个实用属性属性作用focustrue自动获得焦点页面打开后光标自动出现在第一个输入框typedigit输入时自动弹出带小数点的数字键盘方便快速输入真机有效3. wx.showToast 消息提示框wx.showToast({ title: 提示内容, icon: none, // 不显示图标 duration: 2000 // 提示的延迟时间为2000毫秒 })三、实现步骤3.1 编辑 index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitle三角形面积计算器/view form bindsubmitformSubmit bindresetclear input typedigit placeholder请输入三角形第一条边长 namea focustrue value{{sideA}} / input typedigit placeholder请输入三角形第二条边长 nameb value{{sideB}} / input typedigit placeholder请输入三角形第三条边长 namec value{{sideC}} / button typeprimary form-typesubmit计算/button !-- 作业要求增加重置按钮点击后清空输入框 -- button typewarn form-typereset重置/button /form view wx:if{{visible}} classresult三角形的面积为: {{area}}/view /view /scroll-view3.2 修改 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; }3.3 修改 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; }3.4 修改 index.js核心)// index.js Page({ data: { // 设置开始不显示计算结果 visible: false, }, /** * submit事件处理函数 * param {*} e */ formSubmit(e) { // 通过把e打印出来可以看到里边的结构才知道取哪些值来用 // 对e的结构不熟悉的时候建议都打印出来看 console.log(e); // 定义是否显示计算结果的变量 let visible this.data.visible // 因为从input输入框中获得的a/b/c是字符串所以要先转换为数值型 let sideANum parseFloat(e.detail.value.a) let sideBNum parseFloat(e.detail.value.b) let sideCNum parseFloat(e.detail.value.c) // 定义存放面积的常量 let area 0 console.log(sideANum, sideBNum, sideCNum); // 判断三角形的任意两条边之和是否大于第三条边 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)) } if (area 0) { visible true } else { visible false } this.setData({ area, visible }) }, /** * 清空输入框中的数据重置按钮也调用此函数 */ clear() { this.setData({ sideA: , sideB: , sideC: , visible: false }) } })四、总结通过本案例我们掌握了form 组件bindsubmit提交、bindreset重置内部组件必须有name属性才能被提交input 组件focus自动聚焦、typedigit数字键盘button 组件form-typesubmit/reset配合表单使用wx.showToasticon: noneduration自定义提示数据校验思维字符串转数值、三角形构成规则校验、非法输入清空并提示。五、成果预览