微信小程序開發入門（六）

一、條件語句和數學函數的使用　　案例：

y=|x| (x<0)

y=e的x次方*sinx  （0<=x<10）

y=x的3次方  （10<=x<20）

y=(3+2*x)lnx   (x>=20)

<!--index.wxml-->
<view class='box'>
  <view class="title">條件語句和數學函數</view>
  <view>
    <input placeholder="請輸入x的值" bindblur="calc"></input>
  </view>
  <view>計算y的值為:{{y}}</view>
</view>

/* pages/index/index.wxss */

input {
  margin: 20px 0; /*設置input組件上下邊距為20px，左右邊距為0*/
  border-bottom: 1px solid blue; /*設置input組件下邊框粗細為1px、實心、藍色*/
}

//index.js

Page({
  //事件處理函數
  calc:function(e){
    var x, y;//定義局部變量x和y
    x = e.detail.value;//獲取input組件的value值並賦值給x
    if(x<0){//根據x值進行判斷，並求出y的值
    y = Math.abs(x);
    }else if(x<10){
      y=Math.exp(x)*Math.sin(x);
    }else if(x<20){
      y=Math.pow(x,3);
    }else{
      y=(3+2*x)*Math.log(x);
    }
    this.setData({
      y:y//將局部變量y賦值給綁定變量y,把y的值通過setData函數返回到wxml文件，也就是視圖層
    })
  }
})

二、JavaScript 中的邏輯運算符 &&button組件的使用方法　　案例：學生成績平均分計算

<!--index.wxml-->
<view class='box'>
  <view class='title'>成績計算器</view>
  <!--placeholder-class設置提示文本樣式，在wxss里面定義，樣式名placeholder；bindinput輸入時引發的事件，調用的nameInput函數；type='number'整數，輸入時彈出不帶小數點的數字鍵盤-->
  <input placeholder="請輸入你的名字" placeholder-class="placeholder" bindinput='nameInput'></input>
  <input placeholder="請輸入語文成績" placeholder-class="placeholder" bindinput='chineseInput' type='number'></input>
  <input placeholder="請輸入數學成績" placeholder-class="placeholder" bindinput='mathInput' type='number'></input>
  <!--bindtap點擊按鈕事件對應的事件函數mysubmit，js中定義-->
  <button bindtap='mysubmit'>提交</button>
  <!--hidden屬性對應的flag，默認是true，隱藏的，通過flag控制下方區域是否顯示；整體的布局和樣式用的content-->
  <view hidden='{{flag}}' class='content'>
    <!--內嵌了四個view組件，對應的樣式屬性content-item；{{name}}數據的綁定-->
    <view class='content-item'>姓名:{{name}}</view>
    <view class='content-item'>語文成績：{{chinese_score}}</view>
    <view class='content-item'>數學成績:{{math_score}}</view>
    <view class='content-item'>平均分:{{avrage}}</view>
  </view>
</view>

/* pages/index/index.wxss */

page {/* 針對整個頁面*/
  background: #f1f0f6;
}

.placeholder {/* 占位符文字樣式*/
  font-size: 15px;
}

input {/* input組件樣式*/
  background: #fff;
  height: 120rpx;
  margin: 10px;/*邊距*/
  padding-left: 8px;/* 左內邊距*/
  border: solid 1px silver;
}

button {
  margin: 30rpx 50rpx;
  background-color: red;
  color: white;/*文本顏色*/
}

.content {
  background: #fff;
  padding: 10px;
  color: #f00;
}

.content-item {
  padding: 3rpx;
  font-size: 16px;
  line-height: 30px;
}

