1.在开始小程序运行之前先要下载开发者工具,根据电脑版本有不同的选择。
2.再申请一个qq邮箱,来注册小程序
3.下载之后再配置环境,配一个有效的域名。
4.写一个显示的页面。代码如下
<view class='content' wx:for="{{teachers}}">
<view class='top'>
<view class='left'>
<image src='../../images/1.jpg'></image>
</view>
<view class='right'>
<view>姓名:{{item.teachername}}</view>
<view>任课:{{item.course}}</view>
<navigator open-type="navigate" url=''>留言</navigator>
<navigator open-type="navigate" url="../testpaper/testpaper?teacherid={{item.teacherid}}">评教</navigator>
</view>
</view>
</view>
.top{
width: 90%;
height: 270rpx;
border: 2rpx solid #ccc;
margin: 30rpx;
}
.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: 20rpx;
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: #7CCD7C;
border-radius: 10rpx;
}
image{
width: 197rpx;
height: 197rpx;
/* border-radius: 60rpx; */
}
5.在js onload中写代码onLoad: function (options) {
var that=this;
var url ="https://www.lishuming.top/pj/index.php/student/api/teachers";
//读取缓存
var student=wx.getStorageSync('student');
var classid=student.classid;
console.log(classid);
wx.request({
url:url, //仅为示例,并非真实的接口地址
data: {
classid:classid
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data);
that.setData({teachers:res.data});
}
})
},
同时data中要传入一个为空的数据data: {
teachers:null
},
要把得到的数据传入data中有两种方法(1)在onload function中定义一个that让that等于this在success:function中显示var that=this;
success: function(res) {
console.log(res.data);
that.setData({teachers:res.data});
}
})
(2)用箭头函数 success: (res)=> {
console.log(res.data);
that.setData({teachers:res.data});
}
})