微信开发小程序之评教系统

首先是搭建显示的基本页面

在teachers.wxml文件中

    
      评教系统——我要评教
    
      
      
      
        
          {{item.teachername}}
        
        
          {{item.course}}
        
        
          留言
          评教
        
      
    

在teachers.wxss文件中设置页面样式

.section_gap{
  display: flex;
  margin-top: 20px;
   /* background-color: #ccc;  */
   /* border: solid 1px yellow;  */
}
.header{
  margin-top: 20rpx;
}
.section{
  height:120px;
  line-height: 30px; 
  display: flex;
  flex-direction: column;
   margin-left: 50rpx;  
  /* border: solid 1px #0f0;   */
}
.section_two text{
  color: #ccc;
}
.bottom{
  margin-top: 15rpx;
  display: flex;
}
navigator{
  margin: 10rpx;
  padding: 7rpx 30rpx;
  border: 1px solid red;
}

接下来就是调用接口获取信息

Page({

  /**
   * 页面的初始数据
   */
  data: {
    teachers:null,
    src: '../images/64.jpg'
  },

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

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

    var classid=student.classid;
    // 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});
      }
    })
  
  }
})

最后页面效果如下