7天入门小程序开发 | 03-小程序JS前后端交互

        第三节课又来啦，今天我们将会让小程序页面动起来，通过JS实现前后端的互动，包括：

• JS传静态数据
• JS传递列表数据并循环输出
• 点击按钮刷新时间
• 无需点击按钮自动刷新时间

1. 通过JS传递静态数据

        还是按照之前的“小程序课程列表”learning模块继续推进，在JS端定义数据，比如设置timestring变量为“default time”这样的字符串，直接在data中进行设置。

<!-- pages/learning/index.js -->
/**
 * 页面的初始数据
 */
data: {
    timestring: "default time"
},

        上面在index.js文件中定义了timestring，在WXML中就可以使用这个变量了，使用方式是{{timestring}}。其中timestring也可以换成其他任何你想用的字符串，只要JS端和WXML中使用的是一个即可。（但是小程序保留字段不能用，比如data、this等）

<!-- pages/learning/index.wxml -->
<view>时间：{{timestring}}</view>

        除了上面直接在全局变量data中直接定义，还可以在JS文件的函数中使用this.setData()动态的定义一个变量和值。还是在index.js文件中，找到onLoad函数，这个是小程序默认自带的函数，在index.wxml加载的时候就会触发onLoad函数，因此我们可以在页面加载前做一些数据赋值的操作，比如通过this.setData()设置timestring为另外一个值。现在试想，index.wxml中的timestring会显示哪个值呢？是“default time”还是“2022-04-17 20:00:00”？

<!-- pages/learning/index.js -->
/**
 * 页面的初始数据
 */
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函数中动态设置。

<!-- pages/learning/index.js -->
/**
 * 页面的初始数据
*/
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实现数组的遍历，无论多少行数据都可以只写一次而动态输出。下面的代码很简洁了，可以替换之前冗长的代码。

<!-- pages/learning/index.wxml -->
<view class="learning-list">
    <view class="item-wrap table-title">
        <view class="index">序号</view>
        <view class="title">标题</view>
        <view class="more">状态</view>
        <view class="more">查看</view>
    </view>
    <view class="item-wrap" wx:for="{{courseList}}" wx:key="index">
        <view class="index">{{item.id}}</view>
        <view class="title">{{item.title}}</view>
        <view class="more">{{item.status}}</view>
        <navigator url="../learning/detail?id={{item.id}}" open-type="">
          <view class="more">查看</view>
        </navigator>
    </view>
</view>

        扩展学习，通过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”，只要前后端一致即可。

<!-- pages/learning/index.wxml -->
<button class="button" type="primary" bindtap="refresh">刷新</button>

        在index.js中重新定义一个refresh函数，和前端保持一致。中间做了几个事情，第5行通过console.log()在控制台中输出信息，通常用来调试代码。第7行开始调用之前定义的函数获取当前时间，并且将时间赋值到timestring中，这样前端就能显示时间了。第12行开始显示一个操作提示。

        在界面中每点击一次刷新按钮，时间都会动态的更新为当前实时时间，并且会出现“刷新成功”的提示，在控制台中会输出console.log()中的数据，如果timestring显示结果和预期不一样，就可以通过console.log()来调试代码了。参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/console.log.html

<!-- pages/learning/index.js -->
/**
 * 刷新操作
 */
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循环输出
• 设置时间自动刷新

​​​​