微信小程序，教师评教界面

1.首先在wxml中写入界面设计。代码如下：

任课教师列表

  
    
      
    
    
      {{item.teachername}}
      {{item.course}}
      
        留言
        评教
      
    
  

2.在wxss中写入样式，代码如下：

/* pages/teachers/teachers.wxss */
.header{
  height: 100rpx;
  text-align: center;
  background-color: #acc;
  color: #fff;
  line-height: 100rpx;
}
.section{
  width: 100%;
  height: 250rpx;
  /* border: 1px solid #f00; */
  background-color: #fff; 
  margin-top: 20rpx;
  display: flex;
}
.image{
  width: 250rpx;
  height: 250rpx;
  /* border: 1px solid #f0f; */
}
.content{
  margin: 0 20rpx;
}
.middle{
  margin: 30rpx 0;
  color: #ccc;
}
.bottom{
  display: flex;
  margin-top: 20rpx;
  /* border: 1px solid #00f; */
}
.bottom navigator{
  text-align: center;
  width: 170rpx;
  margin-left: 30rpx; 
  border: 1px solid #c00; 
}

3.在js中写入js，代码如下：

// pages/teachers/teachers.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //页面的变量存放
    teachers:null
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var url = "https://域名/pj/index.php/student/api/teachers";

   //读取缓存
    var student = wx.getStorageSync('student');
    var classid = student.classid;
    // var classid = '100000-1603';
    console.log(classid);

    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: {
        classid: classid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:(res)=> {
        this.setData({teachers:res.data});
      }
    })
  
  },

链接评教内容，重新创建目录testpaper 在wxml中写入页面，代码如下：

  {{teachername}}
  
  {{teachersex}}
  {{teacherzhicheng}}
  


留言



 {{item.type}}
 {{item.start}}至{{item.end}}

{{item.name}} 

wxss代码：

/* pages/testpaper/testpaper.wxss */
page{
  background-color: #eee;
}
.header{
  height: 300rpx;
  width: 100%;
  background-color: #acc;
  color: #fff;
  position: relative;
}
image{
  width: 250rpx;
  height: 250rpx;
  position: absolute;
  top: 15rpx;
  left: 20rpx;
  border-radius:250rpx;
}
.liuyan{
  position: absolute;
  right: 40rpx;
  top: 190rpx;
  width: 120rpx;
  height: 55rpx; 
  background-color: #fff;
  color: #FF3030;
  border-radius: 20rpx;
  line-height: 50rpx;
  font-size: 35rpx;
  text-align: center;
   font-weight: bold;
}
.name{
  position: absolute;
  left: 320rpx;
  top: 50rpx;
  font-weight: bold;
  
}
.container{
  background-color: #fff; 
  margin-top: 20rpx;
}
.top{
  height: 60rpx;
  width: 100%;
   border-bottom: 1px solid #ccc; 
  line-height: 50rpx;
  font-size: 26rpx;
  color: #999;
  display: flex;
  margin-top: 10rpx;
  position: relative;
}
.left{
  display: flex;
  font-weight: bold;
  
}
.right{
  display: flex;
  position: absolute;
  right: 3rpx;
 
  
}
.title{
  height:100rpx;
  width: 100%;
  line-height: 80rpx;
}
.jieshao text{
  margin-left: 20rpx;
  line-height: 130rpx;
  font-size: 32rpx;
}
.teachername{
  font-size: 48rpx;
}

js代码：

// pages/testpaper/testpaper.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    teachername: null,
    testpaper: null,
    teachersex: null,
    teacherzhicheng: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options);
    var url = "https://

域名

/pj/index.php/ /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, teachername: res.data.teacher.name, teachersex: res.data.teacher.sex, teacherzhicheng: res.data.teacher.zhicheng }); } }) },

评教界面和评教内容界面就可以完成了，可以在调试工具中预览生成二维码，微信扫描去查看。