小程序编程第20课

教程

接着上节课讲，这节课我们的目标就是把这个复利计算器能够算出结果并展示即可

由于开始计算按钮我们还没有绑定任何事件，我们需要给按钮绑定一个点击事件。

<button bindtap="calculate" type="primary">开始计算</button>

这个处理函数的名字是：calculate

然后我们需要点开Index.js文件，然后添加这个处理函数

calculate:function(){
    
 }

这个函数里面就是我们最终要计算出结果的地方

怎么计算呢？就是利用复利公式然后计算出结果

复利公式是怎么样呢？

FV = PV (1+r)^n

FV是终值，
PV是现值

PV就是我们的p变量，r就是我们的i变量，n就是我们的n变量，FV就是我们要求的值

比如有10000本金，年利率10%，期数是10年，那终值是多少呢？

FV = 10000 * (1 + 10%) ^ 10

我们可以先用计算器算出来，我们发现结果是25937.42元

那我们怎么用代码表达这个公式呢？

那就是套进去

我们先定义一个结果变量，也就是fv

let fv = p * (1 + i)**n

这里**的意思就是数学上^的意思

那我们就可以得到结果了

先不展示到屏幕上，打印出来看一看

console.log(fv)

我们输入个本金10000，然后期数10，利率10，点击按钮计算

我们发现计算出来的结果非常大，这是一个科学计数法表示的数，这是个天文数字，10000块10年怎么也不可能达到这么大的数字。所以我们做错了。

2.5937424601e+24

问题出在哪呢？

我们在计算结果之前打印一下，p,i,n的值，看看是不是我们期望的值

我们发现打印出来的值都是我们输入的值，看起来没啥问题？

但是对比我们刚刚用计算器的公式我们发现，利率是错的，我们的利率没有换算成百分数，或者是小数。

怎么换算呢？那就除以100呗

i = i / 100

然后我们再试试，我们发现结果是对了，但是这个数字的小数部分也太长了吧！

我们怎么把它四舍五入，只保留两位小数呢？

我们需要用到Number对象的一个方法，toFixed()

这个方法的功能就是保留小数点后几位

比如我要保留小数点后两位，可以这样

fv = fv.toFixed(2)

然后我们就把fv变成了两位小数的字符串了，注意它被变成字符串了。

为啥？你可以看控制台答应的数字变成灰色的了，灰色的就是字符串了。之前是紫色的。

我们可以打印一个数字看看

console.log(1234)

你可以看到，数字是紫色的

凭颜色判断是一个偷懒的方法，如果需要更严格的判断，我们可以用type of运算符

比如这样

console.log(typeof fv)

然后就会打印出string，这意思就是说，fv变量的类型是字符串

那我们想要展示整数结果呢？

那我们可以这样

fv = fv.toFixed(0)

然后就可以得到整数部分的结果。

我们还可以省略这个0

fv = fv.toFixed()

因为当我们不传递任何参数给这个方法的时候，它就默认取整数部分

好了，现在我们得到了这个结果了，我们需要展示给用户看，怎么办呢？

简单的方法是，弹窗展示给用户看

我们可以这样

wx.showModal({
      title: '计算结果',
      content: fv,
      showCancel: false
    })

然后我们就完成了今天的目标了

你是不是想问我怎么知道Number对象有toFixed方法呢？

这就需要看这个javascript语言的说明书了。

说明书地址：点这里可以看到Number对象内置的方法

当然还有String对象也是有自带的各种方法的，等我们讲到它再用。

现在这个程序有一个很大的问题，那就是我们如果不输入，它仍然能够计算得到结果

我们希望用户都输入之后我们才弹出结果，那么我们就需要进行校验，我们需要判断用户输入的内容是不是为空，如果为空，那么我才计算结果。

那我们如何才能做到呢？

给你个提示，我们用if来判断

比如

if (p === '') {
  wx.showModal({
    title: '提示',
    content: '请输入本金',
    showCancel: false
  })
  return
}

这个return是什么意思呢？

就是说立即结束这个方法，也就是不执行后面的代码了。相当于执行到这里，这个计算函数就执行完毕了。

作业

根据提示代码写出期数和利率的校验代码，然后截几个图发到Mixin群

附件

//index.js
//获取应用实例
const app = getApp()

let p = 0;
let i = 0;
let n = 0;

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  handlePInput: function (e) {
    p = e.detail.value
  },
  handleNInput: function (e) {
    n = e.detail.value
  },
  handleIInput: function (e) {
    i = e.detail.value
  },
  calculate: function () {
    if (p === '') {
      wx.showModal({
        title: '提示',
        content: '请输入本金',
        showCancel: false
      })
    }
    i = i / 100
    let fv = p * (1 + i) ** n
    fv = fv.toFixed(2)
    wx.showModal({
      title: '计算结果',
      content: fv,
      showCancel: false
    })
  }
})

<view class="row">
	<text>本金</text>
	<input bindinput="handlePInput" placeholder="请输入"></input>
	<text>元</text>
</view>
<view class="row">
	<text>期数</text>
	<input bindinput="handleNInput" placeholder="请输入"></input>
	<text>年</text>
</view>
<view class="row">
	<text>利率</text>
	<input bindinput="handleIInput" placeholder="请输入"></input>
	<text>%年利率</text>
</view>
<button bindtap="calculate" type="primary">开始计算</button>