????????第三節(jié)課又來了。今天，我們將通過小程序頁面移動JS前后端交互的實現(xiàn)包括：
JS傳靜態(tài)數(shù)據(jù)
JS傳輸列表數(shù)據(jù)，循環(huán)輸出
點擊按鈕刷新時間
點擊按鈕自動刷新時間
1. 通過JS靜態(tài)數(shù)據(jù)的傳輸
????????或者按照之前的小程序課程列表learning模塊繼續(xù)推進，在JS設(shè)置端定義數(shù)據(jù)，例如timestring變量為“default time這樣的字符串直接在data設(shè)置在中間。
/*** 頁面初始數(shù)據(jù)*/data: {timestring: "default time"},
????????上面在index.js在文件中定義timestring，在WXML這個變量可以在中間使用，使用方法是{{timestring}}。其中timestring也可以換成任何你想用的其他字符串，只要JS端和WXML可以用一個。(但是小程序不能保留字段，比如data、this等）
時間：{{timestring}}
????????除上述直接在全局變量之外data中直接定義，還可以在JS使用文件函數(shù)this.setData()動態(tài)定義變量和值。index.js在文件中找到onLoad函數(shù)，這是小程序默認帶來的函數(shù)，在index.wxml加載時會觸發(fā)onLoad函數(shù)，所以我們可以在頁面加載前做一些數(shù)據(jù)賦值操作，比如this.setData()設(shè)置timestring另一個值?，F(xiàn)在想象一下，index.wxml中的timestring會顯示哪個值？default time”還是“2022-04-17 20:00:00”？
/*** 頁面的初始數(shù)據(jù)*/data: {timestring: "default time"},/*** 生命周期函數(shù)--加載監(jiān)控頁面*/onLoad: function (options) {this.setData({"timestring": "2022-04-17 20:00:00"}；},
????????看下結(jié)果，timestring還是顯示2022-04-17 20:00:00，即通過this.setData()設(shè)定的值涵蓋了之前默認的default time”。
2. 通過JS傳遞列表數(shù)據(jù)
? 通過JS例如，我們不僅可以傳輸字符串類型的數(shù)據(jù)，還可以傳輸數(shù)組類型的數(shù)據(jù)index.js目前的小程序課程列表數(shù)據(jù)可以直接定義，也可以直接定義onLoad動態(tài)設(shè)置函數(shù)。
/*** 頁面的初始數(shù)據(jù)*/data: {timestring: "default time",courseList: [{"id":"1","title":"小程序HelloWorld","link":"","status":"已完成"},{"id":"2","title":"小程序頁面和樣式改進","link":"","status":"已完成"},{"id":"3","title":"小程序JS前后端交互","link":"","status":"進行中"}]},
? 在index.wxml中可以通過{{courseList}}查看數(shù)據(jù)，發(fā)現(xiàn)會顯示[object Object],[object Object],[object Object]”，是對象類型數(shù)據(jù)，無法直接查看，但是我們可以通過循環(huán)輸出數(shù)據(jù)。
????????我們看下index.wxml以前把所有的數(shù)據(jù)都寫了一遍，現(xiàn)在我們可以通過wx:for實現(xiàn)數(shù)組的遍歷，無論多少行數(shù)據(jù)只能寫一次，動態(tài)輸出。以下代碼非常簡單，可以替換以前的冗長代碼。
序號 標題 狀態(tài) 查看 {{item.id}} {{item.title}} {{item.status}} 查看
????????擴大學(xué)習(xí)，通過wx:for通過wx:if和wx:else可根據(jù)變量值判斷該行是否輸出。更多信息參考文件：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/。
實時刷新當(dāng)前按鈕
??????? JS前后端交互不僅僅是從JS向WXML傳遞數(shù)據(jù)，從WXML觸發(fā)事件到JS例如，用戶可以在界面中點擊按鈕觸發(fā)JS中的函數(shù)。
????????然后是前面顯示時間的功能，我們希望實時顯示當(dāng)前時間index.wxml添加一個刷新按鈕，希望點擊后刷新顯示當(dāng)前時間button標簽中使用bindtap綁定一個事件，名所謂，這里用refresh只要前后端一致。
????????在index.js重新定義一個refresh函數(shù)與前端一致。中間做了幾件事，第五行通過console.log()在控制臺中輸出信息，通常用于調(diào)試代碼。第7行開始調(diào)用之前定義的函數(shù)獲取當(dāng)前時間，并將時間賦值timestring在中間，這樣前端就可以顯示時間了。第12行開始顯示操作提示，每次點擊界面中的刷新按鈕，時間將動態(tài)更新為當(dāng)前的實時時間，并將出現(xiàn)刷新成功提示，并將在控制臺中輸出console.log()中的數(shù)據(jù)，如果timestring顯示結(jié)果與預(yù)期不同，可以通過console.log()調(diào)試代碼。參考文件:https://developers.weixin.qq.com/miniprogram/dev/reference/api/console.log.html
/*** 刷新操作*/refresh: function (e) {????console.log(e);var time = util.formatTime(new Date());this.setData({"timestring": time}；wx.showToast({title: 刷新成功，}；},
??????? wx.showToast除了定義title還可以定義icon，可選值有：
success，顯示成功圖標
error，顯示失敗圖標
loading，顯示加載圖標
none，不顯示圖標
????????嘗試不同的顯示樣式很方便，更多信息可以參考官方文件：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html。
自動更新時間不需要刷新。
????????當(dāng)前時間實時顯示在頁面上。事實上，我們不必每次都點擊刷新按鈕。當(dāng)然，以上數(shù)據(jù)是通過刷新按鈕更新的，以觸發(fā)頁面中的事件JS處理事件并為變量設(shè)置數(shù)據(jù)。為了更自然地實時顯示當(dāng)前時間，我們可以JS中通過setInterval按固定頻率設(shè)置timestring變量。
??????? setInterval一個函數(shù)可以定期執(zhí)行，包括兩個參數(shù)。第一個參數(shù)是需要執(zhí)行的函數(shù)，第二個參數(shù)是間隔多少毫秒執(zhí)行一個函數(shù)。設(shè)置數(shù)據(jù)時注意不要再使用this.setData，而要先定義var that=this;再用that.setData設(shè)置。
/*** 生命周期函數(shù)--加載監(jiān)控頁面*/onLoad: function (options) {this.setData({"timestring": "2022-04-17 20:00:00"}；var that = this;var a = setInterval(function(){console.log("setInterval");var time = util.formatTime(new Date());that.setData({"timestring": time}；}，1000)；},
????????這樣要刷新操作，頁面會自動加載當(dāng)前時間，比如2022年4月2日凌晨3點多。
????????這里有更多文檔參考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/setInterval.html。
作業(yè)
? 這個操作也是完成幾個操作，提交結(jié)果截圖和代碼截圖。
在JS列表數(shù)據(jù)設(shè)置在中間WXML文件中使用wx:for循環(huán)輸出
自動刷新設(shè)置時間
回顧7天入門小程序開發(fā)系列文章