//index.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    /**flag: true下面顯示結果的區域不顯示；綁定的數據一開始都是沒有數值的*/
    flag: true,
    name: '',
    chinese_score: '',
    math_score: '',
    avrage: ''
  },
  //事件綁定函數
  nameInput: function(e) {
    this.setData({
      name: e.detail.value
    });
  },
  chineseInput: function(e) {
    this.setData({
      chinese_score: e.detail.value
    });
  },
  mathInput: function(e) {
    this.setData({
      math_score: e.detail.value
    });
  },
  mysubmit: function() {
    if (this.data.name == '' || this.data.chinese_score == '' || this.data.math_score == '') {
      return;
    } else {
      //*1是為了字符變數字,一開始輸入的數字默認是字符類型，如果不乘1，就是字符串相加，結果就不對了
      var avg = (this.data.chinese_score * 1 + this.data.math_score * 1) / 2;
      this.setData({
        avrage: avg,
        flag: false
      });
    }
  }
})

 

 

 button組件—常用屬性 

屬性合法值 

三、JavaScript循環語句的執行過程 &&JavaScript中全局對象函數的使用方法 &&全局變量的定義和使用方法　　案例：利用循環語句求兩個整數間數字之和

<!--index.wxml-->
<view class='box'>
  <view class='title'>利用循環語句求和</view>
  <view>
    <input placeholder='請輸入起點數值' type='number' bindblur='startNum'></input>
    <input placeholder='請輸入終點數值' type='number' bindblur='endNum'></input>
  </view>
  <view>兩個數之間的和為：{{sum}} </view>
  <button type='primary' bindtap='calc'>求和</button>
</view>

/* pages/index/index.wxss */

input {
  border-bottom: 1px solid blue; /* 添加input組件的下邊框線 */
  margin: 20px 0; /* input組件上下外邊距為20px，左右外邊距為0 */
}

button {
  margin-top: 20px; /* 設置button組件的上邊距為20px */
}

//index.js
var start, end, sum; //定義起點數、終點數和求和結果三個全局變量
Page({
  startNum: function(e) {
    start = parseInt(e.detail.value); //將input組件value值轉換為整數並賦值，默認輸入的是字符類型
  },
  endNum: function(e) {
    end = parseInt(e.detail.value); //將input組件value值轉換為整數並賦值
  },
  calc: function() {
    sum = 0;
    for (var i = start; i <= end; i++) {
      sum = sum + i; //利用for循環求和
    }
    this.setData({
      sum: sum //將全局變量sum的值渲染到視圖層
    })
  }
})

 

 

JavaScript 支持的循環類型包括：

for：多次遍歷代碼塊

for/in：遍歷對象屬性

while：當指定條件為 true 時循環一段代碼塊

do/while：當指定條件為 true 時循環一段代碼塊 

for 循環—語法

　　for (語句 1; 語句 2; 語句 3)

　　　　{     

　　　　要執行的代碼塊

　　　　}

　　語句 1 在循環（代碼塊）開始前執行

　　語句 2 定義運行循環（代碼塊）的條件

　　語句 3 在循環（代碼塊）已被執行之后執行 

for/in 循環—樣例
　　循環遍歷對象的屬性。例如：

var person =  {fname:"Bill", lname:"Gates",age:62};  var text = ""; for (var x in person) {     text += person[x]; } 

　　循環結束后，text的值為："BillGates62" 

while 循環—語法
　　在指定條件為真時循環執行代碼塊。語法為： while (條件) { 要執行的代碼塊 }
do/while 循環—語法 
　　do { 要執行的代碼塊 } while (條件);　

JavaScript全局對象

　　可用於所有內建的 JavaScript 對象，其常用 屬性和方法如表所示

　　

 

全局變量的定義和使用 

　　在所有函數之外定義的變量稱為全局變量，該變量可以在該文件的所有函數中使用。

 

四、對象的概念 &&JavaScript中Array對象函數的使用方法&&Number對象函數的使用方法　　案例：隨機數求和 

<!--index.wxml-->
<view class="box">
  <view class='title'>隨機數求和</view>
  <view>產生的隨機數列為：</view>
  <!--通過一個列表渲染，rand是從js文件中傳過來的一個數組，item顯示的數組中每一個元素的值-->
  <view wx:for="{{rand}}">{{item}}</view>
  <view>隨機數列的和為：{{sum}}</view>
  <button type='primary' bindtap='newRand'>產生新的隨機數</button>
</view>

