小程序编程第19课

教程

各位战友早上好，这节课我们接着做这个复利计算器小程序。

首先打开上节课创建的项目。为了防止我们的之后写越来越多的代码，导致可能会出现的一些问题。

比如不小心删除了某个文件，不小心改动了某些代码，导致整个项目无法运行。进而需要重新创建项目，重新来一遍，那就非常麻烦。

我们需要一台时光机，保障我们随意开发。也就是说即便是出了问题，也能够让我们随时返回到问题发生之前。

怎么办呢？

我们要学会使用版本控制工具，这个功能可以让我们回到历史任何版本。只要你曾经标记过那个版本，那么你就能回到那个版本

这就好像很多写文档的工具都有查看文档历史修改记录一样，我们写的代码也要能够查看修改记录，甚至可以恢复我们删除掉的文件。

这么厉害的功能，却非常简单。

我们来看看怎么才能做到。

打开项目后，开发工具右上角版本管理按钮

首次进入需要点击初始化Git仓库，然后点击确定

这样我们的代码就被管理起来了。

我们来试一下，再次点击版本管理，版本管理界面就隐藏了

然后我们把Index.js文件打开，然后随便输入一些字符，故意让代码出错。

然后保存一下，我们发现报错了

然后我们怎么恢复呢？

这种情况，我们可以用ctrl+z，但是如果我们已经改了很久就不可以用ctrl+z来返回了，那我们怎么办？

我们再次打开版本管理工具

我们可以看到界面左边，工作区右边有个数字标号，这个数字意味着我们更改了几个文件。

目前我们修改了一个文件，我们再往右边看看改了什么文件

我们发现正好是我们更改的文件，我们可以选中它，然后它就会在右边展示哪些代码被改动了。

这些被改动的文件都在工作区内

红色的就是被删除掉的代码，绿色的就是被增加的代码

我们怎么还原呢？

我们可以用鼠标右键点击文件
然后点击，重置“index.js”，然后出现一个提示窗，点击确定。

然后就还原为没有修改前的状态了

那我们如果是做了一些正常的改动，我们想要保存那个版本怎么办？

比如我们在Index.js文件中随便增加一个函数

sayHello: function () {

}

然后我们保存下

同样，我们打开版本管理

我们已经看到，index.js被修改了

然后我们要保存这个版本，选中我们需要保存的文件，然后我们可以在下方的输入框填上标题，点击提交即可

标题是可以随便写的，这就相当于我们做的记号，最好是有意义的标题。这样你以后想恢复到某个版本的时候，就能够一目了然

提交之后，文件就会从工作区消失

我们可以点击历史查看，我们保存的历史版本
我们选中文件提交之后就会创建一个版本，就相当于给我们的代码照了个照片，这样我们以后可以往回翻照片，就能找到之前是如何写的

如果我们想要回到过去的某个版本，我们可以鼠标右键点击你想要回去的版本

然后点击将HEAD重置到“xxxxx”这里的xxxxx相当于那个版本的身份证号，这是唯一的

然后点击确定，取消勾选「保持工作区内容」我们就回到那个版本了

这个操作要谨慎，因为你一不小心就可能回到一个你并不想回到的版本，比如你已经保存了几十个版本了，如果你看错了，就很可能退回去很多个版本，这种情况再想要恢复就很麻烦了，尽管是有办法的，但是很难

关于版本管理就介绍到这

现在我们接着上节课的开发

我们上节课已经把界面画好，现在还缺数据

我们要把用户输入的数据通过计算然后输出。

我们如何获得用户输入的数据呢？我们要靠事件。

因为输入是一个事件。所以我们可以在input组件上面传递一个事件处理函数去接收用户的输入。

我们打开Index.wxml文件

然后找到第一个Input框，它有个属性叫做bindinput，属性值就是我们自定义的函数名

因为这里是输入本金，所以我们的事件处理函数名叫什么比较合适呢？因为本金一般用p表示

可以是handlePInput，意思是，处理本金输入。

然后我们再给期数和利率的输入框也加上bindInput属性

期数的处理函数名：handleNInput
利率的处理函数名：handleIInput

<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 type="primary">开始计算button>

然后我们需要在index.js中定义这些3个处理函数

打开index.js文件，在getUserInfo函数后面增加上面三个函数

handlePInput: function(e){

},
handleNInput: function(e){

},
handleIInput: function(e){

},

为什么我们这里每个函数都有一个参数e呢？

e是代表事件参数，也就是发生了输入事件，这个e就是事件携带的信息。

比如小明家有人结婚了，是谁结婚了呢？是小明的哥哥。

小明家有人结婚了，这是个事件。这个事件的详细信息就是：小明的哥哥结婚了

同样，用户发生了输入事件，这个事件的详细信息就会被传递到处理函数里。详细信息里包含用户输入的内容。

这个e，是event的缩写，event就是事件的意思。当然你也可以取其它的名字，它仍然能够传递过来。我们需要知道的是这个e是一个对象，这个e里面携带了什么东西呢？

我们可以直接打印出来看看

handlePInput: function(e){
  console.log(e)
},

保存一下，然后在本金的输入框输入一个字符

然后我们就在console面板看到了打印出来了一个对象，这个对象就是e

我们可以用鼠标展开这个对象，我们能够看到它有多个属性，我们看detail这个属性，这个属性的值又是一个对象，所以我们可以接着展开

展开detail之后，我们发现value正好就是我们输入的值

然后我们怎么访问到这个value呢？

还记得如何访问对象的属性吗？那就是用点. 我们可以这样访问到这个value，我们先访问到detail属性，e.detail，然后又因为e.detail是一个对象，所以我们可以继续在detail后面加点.

于是我们可以这样访问e.detail.value

我们可以打印出来看一看，是不是访问到了

handlePInput: function(e){
  console.log(e.detail.value)
},

保存后，我们输入试试

你可以看到我们输入之后，就打印出了我们输入框的内容了

现在，我们需要把这些用户输入的数据存起来，然后等用户点击开始计算按钮的时候，我们再把这些数据拿出来计算

我们需要定义3个变量来保存我们的三个数据

我们可以定义到哪里呢？

我们可以定义到调用Page函数外面

我们的处理函数是位于Page函数的参数对象内，我们可以访问外界的变量。这里涉及的知识点是之前讲过的作用域

因此我们在可以在这个文件的开头定义如下三个变量（也可以在结尾）

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

因为都是一个字母，所以我为了防止后期自己忘记每个字母的意思，特意写了注释。为什么我都赋值了0呢？这叫做初始化，按照惯例，数字变量初始化都是赋值0，字符串的变量都是赋值空字符串

然后我们就要把每个用户输入的数据都保存到各自的变量里。

handlePInput: function(e){
  p= e.detail.value
},
handleNInput: function(e){
  n = e.detail.value
},
handleIInput: function(e){
  i = e.detail.value
},

然后我们就把用户输入的数据保存起来了

这节课我们就讲到这，然后我们要保存一下这个版本，怎么做？

打开版本管理，勾选工作区所有文件，然后填写标题，然后点击提交即可

留下一个思考题，目前按钮还没有绑定处理事件，依样画葫芦，给按钮绑定一个事件处理函数吧！

作业

根据教程写出相应代码，截图发到群里

附件

//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
  },
})

<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 type="primary">开始计算button>