学习微信小程序第四弹

作业要求

1. 参考【案例：成绩计算器】和【案例：循环求和计算器】编写一个小程序，根据输入的三角形三条边长计算三角形的面积。计算公式：

area=s(s-a)(s-b)(s-c)

其中，area表示三角形面积，s=(a+b+c)/2，a、b、c是三角形的三条边长。

2. 将程序代码（代码文本）和程序的运行结果（图片）粘贴在下面相应的位置，将Word文档另存为PDF文件，并将PDF文件上交，否则扣5分。

二、评分标准

1. 界面设计（40分）。评分标准如下：

1. 组件齐全，包含3个input组件、1个按钮组件（20分，每个组件5分）
2. 界面结构合理、布局美观（20分）

将程序代码粘贴到此处。

<!--index.wxml-->
<view class="border">
  <view class="title">
    计算三角形的面积
  </view>
  <form bindsubmit="formSubmit">
    请输入三角形abc的个边长：
    <input type="digit" placeholder="请输入a=" name="a" placeholder-class="placeholder" value="{{a}}" />
    <input type="digit" placeholder="请输入b=" name="b" placeholder-class="placeholder" value="{{b}}" />
    <input type="digits" placeholder="请输入c=" name="c" placeholder-class="placeholder" value="{{c}}" />
    <button form-type="submit" type="default">计算</button>
  </form>
  <view class="content">
    <text> 三角形的面积：{{output}}</text>
  </view>
</view>
/**index.wxss**/
.border{
  border: 1px solid black;
  margin: 20rpx;
  padding: 20rpx;
}
.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color:red;
}
input{
  margin: 20px 0;
  border: 1px solid black;
  height: 120rpx;
  background: #ebe8e8;
  padding-left: 10px;
}
.placeholder{
  font-size: 15px;
}
.content{
  background: #ebe8e8;
  padding: 10px;
  color: black;
}
button{
  margin: 30rpx 50rpx;
}
// index.js
// 获取应用实例
Page({
  clear: function () {
    this.setData({
      a: '',
      b: '',
      c: '',
      output: ''
    })
  },
  formSubmit(e) {
    var a = parseFloat(e.detail.value.a);
    var b = parseFloat(e.detail.value.b);
    var c = parseFloat(e.detail.value.c);
    var area;
    var s;
    if (a + b > c && a + c > b && b + c > a) {
      {
        s = (a + b + c) / 2.0;
        area = Math.sqrt(s * (s - a) * (s - b) * (s - c));
      }
      this.setData({
        output: area
      });
      console.log(area);
    } else {
      wx.showToast({
        //消息提示框 
        title: '三角形两边之和大于第三边！',
        icon: 'none',
        duration:2000,
      })
      this.clear();
      return;
    }
  }
})

2. 功能设计（50分）。评分标准如下：

（1）代码能够计算出三角形面积（40分）

（2）利用判断语句判断三角形两边之和大于第三边（10分）

将运行结果截图粘贴到此处。

3. 案例总结（10分）。评分标准如下：

（1）作业用到的知识点（5分）

（2）对本次作业的创新和体会（5分）

1. 知识点：

编写index.wxml文件代码，代码中使用input组件输入数据，通过placeholder属性提示用户输入，通过digit属性实现在真机上输入时弹出的数字键盘，通过bindinput属性绑定输入事件函数处理函数，通过placeholder-class属性设置placeholder类型，使用botton组件的bindtap属性绑定了点击按钮事件处理，view组件通过绑定变量{{flag}}设置三角形面积结果的显示

编写index. wxss文件代码，定义index.wxml文件中的各种使用样式，设置input组件样式通过input样式进行了设置

编写index.js文件代码，首先在data中初始化了index.wxml文件中绑定的数据（flag初始值为：true，，表示显示面积结果的view组件是隐藏的），然后定义了index.wxml文件中绑定的事件函数，用于获取input组件中输入的三条边长，计算三角形面积。

1. 创新和体会：