实验五 智能手机互联网程序设计（微信程序方向）实验报告

• 请完成数值比较任务；
• 
• 

二、实验步骤与结果（给出对应的代码或运行结果截图）

index.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    num1:0,

    num2:0,

    num3:""

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

    input_num1(e){

      this.setData({

        num1:e.detail.value

      })

    },

    input_num2(e){

      this.setData({

        num2:e.detail.value

      })

    },

    btn_tap(){

    

      if(this.data.num1===this.data.num2){

        this.setData({

          num3:"两个数一样大"

        })

      }

      if(this.data.num1<this.data.num2){

        this.setData({

          num3:"第一个数小于第二个数"

        })

      }

      if(this.data.num1>this.data.num2){

        this.setData({

          num3:"第一个数大于第二个数"

        })

      }

    },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

    

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

    

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

    

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

    

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

    

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

    

  }

})

index.wxml

<!--demo-1/demo-1.wxml-->

<form bindsubmit="">

<view>

<text>输入第一个数：</text>

<input type="text"  bindinput="input_num1"/>

</view>

<view>

<text>输入第一个数：</text>

<input type="text"  bindinput="input_num2"/>

</view>

<button form-type="submit" bind:tap="btn_tap">确定</button>

</form>

<view>

<text>比较结果:{{num3}}</text>

</view>

index.wxss

/* demo-1/demo-1.wxss */

view{

  margin: 50rpx;  /* 设置所有view组件的外边距为50rpx */

}

input{

  width: 600rpx;/* 设置输入框的宽度为600rpx */

  margin: 20rpx;/* 设置输入框顶部的外边距为20rpx */

border-bottom: 2rpx solid #ccc;/* 设置输入框底部边框为2rpx宽的灰色（#ccc）实线 */

}

button{

  margin: 50rpx;/* 设置按钮的外边距为50rpx */

  padding: 20rpx;/* 设置按钮内文字的字母间距为20rpx */

}

button {

 color: #fff; /* 设置按钮文字颜色为白色（#fff） */

 background-color: #360; /* 设置按钮背景颜色为深绿色 （#360）*/

}

三、问题总结与体会

、

思路为

1. WXML

构建WXML框架

首先，将页面分为两大部分：表单输入部分和结果显示部分。在表单输入部分，用户可以输入两个数字；在结果显示部分，将展示这两个数字的比较结果。

使用<form>组件构建输入界面；使用<view>组件构建显示结果部分

在<form>内部，使用两个<view>组件分别包裹输入元素，使用<button>组件包裹提交按钮。
<form> -> <view>*2 & <button>

第一个<view>中包含一个<text>组件和一个<input>组件，<text>用于显示“请输入第1个数字：”，<input>组件用于绑定用户输入的第一个数字，通过bindinput="input_num1"实现输入监听。
<view> -> <text> & <input bindinput="input_num1" />

第二个<view>中同样包含一个<text>组件和一个<input>组件，<text>用于显示“请输入第2个数字：”，<input>组件用于绑定用户输入的第二个数字，通过bindinput="input_num2"实现输入监听。
<view> -> <text> & <input bindinput="input_num2" />

在<form>组件的末尾，使用<button>组件添加一个提交按钮。该按钮通过form-type="submit"定义为提交类型，通过bind:tap="tap_btn"实现点击事件的监听，按钮文本为“确定”。

使用<view>组件显示比较结果

在<view>组件中，使用<text>组件显示比较结果。其中，{{num3}}是用来动态显示比较结果的数据绑定表达式，<text>的内容为“比较结果：”，后接动态数据。

2.WXSS

view{
  /* 设置所有view组件的外边距为50rpx */
}

input{
  /* 设置输入框的宽度为600rpx */
  /* 设置输入框顶部的外边距为20rpx */
  /* 设置输入框底部边框为2rpx宽的灰色（#ccc）实线 */
}

button{
  /* 设置按钮的外边距为50rpx */
  /* 设置按钮内文字的字母间距为20rpx */
}

button {
  /* 设置按钮文字颜色为白色（#fff） */
  /* 设置按钮背景颜色为深绿色 （#360）*/
}

3.JS

首先需要在data中定义绑定的数据：
  data: {
    num1:0,
    num2:0,
    num3:""
  },

然后对绑定的事件进行描绘

  // 定义处理第一个输入框数据的函数
 事件绑定名称(e){
    this.setData({
      // 将输入的值设置为num1的值（根据注释补全代码）
    })
  },
  // 定义处理第二个输入框数据的函数
  事件绑定名称(e){
    this.setData({
       // 将输入的值设置为num2的值（根据注释补全代码）
    })
  },

  // 定义点击按钮时的处理函数
  事件绑定名称{
    // 判断两个数是否相等
    if(this.data.num1==this.data.num2){
      this.setData({
         // 如果相等，则设置num3为"两数相等"（根据注释补全代码）
      })
    }
    // 判断第一个数是否小于第二个数
    if (this.data.num1<this.data.num2) {
      this.setData({
         // 如果第一个数小于第二个数，设置num3为字符串"第二个数大"（根据注释补全代码）
      })
    }
    // 判断第一个数是否大于第二个数
    if (this.data.num1>this.data.num2) {
      this.setData({
         // 如果第一个数大于第二个数，设置num3为字符串"第一个数大"（根据注释补全代码）
      })
    }
  },