//index.js
var rand, sum;//定義全局變量
function createRand() {//自定義的全局函數
  rand = []; //初始化數組變量
  sum = 0; //初始化sum變量
  for (var i = 0; i < 6; i++) {
    var r = (Math.random() * 100).toFixed(2) * 1; //產生100以內的保留小數點后2位的隨機數並轉換為數值類型；Math.random() 產生0-1的隨機數，*100,0-100的隨機數，toFixed(2)產生的隨機數保留后兩位小數，默認產生的字符類型，*1，變成數值類型
    rand.push(r); //將產生的隨機數添加到數組中
    sum += rand[i]; //隨機數列求和
    console.log(rand[i]); //在控制台顯示數組元素
  }
  console.log(sum);
};

Page({
  onLoad: function () {
    createRand(); //調用產生隨機數函數；一開始運行的時候就顯示了一系列數組元素，因為在onLoad里直接調用了createRand函數，然后把函數元素直接發送到視圖層，然后在這邊顯示了，這樣把邏輯層的rand和sum直接渲染到了wxml文件。
    this.setData({
      rand: rand,
      sum: sum
    })
  },
  newRand: function () {
    createRand(); //調用產生隨機數函數
    this.setData({
      rand: rand,
      sum: sum
    })
  }
})

對象的概念 

 　　對象是擁有屬性和方法的數據，屬性是靜態數據， 方法是能夠在對象上執行的動作，即動態數據。 

　　JavaScript 中的常用對象包括：字符串、數字、    數組、日期，等等。 

Array 對象 

　　用於在單個的變量中存儲多個值，其常用屬性和方法如表所示

　　

　　

 

 

Number 對象 

　　該對象是原始數值的包裝對象，其常用屬性和方法如表所示

　　

　　

五、setTimeout()的使用方法&&clearTimeout()的使用方法&&setInterval()的使用方法&&clearInterval()的使用方法 案例：計時器 

案例描述 ：

設計一個實現倒計時功能的小程序，小程序運行后，首先顯示空白界面，過2秒后才顯示計時界面，點擊“開始計時”按鈕后開始倒計時，點擊“停止計時”按鈕后停止計時。 

 

<!--index.wxml-->
<view class='box' hidden='{{hidden}}'>
  <view class='title'>計時器</view>
  <view class='time'>{{num}}</view>
  <view class='btnLayout'>
    <button bindtap='start'>開始計時</button>
    <button bindtap='stop'>停止計時</button>
  </view>
</view>

/* pages/index/index.wxss */

.time {
  width: 90%;
  line-height: 200px; /* 設置高度並使文字垂直居中 */
  background-color: yellow;
  color: red;
  font-size: 100px;
  text-align: center;
  border: 1px solid silver;
  border-radius: 30px; /*邊框半徑， 四個圓角過渡 */
  margin: 15px;
}

.btnLayout {
  display: flex;
  flex-direction: row;
}

button {
  width: 45%;
}

//index.js

var num = 60; //計時器顯示的數字
var timerID; //計時器ID
Page({
  data: {
    hidden: true, //小程序運行時不顯示計時界面
    num: num //將全局變量賦值給綁定變量
  },

  onLoad: function (options) {//程序一加載就調用這個函數
    var that = this;//setTimeout函數中用到了回調函數"() => {that.show()}"，回調函數一調用，有可能改變this的值，因此要把this賦值給that
    setTimeout(() => {
      that.show()
    }, 2000) //2秒鍾后顯示計時界面；程序一加載，2秒鍾后調用回調函數() => {that.show()}只調用一次,回調函數中調用了show函數
  },

  show: function () { //顯示計時界面函數
    var that = this;
    that.setData({
      hidden: false //顯示計時界面
    })
  },

  start: function () { //開始計時函數
    var that = this;
    timerID = setInterval(() => {
      that.timer()
    }, 1000) //每隔1s調用一次timer函數；第一個參數是回調函數，第二個參數是時間
  },

  stop: function () { //停止計時函數
    clearInterval(timerID) //清除計時器
  },

  timer: function () { //計時函數
    var that = this;
    console.log(num)
    if (num > 0) {
      that.setData({
        num: num-- //每次減1
      })
    } else {
      that.setData({
        num: 0
      })
    }
    console.log(num)
  }

})

