小程序计算属性

一、小程序计算属性用什么替代

小程序计算属性是指根据数据源的状态，对数据进行一些简单的转换或计算之后，生成一个新的数据状态。它是小程序开发中常用的一种数据处理方式，但是在某些场景中，我们可能无法使用小程序计算属性来实现想要的效果。那么我们可以尝试使用以下几种方式来替代小程序计算属性:

1、使用page的自定义函数

可以在page中定义一个函数，然后在wxml中使用{{}}来调用函数，实现计算或转换数据的效果。但是这种方式需要将数据源的状态通过参数传入到函数中，实现起来不如小程序计算属性方便。

// page.js
Page({
  data: {
    num1: 1,
    num2: 2,
  },
  sum: function() {
    return this.data.num1 + this.data.num2
  }
})

// page.wxml
{{sum()}}

2、使用ready函数更新数据状态

可以在页面的onLoad函数中通过setData更新数据状态，然后在页面的ready函数中对数据进行计算或转换，最后将计算结果通过setData更新到页面上。这种方式需要手动进行数据的更新，较为繁琐。

// page.js
Page({
  data: {
    num1: 1,
    num2: 2,
    sum: 0,
  },
  onLoad: function() {
    this.setData({
      sum: this.data.num1 + this.data.num2
    })
  },
  onReady: function() {
    this.setData({
      sum: this.data.sum * 10
    })
  }
})

// page.wxml
{{sum}}

二、微信小程序计算属性

微信小程序中，我们可以使用computed属性来定义小程序计算属性，它会自动计算和更新数据状态，方便快捷。

// page.js
Page({
  data: {
    num1: 1,
    num2: 2,
  },
  computed: {
    sum: function() {
      return this.data.num1 + this.data.num2
    }
  }
})

// page.wxml
{{sum}}

三、计算热量的小程序

在健康生活类的小程序中，计算热量是一项重要的功能。我们可以通过小程序计算属性来实现对食物热量的计算。

// food.js
Page({
  data: {
    foodList: [
      {name: '苹果', calorie: 52},
      {name: '香蕉', calorie: 89},
      {name: '鸡蛋', calorie: 147},
    ],
    selectedFoodIndex: 0,
  },
  computed: {
    selectedFoodCalorie: function() {
      return this.data.foodList[this.data.selectedFoodIndex].calorie
    }
  },
  changeSelectedFood: function(e) {
    this.setData({
      selectedFoodIndex: e.currentTarget.dataset.index
    })
  }
})

// food.wxml

  
    选择食物
  
  所选食物的热量：{{selectedFoodCalorie}}千卡

四、雷亚架计算小程序

在计算机科学类的小程序中，可以使用小程序计算属性来实现一些算法的计算。例如，雷亚架（Ladder）计算可以通过小程序计算属性来实现。

// ladder.js
Page({
  data: {
    x: 2,
    y: 3,
    z: 1,
  },
  computed: {
    result1: function() {
      return Math.sqrt(this.data.x * this.data.y) + Math.log(this.data.z)
    },
    result2: function() {
      return Math.pow(this.data.x, this.data.y) + this.data.z
    }
  }
})

// ladder.wxml

  结果1：{{result1}}
  结果2：{{result2}}

五、计算天数的小程序

在时间计算类的小程序中，小程序计算属性也能够发挥作用。例如，计算从某一天开始经过了多少天可以通过小程序计算属性来实现。

// days.js
Page({
  data: {
    startDate: '2022-01-01',
    endDate: '2022-10-01',
  },
  computed: {
    days: function() {
      var start = new Date(this.data.startDate)
      var end = new Date(this.data.endDate)
      return parseInt((end.getTime() - start.getTime()) / 1000 / 86400)
    }
  }
})

// days.wxml

  
    开始日期：{{startDate}}
  
  
    结束日期：{{endDate}}
  
  共{{days}}天

六、计算诉讼费的小程序

