小程序编程第21课

教程

各位战友，早上好。这节课接着做项目，这节课我们的目标是把计算结果直接展示在页面上，而不是通过弹窗展示。

上节课我们只校验了本金，我们把期数和利率的校验也给加上，如果你已经加上了，那么就不用管了

if (p === '') {
   wx.showModal({
     title: '提示',
     content: '请输入本金',
     showCancel: false
   })
   return
 } else if (n === '') {
   wx.showModal({
     title: '提示',
     content: '请输入期数',
     showCancel: false
   })
   return
 } else if (i === '') {
   wx.showModal({
     title: '提示',
     content: '请输入本利率',
     showCancel: false
   })
   return
 }

现在我们想要把结果直接展示在页面上，而不是弹窗。

那我们该怎么办呢？

首先我们要在页面上画出一块地方，让我们的结果能放进去。

于是，我们又要打开index.wxml

我们在计算按钮增加如下代码

	计算结果


	{{result}}

这里view标签我们已经讲过了，就是视图标签，可以用来在页面展示任何东西

这里有个{{result}}是啥意思呢？

就是把我们的结果展示在这里，result是变量，它被包了两对大括号

这是小程序固定的语法，可以把data中的属性绑定到这里

什么是data中的属性呢？

打开我们的index.js文件，你可以看到page函数的参数对象里面，有个属性就叫data，它的值是一个对象

现在这个data对象有4个属性，这里的4个属性是可以直接展示到页面的，现在这里面没有result属性，所以当我们保存index.wxml时，页面只会增加一行计算结果的字，不会展示result属性

现在，我们在这个data对象里增加一个reuslt属性，属性值可以为空字符串

data: {
	reuslt: '',
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

因为是空字符串，所以，我们保存了之后，页面还是没有变化。为了检查我们是不是真的把result属性展示到页面了，我们随便给个字符串。

data: {
	reuslt: '1234',
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

保存一下，我们发现页面上出现了1234，因为我们还没有计算，所以我们还是先还原为空字符串。

现在我们要修改一下展示结果的那段代码了

我们要把结果保存在这个reuslt属性里面

我们怎么才能做到呢?

先把之前弹窗展示结果的代码删掉

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

因为fv是我们的计算结果，那我们只需要把fv保存到result中就可以了

怎么做呢？那就是使用我们之前很熟悉的一个函数

this.setData({
      result: fv
})

我们来分析一下这几行代码的意思，this是什么东西？表示这个。

这个是指谁？

指的就是这个page参数对象

this有点像，我们日常对话中常常说的「我」，表示指代

因为this指代的是一个对象，所以this可以看成是一个对象

所以可以用.访问其属性，setData是一个隐藏的属性，是特定于微信小程序的。虽然我们再这个参数对象中没有看到，但是它的确是存在的

然后这个setData又是一个函数，所以我们可以传递参数

我们传递的参数是一个对象，这个对象里面还有一个result属性，也就是我们刚刚在上面定义的result属性，然后属性值正好是我们的结果

这几行代码组合起来的意思就是，设置data中result属性的值

然后我们保存一下，看看效果

结果被展示在页面上了。需要注意的是，只有在data对象中的属性才能被展示到页面上,我们再index.js上面定义的p和i，n是不能直接展示到页面上的，要把他们展示到页面上，需要在data中增加属性才可以。

作业

点击计算按钮后，把输入的本金和期数利率也展示到页面上

像这样

官方文档

参考答案

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

let p = ''; // 本金
let i = ''; // 利率
let n = ''; // 期数

Page({
  data: {
    result: '',
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    p: '',
    n: '',
    i: ''
  },
  //事件处理函数
  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
      })
      return
    } else if (n === '') {
      wx.showModal({
        title: '提示',
        content: '请输入期数',
        showCancel: false
      })
      return
    } else if (i === '') {
      wx.showModal({
        title: '提示',
        content: '请输入本利率',
        showCancel: false
      })
      return
    }

    let fv = p * (1 + i / 100) ** n
    fv = fv.toFixed(2)
    this.setData({
      result: fv,
      p: p,
      n: n,
      i: i
    })
  }
})

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

<view>
	计算结果：
view>
<view>
	您输入的本金是{{p}}
view>
<view>
	您输入的期数是{{n}}
view>
<view>
	您输入的利率是{{i}}
view>
<view>
	期末本息和是{{result}}
view>