????????第三节课又来了。今天，我们将通过小程序页面移动JS前后端交互的实现包括：
JS传静态数据
JS传输列表数据，循环输出
点击按钮刷新时间
点击按钮自动刷新时间
1. 通过JS静态数据的传输
????????或者按照之前的小程序课程列表learning模块继续推进，在JS设置端定义数据，例如timestring变量为“default time这样的字符串直接在data设置在中间。
/*** 页面初始数据*/data: {timestring: "default time"},
????????上面在index.js在文件中定义timestring，在WXML这个变量可以在中间使用，使用方法是{{timestring}}。其中timestring也可以换成任何你想用的其他字符串，只要JS端和WXML可以用一个。(但是小程序不能保留字段，比如data、this等）
时间：{{timestring}}
????????除上述直接在全局变量之外data中直接定义，还可以在JS使用文件函数this.setData()动态定义变量和值。index.js在文件中找到onLoad函数，这是小程序默认带来的函数，在index.wxml加载时会触发onLoad函数，所以我们可以在页面加载前做一些数据赋值操作，比如this.setData()设置timestring另一个值。现在想象一下，index.wxml中的timestring会显示哪个值？default time”还是“2022-04-17 20:00:00”？
/*** 页面的初始数据*/data: {timestring: "default time"},/*** 生命周期函数--加载监控页面*/onLoad: function (options) {this.setData({"timestring": "2022-04-17 20:00:00"}；},
????????看下结果，timestring还是显示2022-04-17 20:00:00，即通过this.setData()设定的值涵盖了之前默认的default time”。
2. 通过JS传递列表数据
? 通过JS例如，我们不仅可以传输字符串类型的数据，还可以传输数组类型的数据index.js目前的小程序课程列表数据可以直接定义，也可以直接定义onLoad动态设置函数。
/*** 页面的初始数据*/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}}查看数据，发现会显示[object Object],[object Object],[object Object]”，是对象类型数据，无法直接查看，但是我们可以通过循环输出数据。
????????我们看下index.wxml以前把所有的数据都写了一遍，现在我们可以通过wx:for实现数组的遍历，无论多少行数据只能写一次，动态输出。以下代码非常简单，可以替换以前的冗长代码。
序号 标题 状态 查看 {{item.id}} {{item.title}} {{item.status}} 查看
????????扩大学习，通过wx:for通过wx:if和wx:else可根据变量值判断该行是否输出。更多信息参考文件：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/。
实时刷新当前按钮
??????? JS前后端交互不仅仅是从JS向WXML传递数据，从WXML触发事件到JS例如，用户可以在界面中点击按钮触发JS中的函数。
????????然后是前面显示时间的功能，我们希望实时显示当前时间index.wxml添加一个刷新按钮，希望点击后刷新显示当前时间button标签中使用bindtap绑定一个事件，名所谓，这里用refresh只要前后端一致。
????????在index.js重新定义一个refresh函数与前端一致。中间做了几件事，第五行通过console.log()在控制台中输出信息，通常用于调试代码。第7行开始调用之前定义的函数获取当前时间，并将时间赋值timestring在中间，这样前端就可以显示时间了。第12行开始显示操作提示，每次点击界面中的刷新按钮，时间将动态更新为当前的实时时间，并将出现刷新成功提示，并将在控制台中输出console.log()中的数据，如果timestring显示结果与预期不同，可以通过console.log()调试代码。参考文件: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。
自动更新时间不需要刷新。
????????当前时间实时显示在页面上。事实上，我们不必每次都点击刷新按钮。当然，以上数据是通过刷新按钮更新的，以触发页面中的事件JS处理事件并为变量设置数据。为了更自然地实时显示当前时间，我们可以JS中通过setInterval按固定频率设置timestring变量。
??????? setInterval一个函数可以定期执行，包括两个参数。第一个参数是需要执行的函数，第二个参数是间隔多少毫秒执行一个函数。设置数据时注意不要再使用this.setData，而要先定义var that=this;再用that.setData设置。
/*** 生命周期函数--加载监控页面*/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)；},
????????这样要刷新操作，页面会自动加载当前时间，比如2022年4月2日凌晨3点多。
????????这里有更多文档参考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/setInterval.html。
作业
? 这个操作也是完成几个操作，提交结果截图和代码截图。
在JS列表数据设置在中间WXML文件中使用wx:for循环输出
自动刷新设置时间
回顾7天入门小程序开发系列文章
