一、完成效果二、制作流程1.编辑index.wxml文件!--index.wxml-- navigation-bar titleform组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle三角形面积计算器/view form bindsubmitformSubmit 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 typedefault bindtapclear classreset-btn重置/button /form view wx:if{{visible}} classresult三角形的面积为{{area}}/view /view /scroll-view2.修改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; } /* 新增重置按钮的样式 */ .reset-btn { background-color: #f0f0f0; color: red; margin-top: 0; }3.修改app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**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; }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, // 提示的延迟时间为2000毫秒 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 }) } })三、个人总结希望可以坚持学下去
