小程序編程第8課

教程

各位戰友，早上好，今天是我們的第8課，這節課我們要做一個：累加器

有一種存錢方法叫做：365天存錢法

也就是從第一天，存1元，第二天存2元…一年的最後一天存365元，如下圖所示

這樣存下來有多少錢呢？

1+2+3+4+5+…+365 = ？

如果按照上面這樣人工累加的話還是很複雜的，如果讓計算機幹這種事，那就很容易。

話不多說，我們先來看看這個小程序，長什麼樣？

這個小程序很簡單，有一行提示文字，還有一個計算按鈕，點擊計算按鈕就能算出365天存錢法能存的總數

問題是，我們該怎麼計算？

我們可以使用

let count = 1 + 2 +3 + 4 +5 ... +365

這樣做是可以計算出來結果的，可是我們要寫365個數字，太麻煩了。

有沒有簡單一點的方法呢？肯定是有的。

我們來分析一下這個計算過程

我們是先1 + 2 = 3
然後再把3 + 3 = 6
然後再把6 + 4 =10
然後再把10 + 5 = 15
然後再把15 + 6 = 21
…
然後再把N + 365 = ?

依次類推，我們就能計算出結果

這看起來有一定規律，我們是拿出兩個數相加，
然後再將結果與後一數字相加，
然後再將結果與後一數字相加，
然後再將結果與後一數字相加，
然後再將結果與後一數字相加，
然後再將結果與後一數字相加，
然後再將結果與後一數字相加，
…

你看到了嗎？這裏重複了很多個句子，這在程序中叫做循環。

所謂的循環是什麼意思？日復一日，年復一年就叫循環。太陽每天都會東昇西落，這就是循環。我們上5天班，休息2天，這也是循環。

我們這節課要學的就是循環語句，爲了處理的就是這種情況。

這個循環語句長這樣

for ([initialization]; [condition]; [final-expression])
   statement

 // initialization 一個表達式 (包含賦值語句) 或者變量聲明
 // condition 一個條件表達式被用於確定每一次循環是否能被執行
 // final-expression 每次循環的最後都要執行的表達式
 // 只要condition的結果爲true就會被執行的語句

這個語句怎麼用呢？

話不多說，我們先新建一個小程序

打開index.wxml文件，刪除第11行代碼，也就是如下代碼

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

在第10行後面增加一行提示和一個按鈕

<view>365天存錢法能存多少錢？</view>
<button type="primary" bindtap="calculate">點我計算</button>

打開index.js文件，在第53行後面添加逗號，並加上如下代碼

calculate: function(){
  
}

calculate，顧名思義，我們就是要在用戶點擊的時候，執行計算

我們的任務就是完善這個函數

結合一下上面我的累加過程，我們現在面臨的實際上是一個填空題

先不管三七二一，把那個語法複製過來

calculate: function(){
  for ([initialization]; [condition]; [final-expression])
    statement
}

現在，作爲新手的我們肯定是懵逼的。

那這樣，我直接把答案寫出來，我們再看看我們爲什麼要這麼寫

calculate: function(){
  let count = 0
  for(let i = 1;i<366;i++){
    count = i + count
  }
}

這樣的語句怎麼讀呢？

我們來看一個流程圖來理解它，流程圖中黃色的標籤裏備註了那旁邊的語句是在for語句中的位置

從這個流程圖我們就能清晰地看出來，我們首先是定義了一個count變量，這個變量是拿來存儲最終的計算結果的。

我們先跟着這個流程圖走一遍

我們這這裏定義了一個count變量和一個i變量，i爲1的時候，判斷i是否小於365，如果小於，那麼就執行

count = count + i

這句話的意思是不是很像，前面我們分析計算過程的那句話

然後再將結果與後一數字相加

這裏的i代表了後一數字，這裏的count代表了前一結果

這裏不理解無所謂，我們看看執行完這行代碼會發生什麼。

執行完之後，count變成了1

也就是做了個算術題 1 + 0 = 1

然後i ++是什麼意思，這是自增運算符，之前提到過。也就是i = i + 1的意思

執行完這行代碼，i就變成了2

然後又會去判斷i是否小於365，如果小於，那麼就執行

count = count + i

此時count 等於多少？

此時執行了如下算術題：1 + 2 = 3

繼續往下，i變成3

然後又會去判斷i是否小於365，如果小於，那麼就執行

count = count + i

此時count 等於多少？

此時執行了算術題：3 + 3 = 6

以此類推

整個過程就執行了這樣的算數

我們是先0 + 1 = 1
然後再把1 + 2 = 3
然後再把3 + 3 = 6
然後再把6 + 4 =10
然後再把10 + 5 = 15
然後再把15 + 6 = 21
…

直到什麼時候呢？

直到i的值爲366的時候，就不再繼續累加了，於是跳出循環，展示count的值

最後，我們再增加幾行代碼展示count的值即可

calculate: function(){
  letcount = 0
  for(let i = 1;i<366;i++){
    count = i + count
  }
  wx.showModal({
    title: count + '',
    showCancel: false
  })
}

然後我們點擊按鈕計算試試，我們能夠看到正確的結果。

我們怎麼快速理解這個循環語句呢？

那就是理解今天這個流程圖，因爲光看這個語句，我們很難看出什麼端倪，但是知道它的執行流程，我們就能夠更好理解循環。

作業

這節課的作業是，模仿開發出這個累加器，截圖發到羣裏

心有餘力的戰友可以挑戰一下這道題：

從1元開始，每天存錢都比前一天多2元，連續存100天，最後會有多少錢呢？

做出來截圖發到羣裏即可

附件

//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
    })
  },
  calculate: function(){
    let count = 0
    for(let i = 1;i<366;i++){
      count = i + count
    }
    wx.showModal({
      title: count + '',
      showCancel: false
    })
  }
})

<!--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>365天存錢法能存多少錢？</view>
    <button type="primary" bindtap="calculate">點我計算</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
    })
  },
  calculate: function(){
    let count = 0
    let step = 1
    for(let i = 1;i<101;i++){
      count = step + count
      step = step + 2
    }
    wx.showModal({
      title: count + '',
      showCancel: false
    })
  }
})

<!--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>100天存錢法能存多少錢？（今天比昨天多存2元）</view>
    <button type="primary" bindtap="calculate">點我計算</button>
  </view>
</view>