小程序編程第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>