小程序编程第20课

小咪咪 2023-03-04 09:13 8阅读 0赞

# 教程 #

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

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

这个处理函数的名字是：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对象内置的方法][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
        })
      }
    })

[Number]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number