作业笔记.微信小程序

一、比较数字大小 (把结果显示在第二页面)

思路(这里只说后端)：先看前端代码（看注释），

<form bindsubmit='formCompare'>
<view>
  <text>请输入第1个数字</text>
  <input bindinput='one' type='number' name="num1"></input>   /！--bindinput是用来做页面传值时用的，name是用来做数字比较时用的，下同--/
</view>

<view>
  <text>请输入第2个数字</text>
  <input bindinput='two' type='number' name="num2"></input>
</view>
<button form-type="submit" bindtap='ck' >比较</button>   /！--bindtap是用来做点击事件时用的--/
</form>

思路正文：在第一页面 (即用户所见第一页面，下同，第二页面也是) 的js页面设置代码接收用户输入的两个数字并比较数字大小

  formCompare: function (e) {
    var str = '两数相等'
    var num1 = Number(e.detail.value.num1)    /!--把输入的第一个数字的值赋值给num1--/
    var num2 = Number(e.detail.value.num2)　　 /!--把输入的第二个数字的值赋值给num2--/
    if (num1 > num2) {　　　　　　　　　　　　　　 /！--进行数字比较--/

      str = '第1个数大'
    } else if (num1 < num2) {　　　　　　　　　　/！--这里变红了不要紧，问题不大--/
      str = '第2个数大'
    }
    this.setData({ result: str })　　　　　　　　/！--把比较得出的结果存在result里--/
  }

然后在第一页面的js页面设置代码用于做传值

 data: {
    firstNumber:null,　　　　　　　　　　　　　　　/！--先把firstNumber和secondNumber定义为null--/
    secondNumber:null,
  },

 one:function(e){　　　　　　　　　　　　　　　　　 /！--再把one得到的值放到firstNumber里，secondNumber的亦同--/
   this.setData({
     firstNumber:e.detail.value
   });
   console.log(this.data.firstNumber);
 },
 two:function(e){
   this.setData({
     secondNumber:e.detail.value
   })
   console.log(this.data.secondNumber);
 },

再在第二页面的js页面设置代码用于接收值

onLoad: function (options) {
    console.log(options.firstNumber),　　　　　　/?--获取传来的firstNumber和scondNumber值--/
    console.log(options.secondNumber),
    console.log(options.result)
    this.setData({
        firstNumber: options.firstNumber,　　　 /？----/
        secondNumber:options.secondNumber,
        result:options.result
      }) 
    }

第一页面的js页面还要设置点击函数代码

ck(e){
   wx.navigateTo({
     url: '../test/test?firstNumber='+this.data.firstNumber+'&secondNumber='+this.data.secondNumber + '&result=' + this.data.result  /!--通过点击函数，把值都传过去--/
   })
 }

以上代码实现数字在第一页面比较后把数值和结果传值到第二页面展示

效果图如下：

作业笔记.微信小程序

猜你喜欢