1.先设计页面
<!--pages/teachers/teachers.wxml-->
<view class='contenter'>
<view id='contenter'>任课教师列表</view>
</view>
<view class='content' id='content' wx:for="{{teachers}}" bindtap='selectTeacher' data-teacherid="{{item.teacherid}}">
<view class='top'>
<view class='left'>
<image src='../../images/1.jpg'></image>
</view>
<view class='right'>
<view class='name'>姓名：{{item.teachername}}</view>
<view class='teach'>任课：{{item.course}}</view>
</view>
</view>
</view>
// pages/teachers/teachers.js
Page({
/**
* 页面的初始数据
*/
data: {
//页面变量的存放位置
teachers:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({teachers:'张三'});
// var that=this;
var url ='调用接口';
let self=this;
// //读取缓存
// var student=wx.getStorageSync('student');
// //console.log(student);
var classid='100000-1603';
console.log(classid);
wx.request({
url: url,
data:{
classid : classid
},
header:{
'content-type': 'application/json'
},
success:(res)=>{
console.log(res.data)
this.setData({teachers:res.data})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//选中教师
selectTeacher: function(e){
var teacherid =e.currentTarget.dataset.teacherid;
wx.navigateTo({
url: '../testpaper/testpaper?teacherid='+teacherid,
})
}
})
/* pages/teachers/teachers.wxss */
.contenter{
width: 100%;
height: 120rpx;
border: solid 1rpx #ecf8c6;
background-color: #2d5371;
text-align: center;
}
#contenter{
margin-top: 17rpx;
}
#content{
background-color:#ebeef0;
}
.top{
width: 90%;
height: 270rpx;
/* border: 2rpx solid #ccc; */
margin: 5rpx;
}
.left{
width: 200rpx;
height: 200rpx;
border: 2rpx solid #ccc;
margin-top: 20rpx;
margin-left: 20rpx;
float: left;
}
.right{
width: 400rpx;
height: 200rpx;
/* border: 2rpx solid #ccc; */
margin-top: 50rpx;
margin-left: 20rpx;
float: left;
}
navigator{
margin-right: 40rpx;
margin-top: 30rpx;
float: left;
width: 150rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border: 2rpx solid #ccc;
background-color: #ecf8c6;
border-radius: 10rpx;
}
.name{
color: #6aa5d2;
}
.teach{
color: #666;
}
image{
width: 197rpx;
height: 197rpx;
}
2.页面显示
3.获取教师所带的班课
onLoad: function (options) {
this.setData({teachers:'张三'});
// var that=this;
var url ='调用接口';
let self=this;
// //读取缓存
// var student=wx.getStorageSync('student');
// //console.log(student);
var classid='100000-1603';
console.log(classid);
wx.request({
url: url,
data:{
classid : classid
},
header:{
'content-type': 'application/json'
},
success:(res)=>{
console.log(res.data)
this.setData({teachers:res.data})
}
})
},
4.在教室所在班课里面进行评教
评教页面设计展示
<view class='pj'>
<view class='top'>
<view class='left'>
<view class='tet1'>{{teacher.name}}</view>
<view class='tet2'>{{teacher.sex}} {{teacher.zhicheng}}</view>
</view>
<view class='right'>
<image src='../../images/1.jpg' style='width:200rpx;height:97px;'></image>
</view>
</view>
<!-- 85 -->
<view wx:for="{{testpaper}}">
<view class='content1'>
<view class='type'>
<text class='text1'>{{item.type}}</text>
</view>
<view class='time'>
<text class='text2'>{{item.start}}至{{item.end}}</text>
</view>
</view>
<view class='content2'>
<text class='text3'>{{item.name}}</text>
<navigator open-type="navigate" url="../paperdetails/paperdetails?id={{item.id}}">评教</navigator>
</view>
</view>
</view>
// pages/testpaper/testpaper.js
Page({
/**
* 页面的初始数据
*/
data: {
testpaper:null,
teacher:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
var url = "https://www.lishuming.top/pj/index.php/student/api/testpaper";
//读取缓存
var teacherid = options.teacherid;
wx.request({
url: url, //仅为示例，并非真实的接口地址
data: {
teacherid: teacherid
},
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => {
console.log(res.data);
this.setData({
testpaper: res.data.testpaper,
teacher: res.data.teacher
});
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
5.这里面最重要的就是数据缓存的读取
每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。
wx.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
参数说明：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| key | String | 是 | 本地缓存中的指定的 key |
| data | Object/String | 是 | 需要存储的内容 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
wx.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
参数说明：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| key | String | 是 | 本地缓存中的指定的 key |
| data | Object/String | 是 | 需要存储的内容 |