在法律服务类的小程序中，可以使用小程序计算属性来计算一些法律费用，例如诉讼费。

// lawsuit.js
Page({
  data: {
    lawsuitMoney: 1000000,
  },
  computed: {
    lawsuitFee: function() {
      var money = this.data.lawsuitMoney
      if (money > 1000000) {
        return money * 0.01
      } else if (money > 500000) {
        return money * 0.015
      } else if (money > 100000) {
        return money * 0.02
      } else if (money > 30000) {
        return money * 0.03
      } else if (money > 10000) {
        return money * 0.05
      } else {
        return money * 0.1
      }
    }
  }
})

// lawsuit.wxml

  
  诉讼费用：{{lawsuitFee}}元

七、计算贷款利息的小程序

在金融类的小程序中，小程序计算属性也有很大的用武之地。例如，计算贷款利息可以通过小程序计算属性来实现。

// loan.js
Page({
  data: {
    loanMoney: 1000000,
    loanRate: 4.9,
    loanMonth: 12,
  },
  computed: {
    monthRate: function() {
      return this.data.loanRate / 12 / 100
    },
    monthMoney: function() {
      var money = this.data.loanMoney
      var rate = this.data.monthRate
      var month = this.data.loanMonth
      return money * rate * Math.pow(1 + rate, month) / (Math.pow(1 + rate, month) - 1)
    },
    loanInterest: function() {
      return this.data.monthMoney * this.data.loanMonth - this.data.loanMoney
    }
  },
  changeLoanMoney: function(e) {
    this.setData({
      loanMoney: e.detail.value
    })
  },
  changeLoanRate: function(e) {
    this.setData({
      loanRate: e.detail.value
    })
  },
  changeLoanMonth: function(e) {
    this.setData({
      loanMonth: e.detail.value
    })
  }
})

// loan.wxml

  
  贷款年利率：{{loanRate}}
  
    贷款期限：{{loanMonth}}月
  
  每月应还：{{monthMoney}}元
  贷款利息：{{loanInterest}}元

八、bmi计算小程序

在健康生活类的小程序中，可以使用小程序计算属性来计算一些健康数据。例如，计算BMI值可以通过小程序计算属性来实现。

// bmi.js
Page({
  data: {
    height: 170,
    weight: 60,
  },
  computed: {
    bmi: function() {
      return (this.data.weight / Math.pow(this.data.height / 100, 2)).toFixed(1)
    }
  },
  changeHeight: function(e) {
    this.setData({
      height: e.detail.value
    })
  },
  changeWeight: function(e) {
    this.setData({
      weight: e.detail.value
    })
  }
})

// bmi.wxml

  
  
  BMI值：{{bmi}}

九、肾小球滤过率计算小程序

在医疗健康类的小程序中，可以使用小程序计算属性来计算一些医疗数据。例如，计算肾小球滤过率可以通过小程序计算属性来实现。

// gfr.js
Page({
  data: {
    gender: 0,
    age: 30,
    weight: 60,
    creatinine: 80,
  },
  computed: {
    gfr: function() {
      var genderFactor = this.data.gender == 0 ? 1 : 0.742
      var ageFactor = Math.pow(this.data.age, -0.203)
      var weightFactor = Math.pow(this.data.weight, -0.385)
      var creatinineFactor = Math.pow(this.data.creatinine / 88.4, -1.154)
      return (141 * genderFactor * ageFactor * weightFactor * creatinineFactor).toFixed(1)
    }
  },
  changeGender: function(e) {
    this.setData({
      gender: e.detail.value
    })
  },
  changeAge: function(e) {
    this.setData({
      age: e.detail.value
    })
  },
  changeWeight: function(e) {
    this.setData({
      weight: e.detail.value
    })
  },
  changeCreatinine: function(e) {
    this.setData({
      creatinine: e.detail.value
    })
  }
})

// gfr.wxml

  
    性别：{{gender == 0 ? '男' : '女'}}
  
  
  
  
  肾小球滤过率：{{gfr}}ml/min