小程序编程第9课

教程

各位战友，早上好，今天是我们的第9课。

这节课我们还是学习循环，不过这一次我们换一个语句来实现累加器。

mixin有一个签到活动，从0.000 001BTC开始，每次签到都会比上一次增加0.000 001，我们计算一下，我们需要连续签到多少次，我们才能获得1BTC

这个怎么计算呢？

我们列个式子

1 = 0.000 001 + 0.000 002 + 0.000 003 …

我们不知道要加到什么数才能获得1BTC

上节课我们学的for循环，我们是知道要算多少次，但是这一次我们根本不知道要循环多少次。

而我们的目标就是要计算出循环多少次，那怎么算呢？

把0.000 001 拿来和1比，发现比它小，那就继续加下一个数
加出来的结果再拿来和1比，发现比它小，那就继续加下一个数
加出来的结果再拿来和1比，发现比它小，那就继续加下一个数
加出来的结果再拿来和1比，发现比它小，那就继续加下一个数
加出来的结果再拿来和1比，发现比它小，那就继续加下一个数
加出来的结果再拿来和1比，发现比它小，那就继续加下一个数
加出来的结果再拿来和1比，发现比它小，那就继续加下一个数
…

我们这样一个一个加，我们要加到什么时候结束呢？

我们要累加到结果刚好大于等于1即可。我们把累加的结果定义为count，那终止条件就是count >= 1

加出来的结果再拿来和1比，发现大于等于它，那就不加了

那我们在加的过程中还要数一数我们总共加了多少次，最终展示这个次数给用户看。

如果用流程图来表达，这是个什么样的流程呢？

你可以看到我定义了三个变量，count是用来存那些数字加起来的结果的，i变量是用来计数的，n就代表下一个数

定义完变量之后，我们开始判断，count是否小于1，如果小于那么就继续累加，把count 和 n 相加的结果再存到count里面

然后再计算下一个要加的数，以及计数

然后再判断count是否小于1

如果是，那么继续循环，如果不是，那么跳出循环。

跳出循环之后，我们就可以展示i，这样我们的程序就写完了

那我们该用什么语句来实现这种不知道要循环多少次的循环呢？

那就是while语句

这个语句的句法是这样

while (condition)
  statement

while在这里就叫：当…

condition在这叫：条件

这样我们再来理解这个while语句，那么我们就能看懂了。

也就是，当condition的结果为true，那么我们就执行statement，如果不满足，那么就退出循环！

再看看刚才那个流程图，你发现，我们正好有一个条件，叫做count<1，这个东西是不是就是放在condition的位置呢？是的。

statement 就是我们符合条件会执行的语句，这对应了我们流程图中的

count = count + n
n = n + 0.000001
i++

那，现在我们应该能写出来代码了。

实践一下

如往常一样，新建一个项目

打开index.wxml删除第11行

<text class="user-motto">{{motto}}</text>

在第11行后面添加如下代码

<view>签到多少次才能获得1BTC？</view>
<button type="primary" bindtap="getAnswer">点我获取答案</button>

打开index.js，在第53行后面加一个逗号，然后加上如下代码

getAnswer: function(){
  
}

这里面就是我们要计算的地方

根据流程图，我们要先定义三个变量

getAnswer: function () {
  let count = 0
  let i = 1
  let n = 0.000001
}

接下来该判断count是否小于1了，那就需要用到while语句了

getAnswer: function () {
 let count = 0
 let i = 1
 let n = 0.000001

 while (count < 1) {
   
 }
}

当count<1成立时，那我们需要做什么呢？

那就是继续累加，和计算出下一个数，以及计次

getAnswer: function () {
  let count= 0
  let i = 1
  let n = 0.000001

  while (count < 1) {
    count = count + n
    n = n + 0.000001
    i++
  }
}

这样就做完了吗？

我们还要展示一下 i

wx.showModal({
  title: i +'',
  showCancel: false,
  confirmText: '知道了'
})

这样我们就做完了。

试一试，结果准确，提示结果是1415，这个结果正确吗？

怎么验证呢？

如果我们把退出的条件改为count<0.000006，那么应该是3天，我们看一看，结果是4

因为i的值不正确，那么我们检查一下流程图中的i是否有问题

下表是循环轮次对应i的值

轮次	值
1	2
2	3
3	4

第一轮结束，i的值就是2，这里本身就错了，第1论结束，i的值应该是1才对。

那么我们怎么改呢？

把i的初始值改成0即可。

这样的话，第一轮结束的时候，i的值就变成了1，第二论循环结束的时候，i的值就变成了2，以此类推

我们改一下i的初始值，看看是不是这样

结果验证正确，那么我们可以把条件语句改回来

再试一次，1414次

今天的课程就讲到这里，下面是本次的作业

作业

1，模仿开发出这款while循环的累加器，并截图发到群里
2，假如要存50000元，第一次存200，此后每次都比前一次多存10元，那么需要多少次就能达到目标呢？做好截图发到群里

附件

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

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
    })
  },
  getAnswer: function () {
    let count = 0
    let i = 0
    let n = 0.000001

    while (count < 1) {
      count = count + n
      n = n + 0.000001
      i++
    }

    wx.showModal({
      title: i + '',
      showCancel: false,
      confirmText: '知道了'
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <view>签到多少次才能获得1BTC？</view>
    <button type="primary" bindtap="getAnswer">点我获取答案</button>
  </view>
</view>

作业参考答案

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

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
    })
  },
  getAnswer: function () {
    let count = 0
    let i = 0
    let n = 200

    while (count < 50000) {
      count = count + n
      n = n + 10
      i++
    }

    wx.showModal({
      title: i + '',
      showCancel: false,
      confirmText: '知道了'
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <view>目标存50000元，第一次存200，此后每次都比前一次多存10元，那么需要多少次就能达到目标呢？</view>
    <button type="primary" bindtap="getAnswer">点我获取答案</button>
  </view>
</view>