第三节课又来啦,今天我们将会让小程序页面动起来,通过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循环输出
- 设置时间自动刷新
标签:03,index,程序开发,JS,time,timestring,刷新,setData From: https://blog.51cto.com/u_15651456/5931306