/**app.wxss**/
.box{
  border: 1px solid silver;
  margin: 10rpx;
  padding: 20rpx;
}
.title{
font-size: 25px;
text-align: center;
margin-bottom: 15px;
color: rgb(241, 143, 143);
}

JavaScript中的4個函數： 

setTimeout()函數

　　setTimeout(function callback, number delay, any rest)。設定一個計時器，在計時到期以后執行注冊的回調函數。隔一定時間后只執行一次

　　返回值是number，第一個參數回調函數，第二個參數設定的時間間隔，第三個參數任意類型的rest，附近的參數，可以有多個

clearTimeout() 函數

　　clearTimeout(number timeoutID)。取消由 setTimeout 設置的計時器。參數 timeoutID為 要取消的計時器的 ID。 
setInterval() 函數

　　setInterval(function callback, number delay, any rest)。設定一個計時器，按照指定的周期（以毫秒計）來執行注冊的回調函數。 每隔一定時間要執行一次

　　返回值是number
clearInterval()函數

　　clearInterval(number intervalID)。取消 由 setInterval 設置的計時器。參數 intervalID為要取消的計時器的ID。 

 

六、綜合運用雙重for循環、數組、 Math函數、全局對象函數等　　案例：自動隨機變化的 三色旗 

案例描述：設計一個小程序，開始時界面上顯示一個三色旗和一個按鈕，當點擊按鈕時，三色旗的顏色會發生隨機變化，即使不點擊按鈕，三色旗的顏色也會每隔一定時間自動發生變化。

創建隨機顏色的設計思想：從構成顏色的16個16進制 字符（0～F）中隨機隨機找出6個字符構成一種顏色， 連續找3次就可以生成3種隨機顏色。

<!--index.wxml-->
<view class="box">
  <view class='title'>變化的三色旗</view>
  <view class="flex-wrp">
    <view class="item" style="background-color:{{color1}}"></view>
    <view class="item" style="background-color:{{color2}}"></view>
    <view class="item" style="background-color:{{color3}}"></view>
  </view>
  <button type='primary' class='btn' bindtap="changeColor">改變顏色</button>
</view>

/**app.wxss**/
.box{
  border: 1px solid silver;
  margin: 20rpx;
  padding: 20rpx;
}
.title{
font-size: 25px;
text-align: center;
margin-bottom: 15px;
color: rgb(241, 143, 143);
}

/* pages/index/index.wxss */
.flex-wrp{
  margin-top: 50rpx;
  display:flex;
  flex-direction: row;
}
.item{
  width: 300rpx;
  height: 500rpx;  
}
.btn{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 100% !important;
}

//index.js

Page({
  createColor: function () { //自定義函數，創建三種隨機顏色
    var color = []; //定義數組
    var letters = '0123456789ABCDEF'; //定義16進制顏色字符集
    for (var i = 0; i < 3; i++) { //利用循環創建三種隨機顏色
      var c = '#';
      for (var j = 0; j < 6; j++) { //創建一種由6個16進制字符構成的隨機顏色
        c += letters[Math.floor(Math.random() * 16)]
      }
      color.push(c); //將創建的顏色加入顏色數組
    }
    console.log(color); //在console面板中顯示顏色值
    this.setData({ //將創建的顏色渲染到視圖層
      color1: color[0],
      color2: color[1],
      color3: color[2]
    })
  },

  onLoad: function (e) {//onLoad生命周期函數
    this.createColor(); //利用this調用本類定義的函數
    setInterval(() => { //每隔5秒鍾調用一次this.createColor()函數
      this.createColor();
    }, 5000);
  },

  changeColor: function (e) { //點擊按鈕時的事件函數
    this.createColor();
  }
})

Math.random() * 16：0到16之間，不包括16的浮點數

Math.floor(Math.random() * 16)：0到16之間，不包括16的整數。即0-15