小程序编程第20课

教程

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

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


这个处理函数的名字是: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>

你可能感兴趣的:(小程序编程教程)