小程序計算屬性

一、小程序計算屬性用什麼替代

小程序計算屬性是指根據數據源的狀態，對數據進行一些簡單的轉換或計算之後，生成一個新的數據狀態。它是小程序開發中常用的一種數據處理方式，但是在某些場景中，我們可能無法使用小程序計算屬性來實現想要的效果。那麼我們可以嘗試使用以下幾種方式來替代小程序計算屬性:

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